使用 Bootstrap Modal 窗口作为 PartialView

2022-01-17 00:00:00 modal-dialog javascript twitter-bootstrap asp.net-mvc

我希望使用 Twitter Bootstrap 模态窗口 作为局部视图.但是，我真的不认为它是为这种方式设计的.似乎它是为了以相当静态的方式使用.不过，我认为能够将其用作局部视图会很酷.

I was looking to using the Twitter Bootstrap Modal windows as a partial view. However, I do not really think that it was designed to be used in this fashion; it seems like it was meant to be used in a fairly static fashion. Nevertheless, I think it'd be cool to be able to use it as a partial view.

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

So for example, let's say I have a list of Games. Upon clicking on a link for a given game, I'd like to request data from the server and then display information about that game in a modal window "over the top of" the present page.

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

I've done a little bit of research and found this post which is similar but not quite the same.

有没有人尝试过这个成功或失败?有人在 jsFiddle 上有一些东西或他们愿意分享的一些资源吗?

Has anyone tried this with success or failure? Anyone have something on jsFiddle or some source they'd be willing to share?

感谢您的帮助.

推荐答案

是的，我们已经做到了.

Yes we have done this.

在您的 Index.cshtml 中，您将拥有类似..的内容.

In your Index.cshtml you'll have something like..

<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 中(内联或在单独的文件中，您将拥有类似的内容..

Then in JS for the same page (inlined or in a separate file you'll have something like this..

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

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

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

在您的控制器上使用如下所示的方法..

With a method on your controller that looks like this..

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

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

You will of course need a view called GetGameListing.cshtml inside of your Views folder..

相关文章