Bootstrap 模态对话框 - 从 MVC 部分视图加载内容

• 下载源代码 - 3.9 MB

引言

我将展示一种简单的方法，在 Bootstrap 对话框中显示部分视图的内容。我还会展示如何修复 对话框不出现的问题 在 3.1.0 版本之后。无需编写额外的 Ajax 调用 - 这由 Bootstrap 内部处理。

背景

当您有一个列表 - 数据表并想添加一条记录时，使用模态对话框是更好的主意之一 - 仅仅因为它不需要转到另一个页面。同样对于记录的删除 - 确认可以使用 bootstrap 模态对话框完成。您可以在许多其他地方使用模态对话框。

我在网上看到了许多不同的创建模态对话框的方法... 许多错误的方法，比如

1. 在页面上创建所有对话框，然后使用 JavaScript 显示或隐藏它们。这意味着将部分视图添加到页面 - 呈现所有信息，然后如果用户需要查看对话框 - 它将出现。
2. 进行 Ajax 调用以显示内容。这意味着每次对话框都会调用 .... 效率不高。最好为此使用一个库。

现在的问题是如何以一种漂亮而简单的方式做到这一点？

1. 在主布局中，您需要有一个模态容器 - 对话框将加载的地方。

   <div id="modal-container" class="modal fade" 
   tabindex="-1" role="dialog">
      <div class="modal-content">
      </div>
    </div>

   如果您使用的是 bootstrap v 3.0.0，则删除

   <div class="modal-content"></div>

   在 3.1.0 版本之后，应该包含此内容 - 这就是版本的更改如何影响我的实现。

2. 设置一些样式 - 我只是为了示例将其放在主布局中，但您可以将其放在项目中正确的位置。

      <style>
           .modal-content {
               width: 600px !important;
               margin: 30px auto !important;
           }
       </style>

3. 添加 JavaScript - 这将在内部进行 Ajax 调用，并将 partialview 内容注入到模态容器中。

   <script type="text/javascript">
           $(function () {
               // Initialize numeric spinner input boxes
               //$(".numeric-spinner").spinedit();
               // Initialize modal dialog
               // attach modal-container bootstrap attributes to links with .modal-link class.
               // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
               $('body').on('click', '.modal-link', function (e) {
                   e.preventDefault();
                   $(this).attr('data-target', '#modal-container');
                   $(this).attr('data-toggle', 'modal');
               });
               // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
               $('body').on('click', '.modal-close-btn', function () {
                   $('#modal-container').modal('hide');
               });
               //clear modal cache, so that new content can be loaded
               $('#modal-container').on('hidden.bs.modal', function () {
                   $(this).removeData('bs.modal');
               });
               $('#CancelModal').on('click', function () {
                   return false;
               });
           });
       </script>

4. 创建一个控制器动作，它将返回部分视图。

    public ActionResult ViewLyubomir()
   {
        return PartialView("_Lyubomir");
    }

5. 创建一个动作，它将处理在部分视图中发生的 post 的结果。

    [HttpPost]
    public ActionResult Lyubomir()
    {
        return RedirectToAction("Index");
    }

6. 创建一个部分视图

   <div class="modal-body">
       <div class="alert alert-warning">
           <span class="glyphicon glyphicon-warning-sign"></span>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
           Donec consequat nisl a nibh tincidunt condimentum. 
           Nullam in augue vitae augue dictum eleifend. 
           Nunc porta fermentum metus, quis efficitur lectus scelerisque ac. 
           Quisque egestas sit amet nunc in interdum. 
           Etiam malesuada maximus nisi, id tempus metus. 
           Vivamus at sapien ut metus aliquet sodales sed id magna. 
           Integer in auctor ex. Phasellus tempor, est vel placerat dapibus, 
           nulla dui tempor ligula, at pulvinar libero nunc gravida metus. 
           Proin non feugiat felis. Proin ut ultrices ex. Morbi aliquet lacinia elit at bibendum. 
           Nunc facilisis, neque a finibus dignissim, turpis felis vulputate diam, 
           a tristique tellus nibh nec nulla. Suspendisse eget augue non turpis 
           dignissim euismod eget eget odio. Donec sit amet nibh cursus, efficitur 
           nibh in, sodales arcu. Pellentesque pulvinar consequat lacus ac porttitor.
       </div>
       @using (Html.BeginForm("Lyubomir", "Home", FormMethod.Post))
       {
           <div class="row">
               &nbsp;
           </div>
           <div class="row">
               <div class="col-md-4 col-md-offset-4">
                   <button type="button" class="btn btn-default" 
                   data-dismiss="modal">Cancel</button>
                   <button type="submit" id="approve-btn" 
                   class="btn btn-danger">Save</button>
               </div>
           </div>
       }
   </div>
   <script type="text/javascript">
       $(function () {
           $('#approve-btn').click(function () {
               $('#modal-container').modal('hide');
           });
       });
   </script>

7. 最后一步是使用特定属性创建一个动作链接。

   @Html.ActionLink("Lyubomir ", "ViewLyubomir", "Home", 
   null, new { @class = "modal-link btn btn-success" })

它是如何工作的？

在第 7 点，当用户点击链接时，基于属性 - modal-link，我们为具有该属性的所有链接附加了一个点击事件 - 第 3 点。 在第 3 点，将阻止链接的默认操作，并将该链接指向的内容注入到模型容器 div 第 1 点。 当用户在模态对话框中发布时 - 第 6 点，数据将在相应的控制器中处理 - 第 5 点。

当您打开项目时 - Home 视图有一个链接按钮 - Lyubomir。 点击它，您将看到奇迹发生。

关注点

正如您所看到的 - 漂亮而简单，无需直接 Ajax 调用即可显示内容 - 所有内容均由 Bootstrap 处理。 只要记住版本的更改以及这如何影响该示例。 您可以在线搜索，但这似乎是一个美观的问题，但我花了一些时间才弄清楚在哪里应用它。