8

参考AjaxControlToolkit,我从 MVC 创建了一个 UI 对话框。

布局.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>

索引.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。火狐抛出

Typeerror $(...).dialog 不是函数

IE 抛出

对象不支持属性或方法“对话框”

有什么建议么?

4

5 回答 5

16

想到 3 件事可能值得检查:

  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>
    
  2. 确保在你的最后_Layout.cshtml你没有@Scripts.Render("~/bundles/jquery")打电话,因为这将包括 jQuery 两次。

  3. 如果在您的末尾_Layout.cshtml有一个用于自定义脚本的专用部分,@RenderSection("scripts", required: false)例如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>
    }
    
于 2013-03-28T11:01:12.153 回答
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>
于 2014-11-05T16:49:45.153 回答
3

这通常发生在您忘记添加jquery-ui.js. 包含的顺序jquery-ui-{version}.js也很重要!

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

它将解决 Javascript 运行时错误:[ Object doesn't support property or method 'dialog' ],[ '$' is undefined ]

于 2015-09-08T20:36:56.503 回答
1

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

于 2013-03-28T10:57:11.210 回答
1

包括这三行代码:

<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>
于 2016-05-04T10:43:10.147 回答