14

運が悪かったのでJQuery UI、サイトでいくつかのウィジェットを使用しようとしました。Asp.Net MVC

たとえば、jQueryUIの基本的な日付ピッカー-機能デモ。

Site.Master単純なMVCプロジェクトを作成し、次のようにスクリプト参照を追加しました。

<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-personalized-1.5.3.min.js" type="text/javascript"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/ui.datepicker.css" rel="stylesheet" type="text/css" />"

このIndex.aspxファイルでは、すべてのデフォルトコンテンツをクリアし、以下を追加しました。

<script type="text/javascript">
    $("#basics").datepicker();     
</script>  
<input type="text" size="10" value="click here" id="basics"/>

コアjQueryは正常に機能します。手がかりはありますか？

4

4 に答える 4

18

DOMがロードされた後に、イニシャライザが呼び出されていることを確認してください。

$(document).ready(function() {
    $("#basics").datepicker();
});

jQuery対応イベント：

このメソッドを使用すると、DOMを読み取って操作する準備ができた瞬間に、バインドされた関数が呼び出されます。これは、すべてのJavaScriptコードの99.99％を実行する必要がある場合です。

于 2008-12-22T01:04:32.937 に答える
7

ここに MVC 3 に関する記事があります: http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the -jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx

于 2011-01-26T09:07:12.007 に答える
4

ページが読み込まれるときにJavaScriptをインラインで実行しているようです。この場合、入力はまだ解析されてドキュメント本文にレンダリングされていないため、#basicsセレクターは入力を見つけることができません。id="basics"

script解決策は、コード内の要素を要素の後の位置に移動するのと同じくらい簡単かもしれませんinput。

さらに良いことに、ドキュメントレディまたはドキュメントロードイベントをサブスクライブし、そのイベントのハンドラーでjQueryコードを実行します。

$(document).ready(function() {
    $("#basics").datepicker();
});

それには多くの利点があります。DOM全体を使用できる状態になっていることを確認できます。また、ソースコードの順序に依存しないため、将来的にJavaScriptを外部ファイルに移動して、クライアント側のさまざまなキャッシュメカニズムを利用できます。 。

于 2008-12-22T01:01:35.530 に答える
2

ページのどこでスクリプトを読み込んでいますか?また、datepicker の初期化を呼び出している場所はどこですか?

これは、jQuery 短縮形ドキュメント対応 & css セレクターを使用して、datePickers をより簡単に初期化するサンプルです。

サンプル入力ボックスのレーザー コードを次に示します (「datefield」CSS クラスに注意してください)。

<div class="form-group">
    @Html.LabelFor(m => m.DateOfBirth, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.DateOfBirth, new { @class = "form-control datefield" })
    </div>
</div>

css セレクターで日付ピッカーを初期化するために必要な JavaScript は次のとおりです。

$(function () {
    $(".datefield").datepicker();
});

詳細を説明したチュートリアルとサンプル ASP.NET MVC5 ソリューションを github にまとめました。

http://prestoasp.net/using-the-jquery-datepicker-with-asp-net-mvc/ https://github.com/fredo007/i6technology/tree/master/InsuranceSales

于 2014-04-25T04:37:28.973 に答える