CODEWITHSUNDEEP
asp.net-mvcasp.net-corec#-4.0bootstrap-modal
BDB
BDB

Reputation: 459

Passing model to a partial view that is used for modal

I am trying to open the bootstrap modal by passing the model object dynamically. The modal content is in partial view as follows,

@model int

<div class="modal fade" id="modal-action-id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"></span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <input type="text" value="@Model" />
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" >cancel</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal" >delete</button>
            </div>
        </div>
        </div>
 </div>

And, here is my div which opens modal by passing model object dynamically,

<div>
    @{
        for (int i = 5; i > 0; i--)
        {
            <div>
                <button id="deleteModal-@i" type="button" class="btn btn-danger" data-toggle="modal" data-sid="@i" data-target="#modal-action-id">
                    <i class="fa fa-trash-o pr-2" aria-hidden="true"></i>Delete @i
                </button>
                @await Html.PartialAsync("_MyPartialView", i)
            </div>

        }

    }

</div>

Now, the problem is no matter which button I click here it only passes the value 5 to the partial view. Also, I have only seen @await Html.PartialAsync() portion of code outside of for loop passing static model to the partial view in different applications. Am I missing anything here, conceptually? Any suggestion would be appreciated.

Upvotes: 0

Views: 1140

Answers (1)

Michael Wang
Michael Wang

Reputation: 4022

The reason is all _MyPartialView in same id id="modal-action-id", and that's why you click any button only to show same _MyPartialView.

You could change button data-target="#modal-action-@i"

<button id="deleteModal-@i" type="button" class="btn btn-danger" data-toggle="modal" data-sid="@i" data-target="#modal-action-@i">

and change div id="modal-action-@Model"

<div class="modal fade" id="modal-action-@Model" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Then, you can get what you want. All tested.

Upvotes: 1

Related Questions