使用引导模态窗口PartialView使用引导模态窗口PartialView(Using Boots

我一直在寻找到使用Twitter的引导模式窗口的局部视图。不过，我真的不认为它的设计以这种方式使用; 好像它是为了在一个相当静态的方式使用。不过，我觉得这是很酷，以便能够使用它作为一个局部视图。

因此，举例来说，假设我有游戏的列表。当点击一个链接对于给定的游戏，我想从服务器请求数据，然后在一个模态窗口“在顶部”在本页面显示有关该游戏的信息。

我已经做了一点点研究，发现这个帖子是相似，但并不完全相同。

有没有人试图与成功还是失败？任何人有什么的jsfiddle或某些来源，他们会愿意分享？

谢谢你的帮助。

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

当然，您将需要查看文件夹内名为GetGameListing.cshtml视图..

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

Answer 3:

我以一个很好的例子，我发现这实现了这里。我已经取代了与Twitter的引导模态窗口例子中使用jQuery的对话框。

Answer 4:

完整清晰的示例项目http://www.codeproject.com/Articles/786085/ASP-NET-MVC-List-Editor-with-Bootstrap-Modals它显示创建，编辑和删除与引导实体经营情态动词，也包括代码处理结果从这些实体操作返回（C＃，JSON，JavaScript的）

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和有rendors视图为字符串自定义类。我这样做，所以我可以有一个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
  );
}

热网问题