Ana sayfada hatalarla birlikte mv kısmi görünümü görüntüleme

Question

Her biri kısmi olarak birden çok form içeren bir sayfam var. Her kısmi göndermek istiyorum. Hatalar varsa, doğrulama hatalarının ana sayfanın bir parçası olarak kısmi olarak gösterilmesini istiyorum. Hatalar varsa, sadece kendi sayfasındaki kısmi görmek istemiyorum. Bu davranışın sadece ajax postasıyla mümkün olduğunu söyleyerek düzeliyorum mu? Model durumu hatalarını ajax postasından, normal form gönderisinden nasıl iade edebilirim?

Düzenleme: Hala

Kısmi o kendi sayfasında kısmi görme -

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

Denetleyici -

[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

Evet, derken doğru söylüyorsunuz, bu davranış sadece ajax ile mümkündür.

Geçerli komut dosyanızla ilgili birkaç sorun vardır, bu da istenen sonuçları almadığınız anlamına gelir.

Öncelikle, düğmeniz varsayılan olayı iptal etmedikçe ajax çağrısına ek olarak normal bir gönderme yapacağı anlamına gelen bir gönder düğmesidir (komut dosyanızdaki kodun son satırı olarak return false; ekleyerek). Ancak bununla birlikte o kadar yüksek olur, sadece şimdi var olan sayfa güncellenecektir type="button"

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

ajax çağrısına düğme türünü değiştirmek için daha kolay olurdu döndü geçersiz html olan iç içe formlarda ortaya çıkan mevcut <form> öğesinin içinde kısmi ve desteklenmiyor. ,

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

Son olarak, dış elemanın html güncellemek için başka eleman

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

ana görünümler formunu sarın ve sonra senaryoyu değiştirmek için istemci tarafı doğrulama böylece render dinamik içerik sizin html değiştirinbeklemek iade formu için işe yaramaz. Mülklerinizin (örneğin Userame mülkiyet [Required] özelliğini) doğrulama özelliklerine sahip varsayarsak, içerik

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

Sen sayfada birden fazla form olduğunu kaydetti yüklendikten sonra doğrulayıcı yeniden ayrıştırma gerekir ki bu durumda sizin de ajax seçenekleri olmalıdır

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

veya yukarıdaki pasajı başına olarak beyan var form = $('#LoginForm'); ardından data: form.serialize(), sağlamak için eğer doğru formu seri hale edilir

.

Yan not: metin kutusu id niteliğini değiştirmek için gerçek ihtiyaç vardır (varsayılan olarak id=Username" olacak ve sadece mülkiyet

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

ya da sadece @Html.LabelFor(x => x.UserName)[Display(Name = "User ID")]

süslenmiş kullanabilirsiniz