MVC视图。字符串列表。有条件地在列表项上使用DateTime EditorTemplate

时间:2017-05-05 04:01:51

标签: asp.net-mvc razor

视图是'申请表'

该模型是一个“应用程序”对象。

Application对象包含一个Person对象和一个Question对象数组。

每个问题都有:

  • 包含问题
  • 的文本字段
  • 包含问题类型的数字字段(1 =数字,2 =字符串,3 =日期等)
  • 响应的文本字段。响应字段预先加载了一个示例(在Dates的情况下,它是DateTime.Now.ToShortDateString())

View包含一个包含Person详细信息的表单和一个包含问题列表的表。申请人填写响应字段并提交。这很有效。

我现在想用DatetimePicker呈现日期类型问题。

在questionType字段上使用Razor'if'语句,我可以从列表显示中的其他问题中分离出日期时间问题。

对于Datetype问题,我想调用DateTime Picker EditorTemplate。

 <td>
                    <div class="col-md-10">
                        @{
                            if (Model.Responses[i].QuestionTypeId == 3)
                            {
                                @Html.EditorFor(p => p.Responses[i].Response,"DateTime")
                                @Html.ValidationMessageFor(p => p.Responses[i].Response)

                            }
                            else
                            {
                                @Html.TextBoxFor(p => p.Responses[i].Response)
                                @Html.ValidationMessageFor(p => p.Responses[i].Response)
                            }
                        }

                        @*@Html.TextBoxFor(p => p.Responses[i].Response)
                        @Html.ValidationMessageFor(p => p.Responses[i].Response)*@
                    </div>
                </td>

要使DateTime.cshtml EditorTemplate运行,我必须使模型类型为字符串。

虽然它被调用,但它不会执行datepicker javascript。

我认为这是因为底层的Model字段类型是一个字符串。

我尝试在模板中的字符串中创建日期并将日期传递给Template TextBox调用,但这没有效果。

有没有办法解决这个问题?

EditorTemplate代码目前是:

 @model System.String
 @{ DateTime myDate = DateTime.Parse(Model);}  
 @Html.TextBox("", myDate,new { @class = "datePicker" , 
    })
 @section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/cssjqryUi")
<script type="text/javascript">
$(function () {
    $(".datePicker").datepicker({
        showOn: "button",
        buttonImage: "/images/calendar-icon.png",
        buttonImageOnly: true,
        buttonText: "Select date"
    });
});
</script>
 }

0 个答案:

没有答案