mvc3 - ajax表单提交和服务器端验证

Question

我相信这已被问过，但我一直在尝试所有的解决方案，但没有给出的解决方案是解决我的问题。可能，我没有执行正确的。

我正在使用MVC3，剃刀，jQuery。

我有一个新的用户注册表单。一旦注册成功，我想在对话框中显示成功的消息（注册类型不同）。

如果ModelState出现任何错误，意味着ModelState.IsValid == false，我想在ValidationSummary中显示错误。

查看

function OnBegin() { alert('begin'); return $('form').validate().form(); } 
function OnSuccess() { alert('success'); DisplaySucess()} 
function OnFailure() { alert('failure'); } 
function DisplaySuccess() { 
    var typeOfRegistration = $('input:radio[name=RegistrationType]:checked').val(); 
    var msg; 
    if (typeOfRegistration == 0) { 
     msg = "You are successfully enrolled for Algebra classes."; 
    } 
    if (typeOfRegistration == 1) { 
     msg = "You are registered with your email address. Someone would contact you with an email."; 
    } 
    if (typeOfRegistration == 2) { 
     msg = "Thank you for filling up this form. One welcome packet would be delivered with in next 15 days"; 
    } 

    msg = msg.replace(/\n/g, '<br />'); 
    $('#dialog').html(msg); 
    $('#dialog').dialog('open'); 
} 

@model Models.RegistrationModel 
@using (Ajax.BeginForm("NewRegistration", "Account", new AjaxOptions() { OnBegin="OnBegin", OnSuccess = "OnSuccess", OnFailure = "OnFailure" })) 
{ 
    @Html.ValidationSummary() 
    <div> 
    Register<br /> 
    @Html.RadioButton("RegistrationType ", "0", true) New Algebra class<br /> 
    @Html.RadioButton("RegistrationType ", "1") New user registration by email<br /> 
    @Html.RadioButton("RegistrationType ", "2") New user registration by mailing address<br/> 
    ..some more types 
</div> 
<div> 
    …here I display/hide controls based on Registration type selected. 
     <div> 
    @Html.LabelFor("UserName") 
    @Html.TextBox("UserName")</div> 
} 

控制器

public ActionResult NewRegistration(RegistrationModel model) 
{ 

     if (Request.IsAjaxRequest()) 
     { 
      if (!ModelState.IsValid) { 
     //Ques: How do I display this in ValidationSummary. 
     return Json(new object[] { false, "Contains Email Address", ModelState.GetAllErrors() }); 
     } 
      else { 
     if (UserNameIsTaken){ 
      //Ques: This does not show in ValidationSummary 
      ModelState.AddModelError("_FORM", "This username is already taken. Please pick a different username."); 
     } 
     } 
    } 
     else if (!ModelState.IsValid) { return View(model); } 

} 

型号

public class RegistrationModel: IValidatableObject 
{ 
[Required] //this gets displayed in ValidationSummary as Client-side validation 
    public string UserName { get; set; } 
    .. and all fields here 
} 
public IEnumerable<ValidationResult> Validate(ValidationContext context) 
{ 
     if (!string.IsNullOrEmpty(UserName) && UserName.Contains(EmailAddress)) { 
      yield return new ValidationResult("Username cannot contain email address", new[] { "UserName" }); 
     } 
    } 

Web.config中具有

UnobtrusiveJavaScriptEnabled = “true” 和ClientValidationEnabled = “真” 包括

.js文件是

SCRIPT SRC = “@ Url.Content（” 〜/ Scripts/jquery.valid.js“）”type =“text/javascript”>

script src =“@ Url.Content（”〜/ Scripts/jquery.validate.min.js“ ）“type =”text/javascript“>

SCRIPT SRC = “@ Url.Content（” 〜/脚本/ jquery.validate.unobtrusive.min.js “）” 类型= “文本/ JavaScript的”>

SCRIPT SRC =“@ Url.Content （“〜/ Scripts/jquery.unobtrusive-ajax.min.js”）“type =”text/javascript“>

我在这里错过了什么？任何选择？ 在此先感谢。

Answer 1

我认为发布表单víaajax你只会得到客户端错误。

服务器端错误，需要通过Json返回，然后“插入”标记víajQuery或纯javascript。

Here you can see and download a fully working example.

Answer 2

写入主文件（layout.cshtml）在以下参考资料：

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

在网页。配置，设置 '假' 到 '真'：

<appSettings> 
<!--<add key="ClientValidationEnabled" value="true"/> (enable this when client-side validation is needed) --> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings> 

在模型：

public class ValidUserNameAttribue : ValidationAttribute 
{ 
    public override bool IsValid(object value) 
    { 
    return (value != null && value.ToString() == "Bob"); 
    } 
} 

public class Customer 
{ 
    [ValidUserNameAttribue(ErrorMessage = "please type user name as Bob")] /* for server side validation*/ 
    public string UserName { get; set; } 
} 

在控制器：

public class HomeController : Controller 
{ 
    [HttpGet] 
    public ActionResult Index() 
    { 
    return View(new ValidationModel()); 
    } 

    [HttpPost] 
    public ActionResult Form(ValidationModel validationModel) 
    { 
    return PartialView(!ModelState.IsValid ? "Partial/_Form" : "Partial/_Success", validationModel); 
    } 
} 

索引视图：

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel 

@{ 
    ViewBag.Title = "ajax form submit and server side validation"; 
} 


<div id="FormContainer"> 
    @Html.Partial("Partial/_Form") 
</div> 

表格视图：

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel 

@using (Ajax.BeginForm("Form", new AjaxOptions() { UpdateTargetId = "FormContainer" , OnSuccess = "$.validator.unobtrusive.parse('form');" })) 
{ 

    <p> 
     @Html.ValidationMessageFor(m => m.UserName) // (Error Message) 
    </p> 

    <p> 
     @Html.LabelFor(m => m.UserName): 
     @Html.EditorFor(m => m.UserName) 
    </p> 

    <input type="submit" value="Submit" /> 
} 

成功观：

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel 

User name '@Model.UserName' is valid :) 

退房在AJAX形式此链接的服务器端验证：http://www.codeproject.com/Articles/460893/Unobtrusive-AJAX-Form-Validation-in-ASP-NET-MVC