पैरेंट पेज

Question

पर त्रुटियों के साथ एमवीसी आंशिक दृश्य प्रदर्शित करें मेरे पास एक से अधिक रूपों वाला एक पृष्ठ है, प्रत्येक आंशिक के रूप में। मैं सबमिट पर प्रत्येक आंशिक पोस्ट करना चाहता हूं। यदि त्रुटियां हैं, तो मैं मुख्य पृष्ठ के हिस्से के रूप में आंशिक रूप से सत्यापन त्रुटियों को दिखाना चाहता हूं, यानी यदि त्रुटियां हैं तो मैं केवल अपने पृष्ठ पर आंशिक नहीं देखना चाहता हूं। क्या मैं यह कहने में सही हूं कि यह व्यवहार केवल अजाक्स पोस्ट के साथ ही संभव है? मैं AJAX पोस्ट के बिना मॉडल स्थिति त्रुटियों को कैसे वापस करूँगा, बस एक सामान्य फॉर्म पोस्ट?

संपादित करें: फिर भी उसके अपने पृष्ठ पर आंशिक देखकर

आंशिक -

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

नियंत्रक -

[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

हां, आप कहने में सही हैं यह व्यवहार केवल AJAX पोस्ट के साथ संभव है।

आपकी वर्तमान स्क्रिप्ट के साथ कुछ समस्याएं हैं जिसका अर्थ है कि आपको वांछित परिणाम नहीं मिलेंगे।

सबसे पहले आपका बटन एक सबमिट बटन है जिसका अर्थ यह है कि जब तक आप डिफ़ॉल्ट ईवेंट को रद्द नहीं करते हैं (return false; को अपनी स्क्रिप्ट में कोड की अंतिम पंक्ति के रूप में जोड़कर) यह AJAX कॉल के अतिरिक्त सामान्य सबमिट करेगा। हालांकि यह अभी मौजूदा पृष्ठ को अपडेट करेंगे type="button"

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

ajax कॉल करने के लिए बटन प्रकार बदलने के लिए आसान होगा, लेकिन यह जोड़ देगा लौटे मौजूदा <form> तत्व नेस्टेड रूपों में जिसके परिणामस्वरूप जो अवैध एचटीएमएल है अंदर आंशिक और समर्थित नहीं है। अपने html तो क्लाइंट साइड सत्यापन अपने प्रतिपादन गतिशील सामग्री बदलें,

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

अंत में

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

एक और तत्व में मुख्य विचारों प्रपत्र लपेट और फिर स्क्रिप्ट को संशोधित करने के लिए बाहरी तत्व के HTML अद्यतन करने के लिए होगा लौटे फॉर्म के लिए काम नहीं करते हैं। मान लिया जाये कि अपने गुण सत्यापन गुण (उदाहरण के लिए Userame संपत्ति पर [Required] विशेषता) है, तो आप, सामग्री

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

आप विख्यात आप पृष्ठ पर कई रूपों है कि लोड करने के बाद सत्यापनकर्ता Reparse करने की जरूरत है जो आपके मामले में ajax विकल्प होना चाहिए

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

या यदि ऊपर टुकड़ा प्रति के रूप में अपने घोषणा var form = $('#LoginForm');, तो data: form.serialize(), सुनिश्चित करने के लिए आप सही रूप serializing कर रहे हैं।

साइड नोट: पाठ बॉक्स के id विशेषता को बदलने के लिए कोई वास्तविक जरूरत नहीं है (यह id=Username" डिफ़ॉल्ट रूप से हो जाएगा और आप बस का उपयोग कर सकते

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

या सिर्फ @Html.LabelFor(x => x.UserName) संपत्ति के [Display(Name = "User ID")]

साथ सजाया गया है