Doğrulama ile jQuery kullanarak bir Modal içinde bir .NET MVC Formu nasıl yapılır

Question

Bunu bir araya nasıl koyacağınızı bilmek gerçekten çok zor. .net MVC sayfalarının içinde, doğrulanmış ve doğrulanmamış formlar oluşturdum. Ve doğrulama ile ve olmadan jQuery kullanarak formlar oluşturdum. Ve bir modalın içinde formlar inşa ettim, ama MVC ile asla.

original question sayfamdan anladım, çünkü bu form, gönderim işlemek için jQuery kullanması gereken bir modal içerisindedir. Bütün bu hareketli parçaları nasıl bir araya getireceğimi anlatan bir zamanım var. Şimdiye kadar, hepsini bir araya getiren bir öğretici (ya da öğreticilerden oluşan bir kombinasyon) bulamadım. İşte

ben gerekenler: Benim MVC görünümü içinde

• bir kalıcı açan bir düğme bulunur. (Bu iyi çalışıyor.)
• Model açıldığında, birkaç metin alanı ve açılır menü içeren bir form içerir. Her biri gereklidir. (Alanları gerekli yapmak için, bunları normalde bir MVC formunda yaptığım gibi bu görünümün modelinde tanımlayabilir miyim? Veya jQuery'deki gereksinimleri nasıl oluştururum?)
• Kullanıcı formu göndermeyi denerse ve boş veya geçersiz, modal açık kalır ve doğrulama mesajları görünür. (Anladığım kadarıyla, bu benim için original question, bu mod nedeniyle düz MVC kullanarak mümkün değildir ve bazı jQuery gereklidir. Burada kayboldum.)
• Kullanıcı formu ve tüm göndermeyi denerse Alanlar geçerlidir, sonra modal kapanır, biz denetleyiciye çarparız ve alanları db'ye kaydederiz.

DÜZENLEME (jQuery dışına kaçmak ve sadece nihai mantığı işlemek için normal bir denetleyici vurmak nasıl emin olun.):

Yardımlarınız için, Jason teşekkür ederiz! Önerilerinize göre, işte bu şekilde çalışıyorum.

Veli Görünüm:

modal:

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

Kısmi View (zayıflayan):

burada ardından

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

Ve komut var

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

Denetleyici:

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

     return PartialView("_AccountProfileEdit", model); 

    } 

Answer 1

Sen tutmaya Modelinizdeki

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

veri annotaions birlikte kısmi bir görünüm yerleşik MVC doğrulama komut dosyalarını kullanabilirsiniz senin modal form.

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

Sonra modal kutuda bu başvuru. Sadece sadece kullanabilirsiniz sonra boş bir form istiyorsanız

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

:

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

eylem için id parametresini kullanır Eğer önceden doldurulmuş bir model istiyorsanız bir eylem işlemek gerekir modeli

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

    return PartialView("_AccountProfileEdit", model); 
} 

AJAX SONRASI

almak ve doldurmak

Şimdi bu formu göndermek için AJAX'a ihtiyacınız olacak. Standart bir form gönderimine güveniyorsanız, tarayıcı sayfanızdan uzaklaşır (ve modalınızı kapatır).

$("#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); 
     } 
    }); 
}); 

Form içeriğin daha sonra değiştirilebilir, çünkü teslim olay için olay temsilci $(staticParent).on(event, target, handler) kullanmak gerekir.

Mesaj Eylem

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

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

    return PartialView("_AccountProfileEdit", model); 
} 

İstemci tarafı doğrulama komut şimdiye göndererek engel olmalıdır. Ama eğer bir şekilde başarısız olursa veya müşteri üzerinde bir şeyi doğrulayamıyorsanız, o zaman ModelState.IsValid numaranız var demektir. Ayrıca sunucu tarafını manuel olarak geçersiz kılabilirsiniz.

_AccountEditSuccess.cshtml

Ve "başarı" kısmi görünümü. Doğru, bir Başarısız

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

Geçerli Değildir? AJAX başarı işleyicisi itibaren

Eğer

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

sahip Ama burada sorun, bir "başarı" ya da "Doğrulama hatası" alıyorsanız eğer biz bilmiyoruz olduğunu. Bir error: function(err){ } işleyicisinin eklenmesi, doğrulama hatasının bir HTTP 200 yanıtı olarak kabul edilmesinden dolayı yardımcı olmaz. Her iki durumda da div içeriği değiştirilir, kullanıcı modalın manuel olarak kapanması gerekecektir.Orada her iki durumu ayırt etmek için ek veri iletmek için yollar vardır, ancak başka bir uzun cevaplama sonrası.

Answer 2

yerine partialView render, modal div içinde bir iframe koymak, kalıcı bölüm Gönderdiğiniz basit sayfaları geliştirmek aynı şekilde gelişebilir bu şekilde düşünün, model , gerekli vb ...

bu şekilde:

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