将部分视图加载到模式弹出窗口中

Posted 2023-04-13

【中文标题】将部分视图加载到模式弹出窗口中

【英文标题】：load partial view in to a modal popup

【发布时间】：2012-05-30 06:54:27

【问题描述】：

我正在使用 MVC3 c# 4.0。

我已经创建了一个局部视图。

我的页面上有一个按钮，当我单击此按钮时，我希望能够。我认为最好的方法是通过 javascript - 我已经在应用程序中使用 jQuery。

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

【参考方案1】：

您可以使用jQuery UI dialog。

所以你先写一个控制器：

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 文件中。

【讨论】：

非常感谢这个例子，它有很大帮助。还有一个问题，我已将 MVC3 集成到我的 Web 表单应用程序中。所以触发模态的控件就在web表单上。我认为我不能在 Web 表单中使用 @Html.ActionLink，是否有替代方法？

当然还有其他选择。 Html.ActionLink 助手生成的只是一个<a> 标签。因此，您可以在 Web 表单应用程序中生成此标记。

你好，达林，我试过像***.com/questions/15876993/…这样使用它，但我仍然只是得到一个新页面。有什么想法吗？

我讨厌 css & 现在这个答案也..浪费了我很多时间。如果其他人遇到问题，请使用codeproject.com/Tips/826002/… 更好地理解事情