mvc3 - ajaxフォーム提出とサーバー側の検証

Question

私はこれが既に頼まれていると確信していますが、私はすべての解決策を試してきましたが、与えられた解決策のどれもが私の問題を解決していません。おそらく、私はそれを正しく実装していないでしょう。

私はMVC3、razor、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含ま

の.jsファイルは= "@ Url.Content（"

スクリプトSRCある= "真" = "真" とClientValidationEnabled "〜/ Scripts/jquery-1.7.1.min.js"） "type =" text/javascript ">

スクリプトsrc =" @ Url.Content（ "〜/ Scripts/jquery.validate.min.js" ） "type =" text/javascript ">

スクリプトSRC = "@のUrl.Content（" 〜/スクリプト/ jquery.validate.unobtrusive.min.js "）" タイプ= "テキスト/ javascriptの">

スクリプトSRC = "@ Url.Content （ "〜/ Scripts/jquery.unobtrusive-ajax.min.js"） "type =" text/javascript ">

私はここで何が欠けていますか？代わりに？ ありがとうございます。

Answer 1

私はフォームvíaajaxを投稿すると、クライアント側のエラーしか得られないと思う。

サーバー側のエラーは、Json経由で返され、次にjQueryまたはプレーンなjavascriptのマークアップに「挿入」される必要があります。ウェブで

<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> 

：

Here you can see and download a fully working example.

Answer 2

は、マスターファイル（layout.cshtml）で次の参照を書きます。設定、 '真' に 'false' に設定します。モデルで

<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