सत्यापन के साथ jQuery का उपयोग कर एक मॉडल के अंदर एक .NET एमवीसी फॉर्म कैसे बनाएं

Question

मैं वास्तव में यह सब जानने के साथ संघर्ष कर रहा हूं कि यह सब एक साथ कैसे रखा जाए। मैंने .NET एमवीसी पृष्ठों के अंदर फॉर्म बनाये हैं, बिना सत्यापन के और बिना। और मैंने सत्यापन के साथ और बिना jQuery का उपयोग कर फ़ॉर्म बनाए हैं। और मैंने एक मॉडल के अंदर फॉर्म बनाए हैं, लेकिन एमवीसी के साथ कभी नहीं।

मैं अपने original question से समझता हूं क्योंकि यह फ़ॉर्म एक मॉडल के अंदर है कि मुझे सबमिट को संभालने के लिए jQuery का उपयोग करने की आवश्यकता होगी। मुझे एक समय का एक बिल्ली है कि यह पता लगाने के लिए कि इन सभी चलती टुकड़ों को एक साथ कैसे रखा जाए। अब तक, मुझे एक ट्यूटोरियल (या ट्यूटोरियल का कॉम्बो) नहीं मिला है जो इसे सब एक साथ रखता है। एक बटन एक मॉडल खुलती है

मेरी MVC देखने के अंदर
• :

  यहाँ मैं क्या जरूरत है। (यह ठीक काम करता है।)

• एक बार मोडल खुलता है, इसमें कई टेक्स्ट फ़ील्ड्स और ड्रॉपडाउन के साथ एक फॉर्म होता है। प्रत्येक की आवश्यकता है। (फ़ील्ड को आवश्यक बनाने के लिए, क्या मैं इसे दृश्य के मॉडल में परिभाषित करता हूं, जैसा कि मैं सामान्य रूप से एक एमवीसी फॉर्म के साथ करता हूं? या क्या मैं jQuery में आवश्यकताएं बना सकता हूं?)
• यदि उपयोगकर्ता फॉर्म सबमिट करने का प्रयास करता है और वे खाली या अमान्य हैं, मोडल खुला रहता है और सत्यापन संदेश प्रकट होते हैं। (मैं समझता हूं, मेरे original question से, यह मोडल की वजह से सीधे एमवीसी का उपयोग करना संभव नहीं है, और कुछ jQuery की आवश्यकता है। मैं यहां खो गया हूं।)
• यदि उपयोगकर्ता फॉर्म सबमिट करने का प्रयास करता है और सभी फ़ील्ड मान्य हैं, फिर मोडल बंद हो जाता है, हम नियंत्रक को दबाते हैं और फ़ील्ड को डीबी में सहेजते हैं।

संपादित करें (सुनिश्चित नहीं हैं jQuery से बाहर भागने और बस अंतिम तर्क को संभालने के लिए सामान्य नियंत्रक हिट करने के लिए कैसे।):

आप आपकी मदद के लिए धन्यवाद, जेसन,! आपके सुझावों के आधार पर, इस तरह मैंने इसे काम किया है।

जनक दृश्य:

मोडल:

@section Scripts { 
    <script> 
     $(document).ready(function() { 

      $('#AccountEditModal').on('shown.bs.modal', function() { 
       $('#myInput').focus() 
      }) 



     $("#AccountEditModal").on("submit", "#form-accountprofileedit", function (e) { 
      e.preventDefault(); // prevent standard form submission 

      var form = $(this); 
      $.ajax({ 
       url: form.attr("action"), 
       method: form.attr("method"), // post 
       data: form.serialize(), 
       success: function (partialResult) { 
        $("#formContent").html(partialResult); 
       } 
      }); 
     }); 


     }); 

    </script> 
} 

आंशिक देखें (नीचे slimmed):

<div class="modal fade" id="AccountEditModal" tabindex="-1" role="dialog" aria-labelledby="AccountEditModalLabel"> 
    <div class="modal-dialog modalAccountEdit" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h3><strong>Edit Account Profile - <span class="accountname"></span></strong></h3> 
      </div> 

      <div class="modal-body"> 
       <div id="formContent"> 
        @Html.Partial("_AccountProfileEdit", new GEDCPatientPortal.Models.AccountProfileEditViewModel()) 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

और फिर यहाँ स्क्रिप्ट है

@using (Html.BeginForm("AccountProfileEdit", "Account", FormMethod.Post, new { id = "form-accountprofileedit", @class = "full-form" })) 
    { 


    @Html.CustomTextboxFor(model => model.Address) 


    <div style="text-align:right;"> 
     <button type="submit" id="accountprofileedit-submit" name="accountprofileedit-submit" value="Edit Account" class="btn btn-primary" style="margin-left:5px;">Edit Account</button> 
     <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button> 
    </div> 
} 

नियंत्रक:

[HttpPost] 
    public ActionResult AccountProfileEdit(AccountProfileEditViewModel model) 
    { 
     if (ModelState.IsValid) 
     { 
      // logic to store form data in DB 
     } 

     return PartialView("_AccountProfileEdit", model); 

    } 

Answer 1

आप धारण करने के लिए एक आंशिक दृश्य अपने मॉडल

public class AccountProfileEditViewModel 
{ 
    [Display(Name = "Address")] 
    [Required()] 
    [StringLength(200)] 
    public string Address { get; set; } 
} 

पर डेटा annotaions के साथ निर्मित MVC मान्यता स्क्रिप्ट का उपयोग कर सकते हैं अपने मोडल फॉर्म

_AccountProfileEdit.cshtml

@model AccountProfileEditViewModel 

@using(Html.BeginForm("AccountProfileEdit", "Account", 
      FormMethod.Post, new { id = "form-accountedit-appt" }) { 
    @Html.ValidationSummary(true) 

    @Html.LabelFor(m => m.Address) 
    @Html.TextBoxFor(m => m.Address) 
    @Html.ValidationMessageFor(m => m.Address) 
    <button type="submit">Edit</button> 
} 

फिर अपने मोडल बॉक्स में इस संदर्भ।

<div class="modal-body" id="form-container"> 
    @Html.Partial("_AccountProfileEdit") 
</div> 

कार्रवाई करने के लिए id पैरामीटर का उपयोग करता: तुम सिर्फ एक खाली फार्म तो चाहते हैं तो आप बस का उपयोग कर सकते

<div class="modal-body" id="form-container"> 
    @Html.Action("AccountProfileEdit", "Account", new { id=account.Id }) 
</div> 

: यदि आप पहले से भरे मॉडल चाहते हैं तो आप एक कार्रवाई प्रस्तुत करने के लिए की आवश्यकता होगी लाने और मॉडल

[HttpGet] 
public ActionResult AccountProfileEdit(int id) 
{ 
    AccountProfileEditViewModel model = db.GetAccount(id); // however you do this in your app 

    return PartialView("_AccountProfileEdit", model); 
} 

AJAX पोस्ट

पॉप्युलेट

अब आपको इस फॉर्म को सबमिट करने के लिए AJAX की आवश्यकता होगी। यदि आप मानक फॉर्म सबमिशन पर भरोसा करते हैं तो ब्राउज़र आपके पृष्ठ से दूर जाएगा (और अपना मोडल बंद करें)।

$("#myModal").on("submit", "#form-accountedit", function(e) { 
    e.preventDefault(); // prevent standard form submission 

    var form = $(this); 
    $.ajax({ 
     url: form.attr("action"), 
     method: form.attr("method"), // post 
     data: form.serialize(), 
     success: function(partialResult) { 
      $("#form-container").html(partialResult); 
     } 
    }); 
}); 

आप प्रस्तुत घटना के लिए घटना प्रतिनिधि $(staticParent).on(event, target, handler) उपयोग करने के लिए प्रपत्र सामग्री बाद में बदले जा सकते हैं, क्योंकि जरूरत है।

पोस्ट कार्रवाई

[HttpPost] 
public ActionResult AccountProfileEdit(AccountProfileEditViewModel model) 
{ 
    // Request.Form is model 

    if (ModelState.IsValid) 
    { 
     // do work 
     return PartialView("_AccountEditSuccess"); 
    } 

    return PartialView("_AccountProfileEdit", model); 
} 

क्लाइंट-साइड सत्यापन स्क्रिप्ट उन्हें कभी प्रस्तुत करने से रोकने चाहिए। लेकिन अगर वह किसी भी तरह विफल रहा है या यदि आप क्लाइंट पर कुछ मान्य नहीं कर सकते हैं तो आपके पास ModelState.IsValid है। आप कुछ सर्वर-साइड मैन्युअल रूप से अमान्य भी कर सकते हैं।

_AccountEditSuccess.cshtml

और "सफलता" आंशिक दृश्य।

<div>Success! <button>Click to close</button></div> 

मान्य नहीं एक असफल है, है ना?

आपके AJAX सफलता हैंडलर से आप

success: function(partialResult) { 
    $("#form-container").html(partialResult); 
} 

है लेकिन समस्या यह है यहां यदि आप एक "सफलता" या "सत्यापन विफलता" हो रही है हम नहीं जानते है। error: function(err){ } हैंडलर जोड़ने से मदद नहीं मिलेगी क्योंकि सत्यापन विफलता को HTTP 200 प्रतिक्रिया माना जाता है। दोनों मामलों में div सामग्री को प्रतिस्थापित कर दिया गया है उपयोगकर्ता को मैन्युअल रूप से मोडल बंद करने की आवश्यकता होगी। दोनों स्थितियों को अलग करने के लिए अतिरिक्त डेटा पास करने के तरीके हैं लेकिन यह एक और लंबा उत्तर पोस्ट है।

Answer 2

, इस तरह से आप मोडल खंड उसी तरह आप सरल पृष्ठ, जो प्रस्तुत विकसित विकसित कर सकते हैं मोडल div के अंदर एक iframe डाल पर विचार के बजाय partialView प्रतिपादन के,, मॉडल , आदि आदि ...

इस तरह से:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog modalAE" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h3><strong>Edit Account Profile - <span class="accountname"></span></strong></h3> 
     </div> 
      <div class="modal-body"> 
      <iframe src='myApp/AccountProfileEdit'/> 
     </div> 
     <div class="modal-footer"> 
      <button type="submit" id="accountprofileedit-submit" name="accountprofileedit-submit" value="Edit Account" class="btn btn-primary" style="margin-left:5px;">Edit Account</button> 
      <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button> 
     </div> 
     } 
    </div> 
</div>