Question

学习MVC 3，我正在尝试使用AJAX在MVC中使用客户端验证：

我在文章手动调用MVC 3客户端验证ajax帖子中包含了这些建议，但这对我不起作用，它仍然认为该表单有效。我错过了什么？

我在申请中加入了以下内容：

Root web.config文件：

<appSettings>
    <add key="webpages:Version" value="1.0.0.0" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

布局页面脚本：

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

我的模特：

[Table("Person")]     
public class Person
    {
        [Key]
        public int PersonID { get; set; }
        [Column("FullName")]
        [Required(ErrorMessage = "Give me a name.")]
        public string NameFull { get; set; }
        [Required(ErrorMessage = "Give me an email.")]
        public string EmailAddress { get; set; }
        [Required(ErrorMessage = "Give me a mobile number.")]
        public string MobileNo { get; set; }
        [ForeignKey("Agency")]
        [Required(ErrorMessage = "Give me an agency.")]
        public int AgencyID { get; set; }
        public virtual Agency Agency { get; set; }
    }

执行ajax调用的方法（触发onclick事件）：

function LoadPage(SFORM, SACTION, SMETHOD) {
    $('#divLoading').slideDown(1);
    var doc = document.getElementById(SFORM)
    var dataform = $(doc).serialize();
    var $form = $(doc);
    if ($form.valid()) { 
        //Ajax call here 
        $.ajax({
            type: SMETHOD,
            url: SACTION,
            data: dataform,
            complete: function () {
                $("#divLoading").slideUp(1, function () { FinishLoad() });

            },
            success: function (data) {
                $("#divMain").html(data)

            }
        });
    }
}

视图（.cshtml）：

<form id="frmCreate" name="frmCreate">
    @Html.ValidationSummary(true)
            <fieldset>
                <legend>Person</legend>

                <div class="editor-label">
                    @Html.LabelFor(model => model.NameFull)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.NameFull)
                    @Html.ValidationMessageFor(model => model.NameFull)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.EmailAddress)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.EmailAddress)
                    @Html.ValidationMessageFor(model => model.EmailAddress)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.MobileNo)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MobileNo)
                    @Html.ValidationMessageFor(model => model.MobileNo)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.AgencyID, "Agency")
                </div>
                <div class="editor-field">
                    @Html.DropDownList("AgencyID", String.Empty)
                    @Html.ValidationMessageFor(model => model.AgencyID)

                </div>

                <p>
                   <input type="button" value="Create" onclick="LoadMenuItem('frmCreate','@Url.Action("Create", "Person")', 'POST')" />
                </p>
            </fieldset>
</form>

Answer 1

似乎已经弄明白了，似乎你必须使用@using (Html.BeginForm(null, null, FormMethod.Get, new { name = "validator", id = "validator" }))来创建表单而不是标准标签，然后使用视图底部的脚本分配要验证的表单您想验证$.validator.unobtrusive.parse("#validator");

关于这一点的好处是，在您的布局页面上，您可能有一个具有不同ID的“父表单”，可能包含您可能希望使用经过验证的表单发布的隐藏字段，您只需发布所有内容即可父表单，但验证仍将出现在您在部分视图的脚本$.validator.unobtrusive.parse("#validator");中指定的表单上。

MVC客户端验证

1 个答案: