mvc3 - validation ajax formulaire et côté serveur

Question

Je suis sûr que cela a déjà été demandé, mais j'ai essayé toutes les solutions données, mais aucune de la solution donnée ne résout mon problème. Probablement, je ne l'applique pas correctement. J'utilise MVC3, rasoir, jQuery.

J'ai un nouveau formulaire d'inscription. Une fois l'enregistrement réussi, je souhaite afficher le message réussi (différent selon le type d'enregistrement) dans une boîte de dialogue.

En cas d'erreur avec ModelState, signifie ModelState.IsValid == false, je souhaite afficher les erreurs dans ValidationSummary.

Voir

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

Contrôleur

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); } 

} 

Modèle

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 a

UnobtrusiveJavaScriptEnabled = "true" et ClientValidationEnabled = "true"

.js fichiers inclus sont

script src = "@ Url.Content (" ~/Scripts/jquery-1.7.1.min.js ")" type = "text/javascript">

script src = "@ Url.Content (" ~/Scripts/jquery.validate.min.js ") "type =" text/javascript ">

script src = "@ Url.Content (" ~/scripts/jquery.validate.unobtrusive.min.js ")" type = "text/javascript">

scénario

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

Qu'est-ce qui me manque ici? Toute alternative? Merci d'avance.

Answer 1

Je pense que l'affichage d'un formulaire de manière ajax vous obtenez uniquement des erreurs côté client.

Erreurs côté serveur, doivent être renvoyées via Json et ensuite "insérées" dans le balisage vía jQuery ou javascript brut.

Here you can see and download a fully working example.

Answer 2

Ecrivez les références suivantes dans le fichier maître (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> 

Dans web.config, set 'false' à 'true':

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

Dans le modèle:

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

Dans le contrôleur:

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); 
    } 
} 

Voir Index:

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

Formulaire:

@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" /> 
} 

Succès Vue:

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel 

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

Consultez ce lien pour la validation côté serveur sous une forme AJAX: http://www.codeproject.com/Articles/460893/Unobtrusive-AJAX-Form-Validation-in-ASP-NET-MVC