Question

整个问题是，我希望能够在我的自定义编写的Ajax代码上使用MVC3的内置客户端验证。（我在谈论使用HTML.BeginForm()和Ajax.BeginForm()制作的表单中提供的验证。

我的模型看起来像这样：

public class BrandVewModel
    {
        public int ID { get; set; }

        [Display(Name = "Brand Name")]
        [Required(ErrorMessage = "Please fill in the blank!")]
        [StringLength(40, ErrorMessage = "The name must not be more than 40 characters long!")]
        public string Name { get; set; }
    }

我的视图看起来像这样：

@using (Ajax.BeginForm("Insert_Brand", "Admin", FormMethod.Post, new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.HiddenFor(model => model.ID)
    @Html.ValidationMessageFor(model => model.Name)
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name)

    <input value="Create"  type="submit" name="Create New Brand"  />

    <div id="result"></div>
}

正如您所看到的，我正在使用Ajax.BeginForm()，这很好。显然，对于我的viewmodel，如果用户将Name字段留空并单击提交按钮，它们将显示相应的错误，没有将表单数据发送到服务器！（因为它是客户端，表单验证，感谢jQuery）

但我需要使用如下所示的简单表单（而不是Ajax.BeginForm()）并拥有所有客户端验证功能：

<form method="post" action="@Html.Action("Insert_Brand","Admin")">

    @Html.HiddenFor(model => model.ID)
    @Html.ValidationMessageFor(model => model.Name)
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name)

    <a onclick="CreateBrand()">Create Brand</a>

</form>

//    honestly I have no idea what 'custom-written ajax coding', or what I do here is called :p 

    <script type="text/javascript" >
            function CreateBrand() {
                var item = { Brand: { Name:$('#Name').val()} };
                $.ajax({
                    url: '/Admin/Insert_Brand',
                    type: "POST",
                    data: JSON.stringify(item),
                    dataType: "text json",
                    contentType: "application/json; charset=utf-8",
                    success: function (t) {
                        console.log(t);
                        $("#result").html(t);
                        return;
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log("Failed!");
                        console.log("XMLHttpRequest=" + XMLHttpRequest.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
                    }
                });
            }
        </script>

正如我所说，当我使用这种类型的ajax表单发布时，我需要向用户显示所有良好的验证消息。但我不知道如何实现这一目标......

有什么办法吗？

Answer 1

客户端验证在您的情况下不起作用的原因是因为您已对<form>标记进行了硬编码，因此没有任何内容可以实例化FormContext。如果没有FormContext，TextBoxFor等HTML帮助程序不会发出任何不显眼的框架使用的HTML5数据*验证属性。

所以只需使用Html.BeginForm助手：

@using (Html.BeginForm("Insert_Brand", "Admin"))
{
    @Html.HiddenFor(model => model.ID)
    @Html.ValidationMessageFor(model => model.Name)
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name)

    <a onclick="CreateBrand()">Create Brand</a>
}

但是，我建议您使用提交按钮并订阅.submit()事件，而不是订阅锚点的onclick事件。这样做的原因是，当焦点位于文本框内时，用户可以按下键盘上的 Enter 提交表单，然后表单将以正常请求提交。你的AJAX处理程序永远不会运行。

所以：

@using (Html.BeginForm("Insert_Brand", "Admin", FormMethod.Post, new { id = "myForm" }))
{
    @Html.HiddenFor(model => model.ID)
    @Html.ValidationMessageFor(model => model.Name)
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name)

    <button type="submit">Create Brand</button>
}

然后在单独的javascript文件中：

$(function() {
    $('#myForm').submit(function() {

        var item = { Brand: { Name: $('#Name').val() } };
        $.ajax({
            url: this.action,
            type: this.method,
            data: JSON.stringify(item),
            contentType: 'application/json; charset=utf-8',
            success: function (t) {
                console.log(t);
                $('#result').html(t);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("Failed!");
                console.log("XMLHttpRequest=" + XMLHttpRequest.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
            }
        });

        return false;
    });
});

但是，如果由于某些神秘的原因你坚持手动硬编码这个<form>标签而不是使用为此目的设计的帮助器，你也可以通过在你的顶部添加以下行来手动创建FormContext。视图：

@{
    ViewContext.FormContext = new FormContext();
}

因此欺骗Html帮助者相信他们在一个表单中并强制他们发出HTML5数据 - *验证属性。

如何在Ajax表单中使用MVC3客户端表单验证？

1 个答案: