参考
AjaxControlToolkit,我从MVC创建了一个UI对话框.
Layout.cshtml
<head> <Meta charset="utf-8" /> <title>@ViewBag.Title - My ASP.NET MVC Application</title> <link href="../../Content/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" /> <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script> <script src="../../Scripts/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <Meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head>
Index.cshtml
<h2>jQuery UI Hello World</h2>
<button id="show-dialog">Click to see jQuery UI in Action</button>
<div id="dialog" title="jQuery UI in ASP.NET MVC" >
<p>You now have the power of ASP.NET,the simplicity of client-side scripting with jQuery,and the looks of jQuery UI. Congrats,web slinger!</p>
</div>
<script language="javascript" type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,width: 600,buttons: {
"Ok": function () { $(this).dialog("close"); },"Cancel": function () { $(this).dialog("close"); }
}
});
$("#show-dialog").button().click(function () {
$('#dialog').dialog('open');
return false;
});
});
</script>
我在IE和Firefox中检查过. Firefox抛出
Typeerror $(…).dialog is not a function
IE抛出
Object doesn’t support property or method ‘dialog’
有什么建议？
解决方法
我想到的有三点可能值得检查：
>永远不要在ASP.NET MVC应用程序中硬编码URL.始终使用帮助程序(或推荐的程序包)：
<head>
<Meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/Content/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<Meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
>确保在_Layout.cshtml的末尾没有@Scripts.Render(“〜/ bundles / jquery”)调用,因为这将包括jQuery两次.
>如果在_Layout.cshtml的末尾有一个专用的部分用于自定义脚本,如@RenderSection(“scripts”,required：false),请确保已将自定义脚本放在该部分中(请注意,因为此RenderSection是在DOM的末尾,您不需要将您的脚本包装在document.ready事件中,因为在执行时,DOM已经被加载了)：
<h2>jQuery UI Hello World</h2>
<button id="show-dialog">Click to see jQuery UI in Action</button>
<div id="dialog" title="jQuery UI in ASP.NET MVC" >
<p>You now have the power of ASP.NET,web slinger!</p>
</div>
@section scripts {
<script type="text/javascript">
$('#dialog').dialog({
autoOpen: false,buttons: {
"Ok": function () { $(this).dialog("close"); },"Cancel": function () { $(this).dialog("close"); }
}
});
$("#show-dialog").button().click(function () {
$('#dialog').dialog('open');
return false;
});
});
</script>
}
