3

ASP.NET MVC4 アプリケーションで jQuery UI を動作させることができません。ダイアログと日付ピッカーを試しました。これが私の見解のコードの一部です。

<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
    alert('A');
    //$('#datepicker').val('test');
    $('#datepicker').datepicker();
    alert('B');
});
</script>
<h1>Test</h1>
<form id="testForm" action="#" method="get">
    <input type="text" id="datepicker" name="datepicker" class="datepicker" />
</form>

アラート A が表示されます。次の行のコメントを外すと、値 test が割り当てられます。しかし、datepicker は機能せず、アラート B は表示されません。

ありがとう、ペトル

4

4 に答える 4

10

layout.cshtml ビューで移動します。

@Scripts.Render("~/bundles/jquery") 

体から頭へ、頭も追加

@Scripts.Render("~/bundles/jqueryui")
于 2012-11-01T15:13:55.360 に答える
4

私はそれを機能させる方法を理解するのに多くの時間を費やしました.

最後に、手順は次のとおりです。

  1. ASP .NET MVC4 プロジェクト インターネット アプリケーションを作成します。

  2. の最後の行をいくつか削除して、次の_Layout.cshtmlようにします。

    <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>
    
        @RenderSection("scripts", required: false)
    

  3. ここで行ったようにヘッダーを変更します

 <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/themes/base/css")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/modernizr")
        <script type="text/javascript">
            $(document).ready(function () {
                // We will test DataPicker
                $('#datep').datepicker();
                // We will test TABS
                $(function () {
                    $("#tabs").tabs();
                });
            });
        </script>
    </head>
  1. セクションの後のすべてのコードを削除し@section featured {、いくつかの html を追加しますHome/Index.cshtml

    A. http://jqueryui.com/tabs/ページのソース表示リンク からいくつかのコードを挿入します ( の中にあります) 。< div id="tabs" > ... < div >

    B.これを追加


< div > 日付: < input id="datep" type="text" / > </ div >

終わり!!!

ここに画像の説明を入力

于 2013-04-18T13:00:51.480 に答える
2

jQuery UI をすぐに使えるようにするには、_Layout.cshtml に数行追加する必要があります。まず、javascript バンドルです。

@*you should already have this line*@
@Scripts.Render("~/bundles/jquery")

@*add this line*@
@Scripts.Render("~/bundles/jqueryui")

次に、jQuery UI 用の CSS も必要です。

@*you should already have this line*@
@Styles.Render("~/Content/css")

@*add this line*@
@Styles.Render("~/Content/themes/base/css")
于 2013-03-09T02:56:04.337 に答える
2

あなたのコードはフィドルでうまく動作します: http://jsfiddle.net/m3QFL/

コンソールでエラーとスクリプトへのパスを確認してください。Chrome には、js のデバッグに役立つコンソールが含まれています。また、FireFox およびFireBugを実行することもできます。

どちらも、このような問題を解決するのに大いに役立ちます。

また、jquery および jquery ui のホストされたバージョンは、jquery および jquery ui または Google から入手できます。ここにあなたのものがあります:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

jquery uiのホームページの下部には、ホストされているバージョンへのリンクがあります。

ところで、//代わりにhttp://、スクリプトがhttpサイトからプレフィックスを取得できるようにします。SSL を使用している場合は、それが取得されるhttps://ため、ページに安全なアイテムと安全でないアイテムはありません。

于 2012-10-28T20:52:39.873 に答える