使用Bootstrap模态窗口作为PartialView

Question

我想使用Twitter Bootstrap模态窗口作为局部视图。 但是，我不认为它是设计用于这种方式的；它似乎是要以相对静态的方式使用。尽管如此，我认为能够将其用作局部视图会很酷。

例如，假设我有一个游戏列表。在单击给定游戏的链接时，我希望从服务器请求数据，然后在当前页面上方显示有关该游戏的信息的模态窗口。

我做了一些调查，并找到了这篇文章，其中类似但并不完全相同。

有人尝试过成功或失败吗？ 任何人有jsFiddle上的东西或愿意分享的资源吗？

谢谢您的帮助。

- KWondra

---

您可以在这里查看一个详细的示例：http://www.codingfusion.com/Post/Using-Bootstrap-Modal-window-as-PartialView-in-Net-MVC - MaxPayne

Answer 1

是的，我们已经做过这个。

在您的Index.cshtml中，您将拥有类似于以下内容的东西...

<div id='gameModal' class='modal hide fade in' data-url='@Url.Action("GetGameListing")'>
   <div id='gameContainer'>
   </div>
</div>

<button id='showGame'>Show Game Listing</button>

然后在JS中，对于同一个页面（内联或单独文件），你将会有类似以下的代码...

$(document).ready(function() {
   $('#showGame').click(function() {
        var url = $('#gameModal').data('url');

        $.get(url, function(data) {
            $('#gameContainer').html(data);

            $('#gameModal').modal('show');
        });
   });
});

你可以在控制器上定义一个类似下面这样的方法：

[HttpGet]
public ActionResult GetGameListing()
{
   var model = // do whatever you need to get your model
   return PartialView(model);
}

你当然需要在Views文件夹中创建名为GetGameListing.cshtml的视图。

- Shane Courtrille

---

如果您想从模态框中提交表单，那么情况会变得更加复杂。 - Shane Courtrille

最重要的是你需要处理服务器端错误。我们通过让服务器返回一个JSON对象，其中包含结果代码和部分视图（填充了模型错误）作为字符串来显示错误。 - Shane Courtrille

如果您在此阶段尚未这样做，请不要忘记包含Bootstrap.js文件；否则modal('show')将无法定义！ - t_plusplus

直到我将 gameModal div class 中的 "hide" 移除，这才对我起作用。 - No Window

使用[ChildActionOnly]工作？ - Matheus Miranda

Answer 2

我会使用模板和mustache.js来实现这个功能（您也可以使用其他JavaScript模板库）。

在我的看法中，我大致有以下内容：

<script type="text/x-mustache-template" id="modalTemplate">
    <%Html.RenderPartial("Modal");%>
</script>

...这让我可以将模板保存在名为 Modal.ascx 的部分视图中：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
    <div>
        <div class="modal-header">
            <a class="close" data-dismiss="modal">&times;</a>
            <h3>{{Name}}</h3>
        </div>
        <div class="modal-body">
            <table class="table table-striped table-condensed">
                <tbody>
                    <tr><td>ID</td><td>{{Id}}</td></tr>
                    <tr><td>Name</td><td>{{Name}}</td></tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <a class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>

我在视图中为每个模态框创建占位符：

<%foreach (var item in Model) {%>
    <div data-id="<%=Html.Encode(item.Id)%>"
         id="modelModal<%=Html.Encode(item.Id)%>" 
         class="modal hide fade">
    </div>
<%}%>

使用jQuery进行AJAX调用：

<script type="text/javascript">
    var modalTemplate = $("#modalTemplate").html()
    $(".modal[data-id]").each(function() {
        var $this = $(this)
        var id = $this.attr("data-id")
        $this.on("show", function() {
            if ($this.html()) return
            $.ajax({
                type: "POST",
                url: "<%=Url.Action("SomeAction")%>",
                data: { id: id },
                success: function(data) {
                    $this.append(Mustache.to_html(modalTemplate, data))
                }
            })
        })
    })
</script>

然后，你只需要在某个地方设置一个触发器：

<%foreach (var item in Model) {%>
    <a data-toggle="modal" href="#modelModal<%=Html.Encode(item.Id)%>">
        <%=Html.Encode(item.DutModel.Name)%>
    </a>
<%}%>

- ken

Answer 3

完整而清晰的示例项目 http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals 它使用Bootstrap显示创建、编辑和删除实体操作弹出框，并包括处理这些实体操作返回结果的代码（c＃，JSON，javascript）。

- Брайков

Answer 4

我通过使用一个很好的例子在这里实现了这一点。我用 Twitter Bootstrap Modal 窗口替换了该示例中使用的 jQuery 对话框。

- Flavia Obreja

---

Flavia Obreja和@Shane Courtrille，你们能否在这里解释一下如何使用Bootstrap模态框实现“表单提交”并给出一个不需要任何插件的例子？ - KomalJariwala

Answer 5

我使用AJAX来完成这个操作。您有一个部分，其中包含典型的Twitter模态框模板HTML代码：

<div class="container">
  <!-- Modal -->
  <div class="modal fade" id="LocationNumberModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            &times;
          </button>
          <h4 class="modal-title">
            Serial Numbers
          </h4>
        </div>
        <div class="modal-body">
          <span id="test"></span>
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            Close
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

接下来是你的控制器方法，我使用JSON并有一个自定义类将视图呈现为字符串。我这样做是为了在一个Ajax调用中执行多个屏幕上的Ajax更新。参考链接：示例，但如果您只进行一次调用，则可以在返回时使用PartialViewResult/ActionResult。我将使用JSON来展示它。

控制器中的JSON方法：

public JsonResult LocationNumberModal(string partNumber = "")
{
  //Business Layer/DAL to get information
  return Json(new {
      LocationModal = ViewUtility.RenderRazorViewToString(this.ControllerContext, "LocationNumberModal.cshtml", new SomeModelObject())
    },
    JsonRequestBehavior.AllowGet
  );
}

然后，在使用您的模态框时：您可以将AJAX打包在您的部分视图中，并调用@{Html.RenderPartial... 或者您可以使用带有div的占位符：

<div id="LocationNumberModalContainer"></div>

然后是你的ajax请求：

function LocationNumberModal() {
  var partNumber = "1234";

  var src = '@Url.Action("LocationNumberModal", "Home", new { area = "Part" })'
    + '?partNumber='' + partNumber; 

  $.ajax({
    type: "GET",
    url: src,
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
      $("#LocationNumberModalContainer").html(data.LocationModal);
      $('#LocationNumberModal').modal('show');
    }
  });
};

那么您的模态框按钮是这样的：

<button type="button" id="GetLocBtn" class="btn btn-default" onclick="LocationNumberModal()">Get</button>

- eaglei22

Answer 6

将模态框和JavaScript放入部分视图中，然后在页面中调用该部分视图。这样可以处理表单提交。

部分视图

<div id="confirmDialog" class="modal fade" data-backdrop="false">
 <div class="modal-dialog" data-backdrop="false">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Missing Service Order</h4>
        </div>
        <div class="modal-body">
            <p>You have not entered a Service Order. Do you want to continue?</p>
        </div>
        <div class="modal-footer">
            <input id="btnSubmit" type="submit" class="btn btn-primary" 
              value="Submit" href="javascript:" 
               onClick="document.getElementById('Coordinate').submit()" />
            <button type="button" class="btn btn-default" data- 
                                               dismiss="modal">Cancel</button>
        </div>
    </div>
  </div>
</div>

JavaScript

  <script type="text/javascript" language="javascript">
$(document).ready(function () {
    $("#Coordinate").on('submit',
        function (e) {
            if ($("#ServiceOrder").val() == '') {
                e.preventDefault();
                $('#confirmDialog').modal('show');
               }
            });
    });
</script>

然后只需在页面的表单中调用您的部分即可。

Create.cshtml

 @using (Html.BeginForm("Edit","Home",FormMethod.Post, new {id ="Coordinate"}))
 {
     //Form Code

     @Html.Partial("ConfirmDialog") 
 }

- peeps3216