对象不支持属性或方法'对话'

Question

对象不支持属性或方法'对话'

参考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>

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

我在IE和Firefox中检查过.Firefox抛出

Typeerror $(...).对话框不是一个函数

IE抛出

对象不支持属性或方法'对话'

有什么建议？

Answer 1

Dar*_*rov 15

我想到的有三点可能值得检查:

永远不要在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>

Run Code Online (Sandbox Code Playgroud)

确保在_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, the simplicity of client-side scripting with jQuery, and the looks of jQuery UI. Congrats, web slinger!</p>  
</div>    

@section scripts {
    <script type="text/javascript">
        $('#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>
}

Run Code Online (Sandbox Code Playgroud)

Answer 2

liv*_*ove 9

在我的情况下,这个错误是因为我忘了添加jquery-ui文件引用:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，7 月前
查看次数：	52320 次
最近记录：	7 年前