Question 86870 in ASP.NET Question posted in
The official documentation can be found here.

How to work with modal window in ASP NET 6? – Asp.net

I have a HTML code:

<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>

I want to make that to when I click on "Show Post" button modal window is open with corresponding content. Currently, if there is two blog posts clicking on button result in displaying content from the first post even If I click on button in the second blog post.
I want to make that when I click on "Show post" in first blog post modal window opens with content from first blog post and when I click on button in the second blog post modal window open with content from second blog post.

I even don’t understand where I should make this, in c# code or with javascript. Please provide me theory not a code if you could because I would like to guess on my own how to make this. Sorry in advance if there is post like that already and great thanks for your help.

Tags:

2

Answers


  1. 0

    You could do it on JS but need to propagate HTML with some additional info

    just some concept code for example:

    <button onclick="showContent(@post.Id);">Show post...</button>
...
<div class="modal fade" id="[email protected]">

    JS file

    function showContent(id){
    $("#wholePost_"+id).show();
}

    There are probably some more ways to do it.

    Login or Signup to reply.
  2. 0

    The way bootstrap modals work is that the data-bs-target attribute in your button needs to have the same id as the modal so that’s why it keeps opening the modal for your first element.
    What you need to do is give each modal its separate id, so instead of #wholePost id for all of the modals it should be like #wholePost1, #wholePost2, … .

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search