使用 Bootstrap 模态窗口作为 PartialView [英] Using Bootstrap Modal window as PartialView

问题描述

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

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

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

有没有人试过成功或失败?任何人都有关于 jsFiddle 的东西或他们愿意分享的一些来源?

感谢您的帮助.

解决方案

是的，我们已经做到了.

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

<div id='gameContainer'>

<button id='showGame'>显示游戏列表</button>

然后在同一页面的 JS 中(内联或在单独的文件中，您将拥有类似这样的内容..

$(document).ready(function() {$('#showGame').click(function() {var url = $('#gameModal').data('url');$.get(url, function(data) {$('#gameContainer').html(data);$('#gameModal').modal('show');});});});

在你的控制器上有一个看起来像这样的方法..

[HttpGet]公共 ActionResult GetGameListing(){var model =//做任何你需要的事情来获得你的模型返回 PartialView(模型)；}

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

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.

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

Thanks for your help.

解决方案

Yes we have done this.

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>

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

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

这篇关于使用 Bootstrap 模态窗口作为 PartialView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！