MVC5 - 数据注释 - 客户端验证没有发生?

MVC5 - Data Annotations - Client Side Validation Not Happening?

我有一个 MVC 5 应用程序,我正在使用数据注释进行大部分验证。我的 class 中的属性之一如下所示:

[Required(ErrorMessage = "Please enter a business name")]
[StringLength(80)]
public string BusinessName { get; set; }

验证工作正常,但它似乎并没有像我想象的那样在浏览器中进行。在我的页面上,我有一个保存按钮。如果我将“业务名称”字段留空并单击“保存”,则会对控制器方法完成 post,部分如下所示:

    [HttpPost]
    public ActionResult Create(Advertiser advertiser, FormCollection collection, HttpPostedFileBase file)
    {
        // Before we do anything, let's check to make sure any validation that's already been done is clean.
        if (!ModelState.IsValid)
        {
            return View(advertiser);
        }
   ...
   ...
}

执行该方法时,模型状态已经设置为无效。这很好,因为它无效,因为“公司名称”字段为空。但是,这种验证不应该在客户端进行吗?

我的 .cshtml 文件中的字段如下所示(使用 Bootstrap):

<div class="form-group">
    @Html.Label("Business Name", new { @class = "control-label col-md-3" })
    <div class="col-md-9">
        @Html.TextBoxFor(model => model.BusinessName, new { @class = "form-control", title = "", autofocus = true })
        @Html.ValidationMessageFor(model => model.BusinessName)
    </div>
</div>

我的Web.Config正确设置如下:

<appSettings>
    <add key="webpages:Version" value="3.0.0.0" />
    <add key="webpages:Enabled" value="false" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

我发现了我的问题。在我的 BundleConfig.cs 中,我有以下内容:

    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.min.js",
                "~/Scripts/jquery-ui-1.10.4.min.js",
                "~/Scripts/jquery.base64.js"
                ));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate.min.js",
                "~/Scripts/jquery.validate.unobtrusive.min.js"
                ));

但是,我没有意识到默认情况下 jqueryval 包不会加载到 _Layout.cshtml 文件中。所以我需要添加它,如下:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

一旦我这样做了,它就可以正常工作了。当然,这会导致所有页面都加载它。这可能是不可取的。如果没有,请根据需要在每个页面中单独加载。