使用部分视图的客户端验证

Question

我刚刚完成了表单的可视化逻辑，现在我想使用 asp.net mvc 3 提供的客户端验证。但是，即使我遵循一些示例，我也无法使其正常工作，也不知道可能是什么原因。

这是我的主要观点：

@model List<DataAccess.MCS_DocumentFields>

@{
    ViewBag.Title = "Documents";
}

<div id="drawForm">
@using (Html.BeginForm("RecieveDataFromDocument", "Forms", FormMethod.Post))
{
    @Html.ValidationSummary(true)
    <table border="1">
        <colgroup>
            <col span="1" style="width: 10%;" />
            <col span="1" style="width: 40%;" />
            <col span="1" style="width: 25%;" />
            <col span="1" style="width: 25%;" />
        </colgroup>
        @Html.Partial("_PartialHeader", Model)
        @Html.Partial("_PartialDrawing", Model)
        @Html.Partial("_PartialBody", Model)
        @Html.Partial("_PartialFooter", Model)
    </table>
    if (ViewBag.Status == 1)
    {
        <button type="submit">Save</button>   
    }
    else
    { 
        @Html.ActionLink("Back", "Index")
    }
}
</div>

实际上这里并没有太多。大部分逻辑都在我的部分中。我使用数据注释，所以我认为默认情况下我会进行一些客户端验证，但似乎并非如此。我所做的是确保我有

<appSettings>

  <add key="UnobtrusiveJavaScriptEnabled" value="true" />

</appSettings>

添加到我的 web.config。同样在我看来你可以看到我已经添加了

@Html.ValidationSummary(true)

不确定这是否适合它，但它就在那里。同样在我正在查看的示例中：

<div class="editor-label">

    @Html.LabelFor(model => model.Name)

</div>

<div class="editor-field">

    @Html.TextBoxFor(model => model.Name)

    @Html.ValidationMessageFor(model => model.Name)

</div>

我没有这样的<div> 标签和这样的类名，但是当我在视图源中启动我的应用程序时，我可以看到每个输入：

Name comes from DB
                <input data-val="true" data-val-required="The FieldValue field is required." name="[4].FieldValue" type="hidden" value="Name comes from DB" />

我认为这足以进行客户端验证。但是因为我没有得到任何我在我的部分视图中添加的内容，只是为了测试以下内容：

<div class="editor-label">
                    @Html.DisplayFor(x => Model[i].QuestionText)
                    </div>
                    <div class="editor-field">
                    @Html.TextBox("datepicker", "", new { @class = "datepicker" })
                    @Html.ValidationMessageFor(x => Model[i].QuestionText)
                    </div>
                    @Html.HiddenFor(x => Model[i].Id)
                    //...some code...
                    <div class="editor-field">
                    @Html.EditorFor(x => Model[i].FieldValue)
                    @Html.ValidationMessageFor(x => Model[i].FieldValue)
                    </div>
                    @Html.HiddenFor(x => Model[i].Id)
                    //...more code..

但是当验证失败时，即使这两个字段也不会产生错误。所以我想我要么错过了什么，要么做错了什么。我怀疑这种验证是否能以这种方式工作 - 使用部分？

Answer 1

为了在 mvc 中获得客户端验证（我在 mvc4 上工作，但我认为你的情况是一样的），有一些步骤需要检查：

1. 在 Web.config 中

   <add key="ClientValidationEnabled" value="true" />
   <add key="UnobtrusiveJavaScriptEnabled" value="true" />
   

2. 布局（或母版页）中的脚本

   <script src="/Scripts/jquery.validate.js"></script>
   <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
   <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
   

3. 为模型验证属性提供错误消息以显示（例如）

   public class ContactForm
   {
   [Display(Name = "Mail :"),
   Required(AllowEmptyStrings = false, ErrorMessage = "Mail required"),
   RegularExpression("^(|[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+[.][a-zA-Z]{2,3})$", ErrorMessage = "Mail not valid"),
   Remote("IsValidMail", "Validate", HttpMethod="GET")] /* remote validation */
   public string Mail { get; set; }
   
   [Display(Name = "Message :"),
   Required(AllowEmptyStrings = false, ErrorMessage = "Message required"),
   StringLength(maximumLength: 400, ErrorMessage="Message too long")]
   public string Message { get; set; }
   
   public ContactForm() { }
   

   }

4. 在视图中，显示错误信息

   @Html.ValidationMessageFor(x=>x.Mail) 
   

   或

   @Html.ValidationSummary(false, null, new { @id = "ValidationSummary" })    
   

   和你一样。

5. 实际上，它是这样工作的，但是对于局部视图中的 ajax 表单，您需要在页面加载时重新绑定验证（在 ajax 调用的成功事件中或局部的 $(function(){}查看）

   ///because the page is loaded with ajax, the validation rules are lost, we have to rebind them:
       $('#form').removeData('validator');
       $('#form').removeData('unobtrusiveValidation');
       $("#form").each(function () { $.data($(this)[0], 'validator', false); }); //enable to display the error messages
       $.validator.unobtrusive.parse("#form");
   

注意部分视图不要加倍脚本并启用验证。 最好的问候

Answer 2

尝试添加这些文件，也许对您有帮助：

<script src="/@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">     </script>
<script src="/@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"      type="text/javascript"></script>

<script src="/@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="/@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
<script src="/@Url.Content("~/Scripts/MicrosoftMvcValidation.js")" type="text/javascript"></script>

Answer 3

只是出于兴趣，你尝试过替换

@Html.Partial("_PartialHeader", Model)
@Html.Partial("_PartialDrawing", Model)
@Html.Partial("_PartialBody", Model)
@Html.Partial("_PartialFooter", Model)

与

@Html.EditorFor(m => Model, "_PartialHeader")
@Html.EditorFor(m => Model, "_PartialDrawing")
@Html.EditorFor(m => Model, "_PartialBody")
@Html.EditorFor(m => Model, "_PartialFooter")