C# 将部分视图加载到模态弹出窗口中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10724796/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-09 15:00:12  来源:igfitidea点击:

load partial view in to a modal popup

c#jqueryasp.net-mvc-3partial-views

提问by amateur

I am working with MVC3 c# 4.0.

我正在使用 MVC3 c# 4.0。

I have created a partial view.

我创建了一个局部视图。

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.

我的页面上有一个按钮,当我单击此按钮时,我希望能够将局部视图加载到模态弹出窗口中。我认为最好的方法是通过 javascript - 我已经在应用程序中使用了 jQuery。

Any pointers as to how I could do this?

关于我如何做到这一点的任何指示?

采纳答案by Darin Dimitrov

You could use jQuery UI dialog.

您可以使用jQuery UI 对话框

So you start by writing a controller:

所以你从编写一个控制器开始:

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

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

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

然后是一个Modal.cshtml包含要在模态中显示的部分标记的部分:

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

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

以及Index.cshtml包含按钮的视图,该按钮将在单击时将部分显示为模态:

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

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.

很明显,在这个例子中,我将直接脚本放入了索引视图,但在实际应用程序中,这些脚本将放入单独的 javascript 文件中。