Tengo un código HTML:
<div class="container"> <div class="row"> @foreach(var post in Model) { <div class="col-sm-8"> <div class="row"> <div class="post-body container shadow p-3 mb-3 rounded-3"> <h2>@post.Title</h2> <p>@post.Description</p> <button type="button" class="show-post-btn btn btn-secondary" data-bs-toggle="modal" data-bs-target="#wholePost" onclick="return showContent()">Show post...</button> </div> <div class="modal fade" id="wholePost"> <div class="modal-dialog modal-dialog-scrollable modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">@post.Title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>@post.Content</p> </div> </div> </div> </div> </div> </div> <div class="sidebar col-sm-4"> col2 </div> } </div>Quiero hacer que cuando haga clic en el botón "Mostrar publicación" se abra la ventana modal con el contenido correspondiente. Actualmente, si hay dos publicaciones de blog que hacen clic en el botón, se muestra el contenido de la primera publicación, incluso si hago clic en el botón en la segunda publicación de blog. Quiero hacer que cuando haga clic en "Mostrar publicación" en la ventana modal de la primera publicación del blog se abra con el contenido de la primera publicación del blog y cuando haga clic en el botón en la ventana modal de la segunda publicación del blog se abra con el contenido de la segunda publicación del blog.
Ni siquiera entiendo dónde debo hacer esto, en código c # o con javascript. Por favor, proporcione una teoría, no un código, si pudiera, porque me gustaría adivinar por mi cuenta cómo hacer esto. Lo siento de antemano si ya hay una publicación como esa y muchas gracias por su ayuda.
Podría hacerlo en JS pero necesita propagar HTML con información adicional
solo un código de concepto, por ejemplo:
<button onclick="showContent(@post.Id);">Show post...</button> ... <div class="modal fade" id="wholePost_@post.Id">archivo JS
function showContent(id){ $("#wholePost_"+id).show(); }Probablemente haya más formas de hacerlo.
La forma en que funcionan los modales de arranque es que el atributo data-bs-target en su botón debe tener la misma identificación que el modal, por eso sigue abriendo el modal para su primer elemento.
Lo que debe hacer es asignar a cada modal su id por separado, por lo que en lugar de la id de #wholePost para todos los modales debería ser como #wholePost1, #wholePost2, ... .