[英]load partial view in to a modal popup
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? 有关如何做到这一点的任何指示?
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.cshtml
partial 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.cshtml
view 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. 显然,在这个例子中,我将直接脚本放入了Index视图,但在实际应用程序中,这些脚本将进入单独的javascript文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.