使用Bootstrap Modal窗口作为PartialView

68

我一直在使用Twitter Bootstrap Modal窗口作为局部视图。但是，我并不真正认为它是按这种方式使用的。似乎应该以相当静态的方式使用它。不过，我认为能够将其用作局部视图会很不错。

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

我做了一些研究，发现这篇文章相似但不完全相同。

有没有人尝试过成功或失败？有人在jsFiddle上有东西或他们愿意分享的东西吗？

谢谢你的帮助。

javascript  asp.net-mvc  twitter-bootstrap  modal-dialog 
— 昆德拉
source

Answers:

133

是的，我们已经做到了。

在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）
source
2
如果要从模态中提交表单，它将变得更加复杂。
— Shane Courtrille 2012年
2
最大的事情是您需要处理服务器端错误。我们通过让服务器在需要显示错误时返回带有结果代码和部分视图（填充有模型错误）的json对象作为字符串来实现此目的。
— Shane Courtrille 2012年
是的，我目前正在应用程序中使用它。对于这种错误，我可能会遵循相同的格式。
— KWondra
顺便说一句：如果您的模式不起作用，请在此处检查您的Bootstrap版本和最新的示例代码：getbootstrap.com/javascript/#modals我现在尝试了此代码，效果很好！:)
— Leniel Maccaferri 2014年
3
在我从gameModal div类中删除“隐藏”之前，这对我不起作用。
— 无窗
7

我使用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
source
4

我通过使用一个很好的例子来实现这一点。我已将示例中使用的jquery对话框替换为Twitter Bootstrap Modal窗口。

— Flavia Obreja
source
Flavia Obreja和@Shane Courtrille，您能在这里解释“从模态提交表单”和带有示例的Bootstrap模态，没有任何插件吗？
— KomalJariwala 2014年
2

我使用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展示它。

以及Controller中的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 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
source
1

将模式和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>

Java脚本

  <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
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.