ASP.NET MVC引导程序动态模式内容 [英] ASP.NET MVC Bootstrap dynamic modal content

问题描述

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

I am using MVC 5 and I have a <button> for each record in the viewModel as follows:

<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根据来自Model.Questions的item.id加载不同的内容.我该怎么办?

Foreach (Var item in Model.Questions), there will be a button that opens up a modal. However, I want this modal to load different contents based on the item.id from Model.Questions. How can I do this?

推荐答案

您可以将引导模式对话框与ajax一起使用，以将详细信息/视图部分视图结果加载到模式对话框中.

You can use bootstrap modal dialog with ajax to load the details/view partial view result to the modal dialog.

首先，在按钮上添加一个新的CSS类，稍后将用它来连接click事件以启动模式对话框.同样，我们将使用Url.Action html helper方法生成详细信息视图的url，并将其保留在按钮的html5 data属性中(稍后我们将用它来进行ajax调用)

First, add a new css class to the button, which we will use to wire up the click event later to fire up the modal dialog. Also we will generate the url to the details view using the Url.Action html helper method and keep that in 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 your current view (or even the layout). This will act as the 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>

现在，让我们使用"modal-link" css类连接任何元素上的click事件.我们早些时候将此类添加到了按钮中.

Now, let's wire up the click event on any element with "modal-link" css class. We added this classes to our buttons earlier.

$(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 )，并对该URL进行ajax调用.在我们的例子中，它将调用Details动作方法.因此，请确保它返回部分视图结果(超出模态对话框的内容)

So when user clicks on the button, it reads the value of targeturl data attribute (which is a URL with the item id value in the querystring) and make an ajax call to that URL. In our case, It will make a call to the Details action method. So let's make sure that it returns the partial view result (out modal dialog content)

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);
}

部分视图将具有模式对话框所需的html标记.

And the partial view will have the needed html markup for the modal dialog.

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

这篇关于ASP.NET MVC引导程序动态模式内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！