呼叫MVC 3客户端验证手动阿贾克斯职位 [英] Call MVC 3 Client Side Validation Manually for ajax posts

问题描述

我创建一个MVC 3 Web应用程序。我想用我的实体类数据注释然后又做了回发到服务器之前用onobtrusive客户端验证。做一个普通帖子的时候也能正常工作。我得到验证和验证摘要，如果任何字段无效。不过，我想回去后通过AJAX和JSON的信息。我如何能我'手动'先验证在客户端的形式，然后让我的ajax回发到服务器。下面是我的code的总结版本。

 公共类客户
    {
        [必需（的ErrorMessage =需要客户的名字。）
        公共字符串名字{获得;组; }        [必需（的ErrorMessage =需要客户的姓氏。）
        公共字符串名字{获得;组; }
    }    ＆下;使用％（Html.BeginForm（））{％GT;    ＆LT;％：Html.LabelFor（型号=＆GT; model.FirstName，名）％GT;
    ＆LT;％：Html.TextBoxFor（型号=＆GT; model.FirstName，新{@class =文本框，ID =Customer.FirstName}）％GT;
    ＆所述;％：Html.ValidationMessageFor（型号= GT; model.FirstName，*）％＆GT;    ＆LT;％：Html.LabelFor（型号=＆GT; model.LastName，姓）％＆GT;
    ＆LT;％：Html.TextBoxFor（型号=＆GT; model.LastName，新{@class =文本框，ID =Customer.LastName}）％GT;
    ＆所述;％：Html.ValidationMessageFor（型号= GT; model.LastName，*）％＆GT;    ＆LT; D​​IV ID =CustomerEditSave级=按钮CustomerEditButtons的风格=保证金右：40像素;＆GT;
       ＆LT; A HREF =＃＆GT;保存＆LT; / A＆GT;
    ＆LT; / DIV＆GT;    ＆LT;％：Html.ValidationSummary（真）％GT;    ＆LT;％}％GT;
 

我已经试过这code，但它仅验证名字和不显示验证摘要。

  $（＃CustomerEditSave）。点击（函数（）{
        $（形式）.validate（）;
        // Ajax调用这里
    }）;
 

解决方案

尝试：

  //使用形式的jQuery选择（推荐）
$（'形式'）。提交（函数（EVT）{
    。EVT preventDefault（）;
    变量$形式= $（本）;
    如果（$ form.valid（））{
        // Ajax调用这里
    }
}）;//使用提交按钮单击事件
$（'＃buttonId'）。点击（函数（EVT）{
    。EVT preventDefault（）;
    变量$形式= $（'形式'）;
    如果（$ 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 onobtrusive 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 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.

这篇关于呼叫MVC 3客户端验证手动阿贾克斯职位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！