8

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>

インデックス.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 は関数ではありません

IEスロー

オブジェクトはプロパティまたはメソッド 'dialog' をサポートしていません

助言がありますか？

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. これにはjQueryが2回含まれるため、最後に呼び出し_Layout.cshtmlがないことを確認してください。@Scripts.Render("~/bundles/jquery")

  3. の最後に の_Layout.cshtmlようなカスタム スクリプト専用のセクションがある場合は、@RenderSection("scripts", required: false)そのセクションにカスタム スクリプトを配置したことを確認してください (この RenderSection は DOM の最後にあるため、スクリプトが実行されるまでに、DOM はすでにロードされているため、document.ready イベントでスクリプトを実行します):

    <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}.jsますjquery-ui-{version}.js。次に、タグの直前に</body>、カスタム JavaScript ファイルを含めます。

Javascript ランタイム エラーを解決します: [オブジェクトはプロパティまたはメソッド 'ダイアログ' をサポートしていません]、[ '$' は未定義です]

于 2015-09-08T20:36:56.503 に答える
1

あなたのコードは私には問題ないようです。jQuery UI カスタムにダイアログ機能が含まれていることを確認し (または、テスト目的で完全な jQuery UIをダウンロードしてみてください)、JS スクリプトへの URI が正しいことを確認できます。

于 2013-03-28T10:57:11.210 に答える