加载局部视图中的模式弹出(load partial view in to a modal popup

2019-06-24 17:44发布

我与MVC3工作C#4.0。

我已创建的局部视图。

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

任何指针,以我怎么能做到这一点?

Answer 1:

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

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

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

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

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

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

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

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



文章来源: load partial view in to a modal popup