ASP.NET MVC Bootstrap Dynamic Modal Content

I am using MVC 5 and I have <button>

for each entry in the viewModel

following:

<table class="table table-hover">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Questions.Single().QuestionType)
    </th>
    <th>
        @Html.DisplayNameFor(model =>model.Questions.Single().Scheme)
    </th>
</tr>

@foreach (var item in Model.Questions)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.QuestionType)
        </td>
        <td>
            <button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#myModal" >
                View
            </button>
        </td>
    </tr>
}

      

Foreach (Var item in Model.Questions)

Will be button

, which will open a modal

. However, I want this one to modal

load different content based on item.id

from Model.Questions

. How can i do this?

+3


source to share


3 answers


You can use bootstrap modal dialog with ajax to load detail / view partial view into modal dialog.

First add a new css class to the button that we will use to hook up the click event later to trigger the modal dialog. Also we will generate the url to represent the details using the Url.Action

html helper method and store this in the html5 data attribute in the button (we will use this for our ajax call later)

@foreach (var item in Model.Questions)
{
  <tr>
    <td>
        <button type="button" class="btn btn-success btn-sm  modal-link"  
                 data-targeturl="@Url.Action("Details","Home",new { id = item.Id })">
            View
        </button>
     </td>
   </tr>
}

      

Now add the below code to the current view (or even layout). This will act as a container for our modal dialog.

<!-- The below code is for the modal dialog -->
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
    <a href="#close" title="Close" class="modal-close-btn">X</a>
    <div class="modal-content">
        <div class="modal-body"></div>
    </div>
</div>

      

Now let's hook up a click event to any element with class "modal-link". We previously added these classes to our buttons.



$(function () {

    $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();

        $("#modal-container").remove();
        $.get($(this).data("targeturl"), function (data) {
            $('<div id="modal-container" class="modal fade">'+
                '<div class="modal-content" id= "modalbody" >'+ 
                    data + '</div></div>').modal();
        });
    });
});

      

So when the user clicks the button, it reads the value of the targeturl

data attribute and makes an ajax call to that url. In our case, it will call the Details action method. So let's make sure it returns a partial view result (outside the modal content of the dialog)

public ActionResult Details(int id)
{
  // to do  : You can pass some data (view model) to the partial view as needed
  return PartialView();
}

      

And the partial view will have the required HTML markup for the modal dialog.

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
        <p>Some content for the modal </p>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

      

+4


source


if you want to have dynamic modal code this code is helpful for you. (I hope so)



<table class="table table-hover "  >
            <thead>
                <tr>
                    <th>Sıra</th>
                    <th>PC Adı</th>
                    <th>Kullanıcı</th>
                    <th>Marka/Model</th>
                    <th>Departman</th>
                    <th>İşletim Sistemi</th>
                    <th>Office</th>
                </tr>
            </thead>
            <tbody>
                @{int i1 = 1;
                    foreach (var item in Model.devices)
                    {
                        <tr style="font-size:13px" >
                            <td>@i1</td>
                            <td>@item.DeviceName</td>
                            <td>@item.DeviceOwner</td>
                            <td>@item.DeviceBrand</td>
                            <td>@item.DeviceDepartment</td>
                            <td data-toggle="modal" data-target="#@i1"> @Model.softwares[i1 - 1].OSName</td>
                            <td data-toggle="modal" data-target="#@i1">@Model.softwares[i1 - 1].OfficeName</td>
                        </tr>

                        <div id="@i1" class="modal fade"  role="dialog">
                            <div class="modal-dialog">
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title">İşletim Sistemi ve Office Detayları</h4>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                            <p>OS Adı:@Model.softwares[i1 - 1].OSName</p>
                                            <p>OS Lisans:@Model.softwares[i1 - 1].OSLicenceCode</p>
                                            <p>OS Fatura:@Model.softwares[i1 - 1].OSBillCode</p>
                                            <p>Office Adı:@Model.softwares[i1 - 1].OfficeName</p>
                                            <p>Office Lisans:@Model.softwares[i1 - 1].OfficeLicenceCode</p>
                                            <p>Office Fatura:@Model.softwares[i1 - 1].OfficeBillCode</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    </div>
                                </div>

                            </div>
                        </div>

                        i1++;
                    }
                }

            </tbody>
        </table>

      

0


source


Thanks Shjiu.Code works fine. To change the full screen mode of the model, add this code. '.

$(function () {
    $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $("#modal-container").remove();
        $.get($(this).data("targeturl"), function (data) {
            $('<div id="modal-container" class="modal fade">  <div class="modal-dialog modal-lg" style="width:500px;>' +
                '<div class="modal-content" id= "modalbody" >' + 
                data + 
                '</div></div></div>').modal();
        });
    });
});

      

-1


source







All Articles