使用此示例可能有用:
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~Content/themes/base/jquery.ui.all.css") rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
</head>
现在让我们深入了解模态弹出窗口工作所需的 jQuery 代码。
jQuery代码:
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this)
.attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove(); },
modal: true,
height: 250,
width: 400,
left: 0
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
在下面定义的 ActionLink 中,我们使用了以下 3 个属性,
class
- 表示点击这个链接,执行上面写的jQuery
data_dialog_id
data_dialog_title
– 用于显示 jQuery modal popup 的标题
剃刀代码
@Html.ActionLink("Open Jquery Modal Popup", "About", "Home",null,new {
@class = "openDialog",
data_dialog_id = "aboutDialog",
data_dialog_title = "About Us"
})
下面是“Home”控制器的“About”动作,当用户点击上面的 ActionLink 时会调用它。
控制器
public ActionResult About()
{
return View();
}
下面是上述 (About) 操作将显示的 About.cshtml 视图。请注意,我已将布局设置为空,这样我就不会出现重复的主模板。
About.cshtml
看法
@{
ViewBag.Title = "About Us";
Layout = null;
}
<h2>About</h2>
<p>
Hello, this is a modal jquery popup !
</p>
<p><a href="javascript:void(0);" class="close">Close this Window</a></p>