bugfix> javascript > 投稿

タイムスロットを動的に作成するエディターテンプレートを作成しました。今、datetimepickerで時刻を選択できません。以下のコード。次のコードは、メインビューの一部の場合に機能します。エディターテンプレートでdatetimepickerを使用することは可能ですか?

@model Testing.Models.TimeSlot
<div class="form-group row">
    @Html.LabelFor(model => model.StartTime, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-2">
        @Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { @Value = DateTime.Now.ToString("hh:mm tt"), @class = "form-control", @style = "width: 100px"} })
        @Html.ValidationMessageFor(model => model.StartTime, "", new { @class = "text-danger" })
    </div>
    @Html.LabelFor(model => model.EndTime, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-2">
        @Html.EditorFor(model => model.EndTime, new { htmlAttributes = new { @Value = DateTime.Now.AddMinutes(15).ToString("hh:mm tt"), @class = "form-control", @style = "width: 100px" } })
        @Html.ValidationMessageFor(model => model.EndTime, "", new { @class = "text-danger" })
    </div>
</div>

@section Scripts
{
<script type="text/javascript">
    $(function () {
        $('#StartTime').datetimepicker({
            format: 'LT',
            showClose: true,
            showClear: true,
            toolbarPlacement: 'top',
            stepping: 15,
        });
    });
    $(function () {
        $('#EndTime').datetimepicker({
            format: 'LT',
            showClose: true,
            showClear: true,
            toolbarPlacement: 'top',
            stepping: 15
        });
    });
    $('#StartTime').removeAttr("data-val-date");
    $('#EndTime').removeAttr("data-val-date");
</script>

回答 1 件
  • セクションはパーシャルではサポートされておらず、スクリプトはクライアントに返されるhtmlに含まれることはありません。いずれにせよ、スクリプトは決してパーシャルにしないでください(これは EditorTemplate  is)-インラインスクリプトを生成しているため、デバッグが難しくなり、スクリプトの複数のインスタンスが含まれる危険があります。

    @section Scripts{ ... } を削除します   EditorTemplate のコード  メインビューまたはそのレイアウトに移動します。これをもう少し柔軟にするために、入力にクラス名を付け、個々の id を参照するのではなく、jQueryセレクターとして使用することをお勧めします  (したがって、必要なスクリプトは1つだけです)。

    また、 value を設定しないでください   HtmlHelper を使用する場合の属性  メソッド。メソッドは value を正しく生成します   ModelState から 、 ViewData  最後に、この順序でモデルプロパティを設定し、 value を設定します  属性、モデルバインディングを台無しにしています。代わりに、モデルをビューに渡す前に、GETメソッドで値を設定します。

    日付ピッカーを生成するコードはちょうど

    @Html.EditorFor(m => m.StartTime, new { htmlAttributes = new { @class = "form-control datetimepicker" } })
    
    

    またはもっと簡単に

    @Html.TextBoxFor(m => m.StartTime, new { @class = "form-control datetimepicker" })   
    
    

    そして幅をスタイルできます

    .datetimepicker {
        width: 100px;
    }
    
    

    そして、ビューまたはレイアウトのスクリプトは

    $('.datetimepicker').datetimepicker({
        format: 'LT',
        showClose: true,
        showClear: true,
        toolbarPlacement: 'top',
        stepping: 15,
    });
    
    

    .removeAttr("data-val-date") を使用してクライアント側の検証を削除しようとする理由も明確ではありません 、そうすることは設計に問題があることを示唆しています。また、時間のみを選択したいようです。その場合、プロパティはw​​yzwyzでなければなりません 。

    TimeSpan

あなたの答え