Pass Data Into A Modal Using Javascript

for now I have a pop up modal box with some details from my model. It pops up when a user clicks on a list item. What i did i have added the Modal into a foreach loop which i know

Solution 1:

Here you can proceed like.

Your list of rows

@foreach (var list inModel)
{    
     //You can put other rows data like data-id and get them on popup open                <buttontype="button"class="btn btn-danger btn-xs"data-toggle="modal"data-target="#myModal"data-id="@list.PrimaryKey">Click</button>

 }

Your modal outside to the loop

<div id="myModal"class="modal fade" role="dialog">
                <divclass="modal-dialog"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal">&times;</button><h4class="modal-title">Details</h4></div><divclass="modal-body"><inputid="primaryKeyValue"></div><divclass="modal-footer"><formasp-controller="Billing"asp-action="Delete"method="post"class="form-inline"role="form"><inputtype="hidden"id="id"><buttontype="submit"class="btn btn-danger"><spanclass="glyphicon glyphicon-trash"style="vertical-align:middle;margin-top: -5px"></span> Delete</button><buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button></form></div></div></div></div>

On modal open

    $(document).ready(function () {
            $('#myModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);//Button which is clickedvar clickedButtonId= button.data('id');

               $("input #primaryKeyValue").val(clickedButtonId);

 // If there are many values you want to show or want to make ajax call, you can do it here, and then setthem inside modal(popup)

        });  

See for more details about bootstrap events https://getbootstrap.com/javascript/#modals-related-target