Kendo MVC DatePickerFor在第一个记录后不在列表中呈现

Question

VS 2012 Pro MVC4互联网应用

• Microsoft.AspNet.MVC 5.1.1加载NuGet包
• jQuery 2.1.0（UI结合1.10.4，验证和不显眼的项目）
• Boostrap 3.1
• Modernizer 2.7.2
• WebGrease 1.6.0
• Microsoft ASP.NET身份Owin 2.0.0（以及所有依赖项）
• Kendo Commercial许可证版本2014.1.318.545

在部分视图中，使用模型：

@model IEnumerable<HTServices.Models.TableName>

@foreach (var item in Model)
{
    @Html.HiddenFor(m => item.TableNameId)
    <div class="row" style="margin-top: 8px;">
        <div class="col-sm-4 col-md-4 col-lg-4">
            @Html.DisplayFor(m => item.TableNameShow)
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4">
            @Html.TextBoxFor(m => item.Note, new { @class = "text-box single-line wide-full" })
        </div>
        <div class="col-sm-2 col-md-2 col-lg-2">
            @(Html.Kendo().DatePickerFor(m => item.ExpirationDt)
                 .Start(CalendarView.Month)
                 .Min(DateTime.Now.AddMonths(-2))
                 .Max(DateTime.Now.AddMonths(12)))
         </div>
         <div class="col-sm-1 col-md-1 col-lg-1">
            @Html.ActionLink("Delete", "TableNameDelete", new { id = item.TableNameId }, new { onclick = "return deleteTableNameRecById(this);", @class = "RemoveLinkImage" })
         </div>
    </div> 
}

此处，仅渲染第一个DatePickerFor控件。

在HTML中，DatePicker的脚本块被添加到HTML中，但缺少Kendo dpf的整个span包装器：

这是第一个好的，有效的：

<div class="col-sm-2 col-md-2 col-lg-2">
    <span class="k-widget k-datepicker k-header k-input" style="width: 100%;">
        <span class="k-picker-wrap k-state-default">
            <input name="item.ExpirationDt" class="k-input" id="item_ExpirationDt" role="combobox" aria-disabled="false" aria-expanded="false" aria-readonly="false" aria-owns="item_ExpirationDt_dateview" style="width: 100%;" type="text" value="4/1/2014" data-val-required="The Expiration Date field is required." data-val="true" data-val-date="The field Expiration Date must be a date." data-role="datepicker">
                <span class="k-select" role="button" aria-controls="item_ExpirationDt_dateview" unselectable="on">
                       <span class="k-icon k-i-calendar" unselectable="on">select</span>
                </span>
        </span>
    </span>
    <script>
        jQuery(function(){jQuery("#item_ExpirationDt").kendoDatePicker({"format":"M/d/yyyy", "min":new Date(2014,1,1,8,56,43,286), "max":new Date(2015,3,1,8,56,43,286), "start":"month"});});
     </script>
</div>

以上仅适用于呈现的第一个项目。

第一个之后的所有其他人都只是：

<div class="col-sm-2 col-md-2 col-lg-2">
       <input name="item.ExpirationDt" id="item_ExpirationDt" type="date" value="4/1/2014">
            <script>
               jQuery(function(){jQuery("#item_ExpirationDt").kendoDatePicker({"format":"M/d/yyyy","min":new Date(2014,1,1,8,56,43,286),"max":new Date(2015,3,1,8,56,43,286),"start":"month"});});
             </script>
</div>

有关视觉效果，请参阅此图片：

如何获取列表中呈现的所有DatePickerFor项？

答案还必须正确地将项目绑定到模型。使用网格是唯一的方法吗？

[R

Answer 1

您的输入元素上的问题是冲突的！

您必须确保输入的唯一ID，在kendo ui mvc for datepicker的包装中通过name属性定义：

@model IEnumerable<HTServices.Models.TableName>

@foreach (var item in Model)
{
    @Html.HiddenFor(m => item.TableNameId)
    <div class="row" style="margin-top: 8px;">
        <div class="col-sm-4 col-md-4 col-lg-4">
            @Html.DisplayFor(m => item.TableNameShow)
        </div>
        <div class="col-sm-4 col-md-4 col-lg-4">
            @Html.TextBoxFor(m => item.Note, new { @class = "text-box single-line wide-full" })
        </div>
        <div class="col-sm-2 col-md-2 col-lg-2">
            @(Html.Kendo().DatePickerFor(m => item.ExpirationDt)
                 .Name("[SOME UNIQUE ID]")
                 .Start(CalendarView.Month)
                 .Min(DateTime.Now.AddMonths(-2))
                 .Max(DateTime.Now.AddMonths(12)))
         </div>
         <div class="col-sm-1 col-md-1 col-lg-1">
            @Html.ActionLink("Delete", "TableNameDelete", new { id = item.TableNameId }, new { onclick = "return deleteTableNameRecById(this);", @class = "RemoveLinkImage" })
         </div>
    </div> 
}