Visualizza la vista parziale di mvc con errori nella pagina principale

Question

Ho una pagina con più moduli, ciascuno come parziale. Voglio postare ogni partial su submit. Se ci sono errori, voglio che gli errori di validazione vengano visualizzati nel partial come parte della pagina principale, cioè non voglio vedere il partial sulla sua pagina se ci sono errori. Ho ragione nel dire che questo comportamento è possibile solo con un post ajax? Come dovrei restituire gli errori di stato del modello SENZA un post ajax, solo un post normale?

Edit: Ancora vedendo il parziale su di essa la propria pagina

parziale -

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "LoginForm" })) 
{ 
    @Html.ValidationMessage("InvalidUserNamePassword") 
    <fieldset class="fieldset"> 
     <div> 
      <label for="form-field-user_id">User ID</label> 
      <span> 
       @Html.TextBoxFor(x => x.Username, new { @class = "form-field__input form-field__input--text", @id = "form-field-user_id"})      
      </span> 
     </div> 
    </fieldset> 
    <div class="form-field__button"> 
     <button id="loginButton" type="submit" class="button button--primary">Login</button> 
    </div> 
} 

<script> 
    $('#loginButton').click(function() { 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("Login", "Account")', 
      data: $('form').serialize(), 
      success: function (result) { 
       if (result.redirectTo) { 
        window.location.href = result.redirectTo; 
       } else { 
        $("#LoginForm").html(result); 
       } 
      }, 
      error: function() { 
       $("#LoginForm").html(result); 
      } 
     }); 
    }); 
</script> 

Controller -

[HttpPost] 
public ActionResult Login(LoginModel model) 
{ 
    if (!ModelState.IsValid) 
    { 
     return PartialView("~/Views/Account/_Login.cshtml", model); 
    } 
    return Json(new { redirectTo = Url.Action("Index", "Profile") }); 
} 

Answer 1

Sì, hai ragione nel dire questo comportamento è possibile solo con un post Ajax.

Ci sono alcuni problemi con il tuo script corrente che significa che non otterrai i risultati desiderati.

In primo luogo il pulsante è un pulsante di invio che significa che eseguirà un normale invio oltre alla chiamata ajax a meno che non si annulli l'evento predefinito (aggiungendo return false; come ultima riga di codice nel proprio script). Tuttavia sarebbe facile cambiare solo il tipo di bottone a type="button"

<button id="loginButton" type="button" class="button button--primary">Login</button> 

La chiamata ajax sarà ora aggiornare la pagina esistente, tuttavia sarà aggiungere restituita parziale all'interno <form> elemento esistente conseguente forme nidificate che è html valido e non supportato. Modificare il codice HTML per avvolgere la forma vista principale di un altro elemento

<div id="LoginFormContainer"> 
    @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "LoginForm" })) 
    { 
     .... 
     <button id="loginButton" type="button" class="button button--primary">Login</button> 
    } 
</div> 

e quindi modificare lo script per aggiornare il codice HTML dell'elemento esterno

success: function (result) { 
    if (result.redirectTo) { 
     window.location.href = result.redirectTo; 
    } else { 
     $("#LoginFormContainer").html(result); // modify 
    } 
}, 

Infine, contenuti dinamici rendendo così la validazione lato client sarà non funziona per il modulo restituito. Supponendo che le proprietà hanno attributi di validazione (per esempio l'attributo [Required] sulla proprietà Userame), è necessario rianalizzare il validatore dopo aver caricato il contenuto

var form = $('#LoginForm'); 
.... 
} else { 
    $("#LoginFormContainer").html(result); 
    // reparse validator 
    form.data('validator', null); 
    $.validator.unobtrusive.parse(form); 
} 

È notato che si dispone di più le forme sulla pagina, in questo caso il vostro opzioni ajax dovrebbero essere

data: $('#LoginForm').serialize(), 

o se il vostro dichiarare var form = $('#LoginForm'); secondo frammento di sopra, poi data: form.serialize(), per garantire che si sta serializzare la forma corretta.

Nota a margine: Non v'è alcuna reale necessità di modificare l'attributo id della casella di testo (sarà id=Username" per impostazione predefinita e si può semplicemente utilizzare

@Html.LabelFor(x => x.UserName, "User ID") 
@Html.TextBoxFor(x => x.Username, new { @class = "form-field__input form-field__input--text" }) 

o solo @Html.LabelFor(x => x.UserName) della struttura è arredata con [Display(Name = "User ID")]