使用 Bootstrap datePicker 进行 MVC4 验证答案

【问题标题】：MVC4 validation with Bootstrap datePicker使用 Bootstrap datePicker 进行 MVC4 验证
【发布时间】：2013-08-22 14:04:48
【问题描述】：

我有一个需要填写必填字段的日期选择器文本框。型号：

    [Required(AllowEmptyStrings = false, ErrorMessage = "Required")]
    [DisplayFormat(ConvertEmptyStringToNull = false)]
    [Display(Name = "Date of Something")]
    [DatePicker] //custom tag builder I wrote to make this a datepicker
    public string DateOfSomething { get; set; }

查看：

    @Html.ControlGroupFor(x => x.DateOfSomething) //has the custom tag I built to handle datepicker
    @Html.ValidationMessageFor(x => x.DateOfSomething)

jquery:

    $("#btnSubmit").click(function() {
        if ($('#DateOfSomething') == "" || $('#DateOfSomething') == null) {
            $("#ValidationSummary").append("<div>Required</div>");
            $("#ValidationSummary").show();
        }
    });

在_布局中

  <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js")"></script>

ControlGroupFor 扩展：

     public static MvcHtmlString ControlGroupFor<TModel, TValue>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression)
    {
        var propertyName = ExpressionHelper.GetExpressionText(expression);
        var controlGroupWrapper = BuildTagWith("div", "control-group");
        controlGroupWrapper.InnerHtml += htmlHelper.LabelFor(expression, new Dictionary<string, object> { { "class", "control-label" } }).ToHtmlString();
        var controlDiv2 = BuildTagWith("div", "controls");

        var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        var inputTag = "";

        var valAttributes = htmlHelper.GetUnobtrusiveValidationAttributes(propertyName, metadata);

        if (metadata.AdditionalValues.ContainsKey("DatePicker"))
        {
            CreateDatePicker(htmlHelper, expression, propertyName, controlDiv2, controlGroupWrapper);
            controlGroupWrapper.InnerHtml += htmlHelper.ValidationMessageFor(expression, null, valAttributes);
            return MvcHtmlString.Create(controlGroupWrapper.ToString(TagRenderMode.Normal));
        }
        if (metadata.AdditionalValues.ContainsKey("DropDownListPropertyName"))
        {
            var propertyNameForOptions = metadata.AdditionalValues["DropDownListPropertyName"] as string;
            var options = GetPropValue(htmlHelper.ViewData.Model, propertyNameForOptions) as Dictionary<string, string>;
            var selectedItem = GetPropValue(htmlHelper.ViewData.Model, propertyName) as string;
            inputTag += BuildSelectList(options, propertyName, selectedItem);
        }
        else
        {
            var value = GetPropValue(htmlHelper.ViewData.Model, propertyName);
            inputTag += htmlHelper.EditorFor(expression).ToHtmlString();
        }
        controlDiv2.InnerHtml += inputTag + htmlHelper.ValidationMessageFor(expression, null, valAttributes);

        controlGroupWrapper.InnerHtml += controlDiv2.ToString(TagRenderMode.Normal);

        return MvcHtmlString.Create(controlGroupWrapper.ToString(TagRenderMode.Normal));
    }

尽管我的代码试图阻止它，但我还是发布到表单。有什么想法吗？

【问题讨论】：

你的DateOfSomething属性是string而不是DateTime有什么特别的原因吗？
不是真的，考虑到 MVC 将视图上的所有内容都转换为字符串，我只是稍后将转换回日期时间
虽然强类型化你的模型提供了许多优点，即在这种情况下它会给你更严格的验证。当然，视图中的值是“字符串”，但是当它们被回发时，MVC 模型绑定会自动验证并将它们转换为它们的目标类型，这是一个巨大的优势。
ControlGroupFor 助手有什么作用？您使用它而不是 EditorFor 的任何特殊原因？
发布了我的自定义 ControlGroupForCode 的代码

标签： jquery validation asp.net-mvc-4

【解决方案1】：

尝试删除您的 click 处理程序。该 javascript 应该是不必要的，因为它应该由 jQuery 验证和 Required 属性处理。如果一个或多个字段无效，jQuery 验证也会处理取消提交。

【讨论】：

这确实更有意义，但表单仍然提交
我还没有捆绑任何东西，但我试图使用内置的 MVC 验证但没有运气。在我的编辑中，我拥有获得验证所需的所有文件
完成和同样的问题现在我只有：[DatePicker] [Display(Name = "Date of Something")] [Required(ErrorMessage = "Required")] public string DateOfSomething { get;放; }
仍然没有运气，使用日期选择器似乎有问题
您能显示您的DatePicker 属性的定义吗？它在做什么和/或如何使用它？

【解决方案2】：

您可以只使用 EditerFor 和 JQUery Datapicker。

【讨论】：

确实如此，但我的所有控件都以相同的方式进行（下拉列表、文本框、文本区域等...），并且我希望在整个应用程序中保持一致性