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 $（...）。对话框不是函数

IE抛出

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

有什么建议吗？

Answer 1

有三件事可能值得一试：

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

Answer 2

就我而言，这个错误是因为我忘了添加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>

Answer 3

当您忘记添加jquery-ui.js时，通常会发生这种情况。包含jquery-ui-{version}.js的顺序也很重要！

您应该包括jquery-{version}.js然后jquery-ui-{version}.js。然后在</body>标记之前，包含您的自定义JavaScript文件。

它将解决Javascript运行时错误：[对象不支持属性或方法'对话']，['$'未定义]

Answer 4

您的代码对我来说似乎没问题。您可以检查您的jQuery UI自定义是否包含对话框功能（或尝试下载full jQuery UI以进行测试）并检查JS脚本的URI是否正确。

Answer 5

包括以下三行代码：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>

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

Layout.cshtml

Index.cshtml

5 个答案: