加载局部视图在一个模式弹出 [英] load partial view in to a modal popup

问题描述

我用MVC3 C＃4.0的工作。

I am working with MVC3 c# 4.0.

我创建了一个局部视图。

I have created a partial view.

我有我的网页上的按钮，当我点击这个按钮我希望能够加载的局部视图在一个模式弹出。我presume做，这是通过JavaScript的最好方法 - 我的应用程序已经使用jQuery

I have a button on my page, when I click this button I want to be able to load the partial view in to a modal popup. I presume the best way to do this is via javascript - I am using jQuery already in the application.

任何指针，我怎么能做到这一点？

Any pointers as to how I could do this?

推荐答案

您可以使用 jQuery UI的对话框。

所以，你写一个控制器启动：

So you start by writing a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Modal()
    {
        return PartialView();
    }
}

那么 Modal.cshtml 部分将包含要在模态显示部分标记：

then a Modal.cshtml partial that will contain the partial markup that you want to display in the modal:

<div>This is the partial view</div>

和包含按钮点击后，将显示部分成一个模式的 Index.cshtml 查看：

and an Index.cshtml view containing the button which will show the partial into a modal when clicked:

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('.modal').click(function () {
            $('<div/>').appendTo('body').dialog({
                close: function (event, ui) {
                    dialog.remove();
                },
                modal: true
            }).load(this.href, {});

            return false;            
        });
    });
</script>

@Html.ActionLink("show modal", "modal", null, new { @class = "modal" })

显然，在这个例子中我已经把脚本直接到索引视图，但是在实际应用中的脚本将进入独立的JavaScript文件。

Obviously in this example I have put the directly scripts into the Index view but in a real application those scripts will go into separate javascript file.

这篇关于加载局部视图在一个模式弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！