使用引导模式窗口作为PartialView

Question

我希望使用Twitter引导模式窗口作为部分视图。然而，我并不真的认为它被设计成以这种方式使用；它似乎是为了以相当静态的方式使用。然而，我认为能够将其用作部分视图会很酷。

比如说，我有一个游戏列表。单击给定游戏的链接后，我希望从服务器请求数据，然后在当前页面顶部的模式窗口中显示有关该游戏的信息。

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

有没有人尝试过成功或失败？有人在JSFIDLE上有什么东西或者他们愿意分享的一些来源吗？

谢谢你的帮助。

Answer 1

我通过使用我在这里找到的一个很好的例子实现了这一点。我已经用TwitterBootstrap模式窗口替换了该示例中使用的jquery对话框。

Answer 2

我用胡子做这个。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

是的，我们已经这样做了。

在你的索引中。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。。