为 ajax 帖子手动调用 MVC 3 客户端验证 [英] Call MVC 3 Client Side Validation Manually for ajax posts

问题描述

我正在创建一个 MVC 3 Web 应用程序.我想在我的实体类上使用数据注释，然后在回发到服务器之前使用不显眼的客户端验证.这在发布常规帖子时效果很好.如果任何字段无效，我会得到验证和验证摘要.但是，我想通过ajax和json回发信息.我怎样才能手动"验证客户端的表单，然后让我的 ajax 回发到服务器.以下是我的代码的总结版本.

 公共类客户{[Required(ErrorMessage = "客户的名字是必需的.")]公共字符串名字{获取；放;}[Required(ErrorMessage = "客户的姓氏是必需的.")]公共字符串姓氏 { 获取；放;}}<% using (Html.BeginForm()) {%><%: Html.LabelFor(model => model.FirstName, "First Name")%><%: Html.TextBoxFor(model => model.FirstName, new { @class = "TextBox", id = "Customer.FirstName" })%><%: Html.ValidationMessageFor(model =>model.FirstName, "*")%><%: Html.LabelFor(model => model.LastName, "Last Name")%><%: Html.TextBoxFor(model => model.LastName, new { @class = "TextBox", id = "Customer.LastName" })%><%: Html.ValidationMessageFor(model => model.LastName, "*")%><div id="CustomerEditSave" class="Button CustomerEditButtons" style="margin-right:40px;"><a href="#">保存</a>

<%:Html.ValidationSummary(true)%><%}%>

我已经尝试过这段代码，但它只验证名字，不显示验证摘要.

 $("#CustomerEditSave").click(function () {$(form).validate();//这里Ajax调用});

解决方案

尝试:

//使用表单作为jQuery选择器(推荐)$('form').submit(function(evt) {evt.preventDefault();var $form = $(this);if($form.valid()) {//这里Ajax调用}});//使用提交按钮上的点击事件$('#buttonId').click(function(evt) {evt.preventDefault();var $form = $('form');if($form.valid()) {//这里Ajax调用}});

这应该适用于 jQuery ajax 和 MSAjax 调用.也可以尝试使用 http://nuget.org/packages/TakeCommand.js 或 https://github.com/webadvanced/takeCommand 它会自动为您处理.

I am creating an MVC 3 web application. I want to use Data Annotations on my entity class and then use unobtrusive client side validation before making a post back to the server. This works fine when making a regular post. I get validation and the validation summary if any of the fields are not valid. However, I want to post back the information via ajax and json. How can I 'manually' validate the form on the client side first then make my ajax post back to the server. Below is a summarized version of my code.

  public class Customer
    {
        [Required(ErrorMessage = "The customer's first name is required.")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "The customer's last name is required.")]
        public string LastName { get; set; }
    }



    <% using (Html.BeginForm()) { %>

    <%: Html.LabelFor(model => model.FirstName, "First Name")%>
    <%: Html.TextBoxFor(model => model.FirstName, new { @class = "TextBox", id = "Customer.FirstName" })%>
    <%: Html.ValidationMessageFor(model => model.FirstName, "*")%>

    <%: Html.LabelFor(model => model.LastName, "Last Name")%>
    <%: Html.TextBoxFor(model => model.LastName, new { @class = "TextBox", id = "Customer.LastName" })%>
    <%: Html.ValidationMessageFor(model => model.LastName, "*")%>

    <div id="CustomerEditSave" class="Button CustomerEditButtons" style="margin-right:40px;">
       <a href="#">Save</a>
    </div>

    <%: Html.ValidationSummary(true) %>

    <% } %>

I have tried this code but it only validates the first name and does not display the validation summary.

    $("#CustomerEditSave").click(function () {
        $(form).validate();
        //Ajax call here
    });

解决方案

Try:

//using the form as the jQuery selector (recommended)
$('form').submit(function(evt) {
    evt.preventDefault();
    var $form = $(this);
    if($form.valid()) {
        //Ajax call here
    }
});

//using the click event on the submit button
$('#buttonId').click(function(evt) {
    evt.preventDefault();
    var $form = $('form');
    if($form.valid()) {
        //Ajax call here
    }
});

This should work with jQuery ajax and MSAjax calls. Could also try using http://nuget.org/packages/TakeCommand.js or https://github.com/webadvanced/takeCommand it will automatically handle this for you.

这篇关于为 ajax 帖子手动调用 MVC 3 客户端验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！