MVC 4 Kipsel pencere, kısmi görünüm ve doğrulama

Question

Web uygulaması geliştirmek için MVC4 & Entity Framework kullanıyorum. Benim DB'mdeki tüm kişileri sıralayan bir tablom var. Bunların her biri için, bir Kısmi Görünüm olan bir modal pencereden edindikleri bilgileri düzenleyebilirim. Ancak, bazı yanlış bilgiler verdiğimde, uygulamam beni kısmi görüşüme yönlendiriyor. Yapmak istediğim, hatalarını modal pencerem içine görüntülemek.

Benim eylemi:

[HttpGet] 
public ActionResult EditPerson(long id) 
{ 
    var person = db.Persons.Single(p => p.Id_Person == id); 

    ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory); 

    return PartialView("_EditPerson", person); 
} 

[HttpPost] 
public ActionResult EditPerson(Person person) 
{ 

    ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory); 

    if (ModelState.IsValid) 
    { 
     ModelStateDictionary errorDictionary = Validator.isValid(person); 

     if (errorDictionary.Count > 0) 
     { 
      ModelState.Merge(errorDictionary); 
      return PartialView("_EditPerson", person); 
     } 

     db.Persons.Attach(person); 
     db.ObjectStateManager.ChangeObjectState(person, EntityState.Modified); 
     db.SaveChanges(); 
     return View("Index"); 
    } 

    return PartialView("_EditPerson", person); 
} 

Benim kısmi görünümü:

@model BuSIMaterial.Models.Person 

<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Edit</h3> 
</div> 
<div> 

@using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post, 
        new AjaxOptions 
        { 
         InsertionMode = InsertionMode.Replace, 
         HttpMethod = "POST", 
         UpdateTargetId = "table" 
        })) 
{ 

    @Html.ValidationSummary() 
    @Html.AntiForgeryToken() 

    @Html.HiddenFor(model => model.Id_Person) 

    <div class="modal-body"> 
     <div class="editor-label"> 
      First name : 
     </div> 
     <div class="editor-field"> 
      @Html.TextBoxFor(model => model.FirstName, new { maxlength = 50 }) 
      @Html.ValidationMessageFor(model => model.FirstName) 
     </div> 
     <div class="editor-label"> 
      Last name : 
     </div> 
     <div class="editor-field"> 
      @Html.TextBoxFor(model => model.LastName, new { maxlength = 50 }) 
      @Html.ValidationMessageFor(model => model.LastName) 
     </div> 
     <div class="editor-label"> 
      National number : 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.NumNat, new { maxlength = 11 }) 
      @Html.ValidationMessageFor(model => model.NumNat) 
     </div> 
     <div class="editor-label"> 
      Start date : 
     </div> 
     <div class="editor-field"> 
      @Html.TextBoxFor(model => model.StartDate, new { @class = "datepicker", @Value = Model.StartDate.ToString("yyyy/MM/dd") }) 
      @Html.ValidationMessageFor(model => model.StartDate) 
     </div> 
     <div class="editor-label"> 
      End date : 
     </div> 
     <div class="editor-field"> 
      @if (Model.EndDate.HasValue) 
      { 
       @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker", @Value = Model.EndDate.Value.ToString("yyyy/MM/dd") }) 
       @Html.ValidationMessageFor(model => model.EndDate) 
      } 
      else 
      { 
       @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker" }) 
       @Html.ValidationMessageFor(model => model.EndDate) 
      } 
     </div> 
     <div class="editor-label"> 
      Distance House - Work (km) : 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.HouseToWorkKilometers) 
      @Html.ValidationMessageFor(model => model.HouseToWorkKilometers) 
     </div> 
     <div class="editor-label"> 
      Category : 
     </div> 
     <div class="editor-field"> 
      @Html.DropDownList("Id_ProductPackageCategory", "Choose one ...") 
      @Html.ValidationMessageFor(model => model.Id_ProductPackageCategory) <a href="../ProductPackageCategory/Create"> 
       Add a new category?</a> 
     </div> 
     <div class="editor-label"> 
      Upgrade? : 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Upgrade) 
      @Html.ValidationMessageFor(model => model.Upgrade) 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-inverse" id="save" type="submit">Save</button> 
    </div> 
} 

</div> 

Endeksi görünümde

Benim komut dosyası: Gördüğünüz gibi, ben,

 $('.edit-person').click(function() { 
       var id = $(this).data("id"); 
       var url = '/Person/EditPerson/'+id; 
       $.get(url, function(data) { 

        $('#edit-person-container').html(data); 
        $('#edit-person').modal('show'); 

       }); 
     }); 

Ayrıca metin kutularım için bir boyut koy ama modalımda dikkate alınmıyor gibi görünüyor. Bu konular için herhangi bir fikir var mı?

Answer 1

Düzenleme formunun gönderilmesini JavaScript ile yapmanız gerekir, aksi takdirde sizi kısmi görünümünüze yönlendirir.

Böyle bir şey yapabilirsiniz:

$('form.edit').submit(function(e) { 

    e.preventDefault(); 

    $.ajax({ 
     type: 'POST', 
     url: '/Person/EditPerson/' 
     data: { person: $(this).serialize() }, 
     success: function(data) { 

      /* Add logic to check if successful edit or with errors. Or just return true when edit is successful. */ 

      $('#edit-person-container').html(data); 
     } 
    }); 

}); 

Answer 2

manuel html sayfanıza dinamik yüklendi formunuzda doğrulayıcı yangın var. Gereksiz JavaScript önlemek için iletişim kabın içine kısmi bakış içerik yüklemek için görünümdeki Ajax.ActionLink yılında

:

bu deneyin.

@Ajax.ActionLink("AjaxLink", "EditPerson", new { PersonID = model.Id_Person }, new AjaxOptions { UpdateTargetId = "myModalDialog", HttpMethod = "Post",OnSuccess="OpenDialog(myModalDialog)" }) 

<div id="myModalDialog" title="" style="display: none"> 
</div> 

sende JS dosyası

yapmak bu

function OpenDialog(DialogContainerID) 
{ 
    var $DialogContainer = $('#' + DialogContainerID); 
    var $jQval = $.validator; //This is the validator 
    $jQval.unobtrusive.parse($DialogContainer); // and here is where you set it up. 
    $DialogContainer.modal(); 

    var $form = $DialogContainer.find("form"); 
    $.validator.unobtrusive.parse($form); 

    $form.on("submit", function (event) 
    { 
      var $form = $(this); 

      //Function is defined later... 
      submitAsyncForm($form, 
      function (data) 
      { 
        $DialogContainer.modal("hide"); 
        window.location.href = window.location.href; 

      }, 
      function (xhr, ajaxOptions, thrownError) 
      { 
        console.log(xhr.responseText); 
        $("body").html(xhr.responseText); 
      }); 
      event.preventDefault(); 
    }); 
} 

//This is the function that will submit the form using ajax and check for validation errors before that. 
function submitAsyncForm($formToSubmit, fnSuccess, fnError) 
{ 
     if (!$formToSubmit.valid()) 
       return false; 

     $.ajax({ 
       type: $formToSubmit.attr('method'), 
       url: $formToSubmit.attr('action'), 
       data: $formToSubmit.serialize(), 

       success: fnSuccess, 
       error: fnError 

     }); 

} 

Answer 3

Bu benim için çalıştı:

//allow the validation framework to re-prase the DOM 
jQuery.validator.unobtrusive.parse();  
//or to give the parser some context, supply it with a selector 
//jQuery validator will parse all child elements (deep) starting 
//from the selector element supplied 
jQuery.validator.unobtrusive.parse("#formId"); 
// and then: 
$("#formId").valid() 

Here

Answer 4

Alındığı aşağıdaki senaryoyu eklediniz kısmi içeren düzeni veya görünümü için? jquery.unobtrusive-ajax.min.js. Bu, eşzamansız istekler için gereklidir ve varsayılan olarak eklenmez, ancak Script altında yeni bir çözümün içinde bulunur.