jquery - ASP.NET MVC Bootstrap 动态模式内容

Question

我正在使用 MVC 5，并且我有一个 <button>对于 viewModel 中的每条记录如下:

<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) ，会有一个button打开一个 modal 。然而，我想要这个modal根据item.id加载不同的内容来自Model.Questions 。我怎样才能做到这一点？

Answer 1

您可以使用带有ajax的 Bootstrap 模态对话框将详细信息/查看部分 View 结果加载到模态对话框。

首先，向按钮添加一个新的 css 类，稍后我们将使用它来连接单击事件以启动模式对话框。此外，我们将使用 Url.Action html 帮助器方法生成详细信息 View 的 url，并将其保留在按钮的 html5 数据属性中(稍后我们将在 ajax 调用中使用它)

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

现在将以下代码添加到您当前的 View (甚至布局)中。这将充当我们的模式对话框的容器。

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

现在，让我们用“modal-link”css 类连接任何元素上的 click 事件。我们之前将此类添加到我们的按钮中。

$(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();

        });
    });
});

因此，当用户单击按钮时，它会读取 targeturl 数据属性的值(这是一个在查询字符串中包含项目 id 值的 URL)并生成一个ajax 调用该 URL。在我们的例子中，它将调用 Details 操作方法。因此，让我们确保它返回部分 View 结果(模态对话框内容)

public ActionResult Details(int id)
{
    // Get the data using the Id and pass the needed data to view.

    var vm = new QuestionViewModel();

    var question = db.Questions.FirstOrDefault(a=>a.Id==id);
    // To do: Add null checks

    vm.Id = question.Id;
    vm.Title = question.Title;
    vm.Description = question.Description;

    return PartialView(vm);
}

并且分部 View 将具有模式对话框所需的 html 标记。

@model YourNameSpace.QuestionViewModel
<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">

        <h4>@Model.Title</h4>
        <p>@Model.Description</p>
        <p>Some other 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>