2

EditorTemplates フォルダーと次の DateTime.cshtml を使用して、すべての Datetime フィールドに日付ピッカー (jQuery UI) を追加しています。

@model Nullable<System.DateTime>
@if ( Model.HasValue ) {
@Html.TextBox( "" , String.Format( "{0:yyyy-MM-dd HH:mm}" , Model.Value ) , new  {     @class = "textbox" , @style = "width:400px;" } )
}
else {
@Html.TextBox( "" , String.Format( "{0:yyyy-MM-dd HH:mm}" , DateTime.Now ) , new {     @class = "textbox" , @style = "width:400px;" } )
}

@{
string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace( ".", "_" );
}
<script type="text/javascript">
$(document).ready(function () {
    alert("adding date picker");
    $("#@id").datepicker
        ({
            dateFormat: 'dd/mm/yy',
            showStatus: true,
            showWeeks: true,
            highlightWeek: true,
            numberOfMonths: 1,
            showAnim: "scale",
            showOptions: {
                origin: ["top", "left"]
            }
        });
});
</script>

ただし、ページの下部に jQuery スクリプトなどを追加すると、提案されているように、現在のベスト プラクティスです。上記のコードは、jQuery スクリプトの上にインラインで表示されるため、実行されません。

メインの CSHTML Razor ビュー:

 @RenderBody()   
        <hr>
        <footer>
            <p>&copy; Company @System.DateTime.Now.ToString("yyyy")</p>
        </footer> 
    </div>
     @Scripts.Render("~/js")
     @Scripts.Render("~/jqueryui")
     @RenderSection("Scripts", required: false)
</body>

ベスト プラクティスをバイパスして jQuery スクリプトをページの上部に追加する必要がありますか? または、ベスト プラクティスに従いながら、これを機能させる簡単な方法はありますか?

ありがとうございました、

マーク

4

2 に答える 2

2

次のセクションに配置する必要があります。

@section Scripts { 

    <script type="text/javascript">
$(document).ready(function () {
    alert("adding date picker");
    $("#@id").datepicker
        ({
            dateFormat: 'dd/mm/yy',
            showStatus: true,
            showWeeks: true,
            highlightWeek: true,
            numberOfMonths: 1,
            showAnim: "scale",
            showOptions: {
                origin: ["top", "left"]
            }
        });
});
</script>
}

このようにして、スクリプトは jQuery 宣言の下に追加されます

于 2013-04-25T13:23:08.713 に答える
1

ビューまたはパーシャルにスクリプトを含めないでください。スクリプトは、それぞれが属する場所 (個別の JavaScript ファイル) に配置する必要があります。

したがって、たとえば、datepickers を有効にする JavaScript ファイルを作成できます~/scripts/myscript.js。

$('.datepicker').datepicker({
    dateFormat: 'dd/mm/yy',
    showStatus: true,
    showWeeks: true,
    highlightWeek: true,
    numberOfMonths: 1,
    showAnim: "scale",
    showOptions: {
        origin: ["top", "left"]
    }
});

ご覧のとおり、ここではクラス セレクターを使用しまし$('.datepicker')た。datepicker プラグインを、class="datepicker".

あとは、(パーシャルやテンプレートではなく) ビューで Scripts カスタム セクションをオーバーライドするだけです。

@section Scripts {
    <script type="text/javascript" src="~/scripts/myscript.js"></script>
}

これで、テンプレートには、テンプレートに含める必要があるもの (マークアップ) のみが含まれます。

@model DateTime?
@Html.TextBox(
    "", 
    string.Format("{0:yyyy-MM-dd HH:mm}", Model ?? DateTime.Now), 
    new { 
        @class = "textbox datepicker", 
        @style = "width:400px;" 
    } 
)

また、コードが簡素化されていることに気付くかもしれません。

そして今、すべてのスクリプトを個別のファイルに入れるベスト プラクティスに従っているので、それらのバンドルを作成することもできます。

@section Scripts {
    @Scripts.Render("~/datepickers")
}

または、レイアウト内のいくつかのバンドルに単純に含めて、縮小してそれらと一緒にキャッシュし、すべてのページで利用できるようにします。

于 2013-04-25T13:25:15.813 に答える