ASP.NET MVC Bootstrap 动态模态内容

Posted 2023-05-08

【中文标题】ASP.NET MVC Bootstrap 动态模态内容

【英文标题】：ASP.NET MVC Bootstrap dynamic modal content

【发布时间】：2017-08-16 11:35:43

【问题描述】：

我正在使用 MVC 5，对于 viewModel 中的每条记录，我都有一个 <button>，如下所示：

<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 加载不同的内容。我该怎么做？

【问题讨论】：

jquery ajax 将是方式

【参考方案1】：

您可以使用带有 ajax 的引导模式对话框将详细信息/视图部分视图结果加载到模式对话框。

首先，为按钮添加一个新的 css 类，稍后我们将使用它来连接 click 事件以启动模态对话框。此外，我们将使用Url.Action html 帮助方法生成详细信息视图的 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>

现在将以下代码添加到您当前的视图（甚至是布局）中。这将作为我们模式对话框的容器。

<!-- 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）并对该 URL 进行 ajax 调用.在我们的例子中，它将调用Details 操作方法。所以让我们确保它返回部分视图结果（输出模态对话框内容）

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 标记。

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

【讨论】：

嘿@shyju，感谢您的教导，它工作正常..但是模态似乎是全屏宽度，并且没有淡入淡出效果..有没有办法解决这个问题？跨度>

我确定现在帮助 OP 为时已晚，但对于其他阅读本文的人，您可以通过剪切底部代码 sn-p (<div class="modal-content">...</div>) 避免全屏宽度并创建淡入淡出效果) 并将其粘贴到外部<div class="modal-dialog">[paste here]</div>

这很好用。顺便说一句，为了避免戴夫提到的全屏，ponury-kostek（下面的其他答案与这个答案一起）可以解决问题！干得好 Shyju。

【参考方案2】：

谢谢Shjiu。代码工作正常。要全屏更改模型，请添加此代码。 ' .

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

【讨论】：

这个修改连同上面 Shyju 的原始代码效果很好！弹出窗口现在居中。

【参考方案3】：

如果你想拥有动态模态，这段代码对你有用。（我希望如此）

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