MVC 4 Modal Fenster, Teilansicht und Validierung

Question

Ich benutze MVC4 & Entity Framework, um eine Webanwendung zu entwickeln. Ich habe eine Tabelle, die alle Personen auflistet, die ich in meiner Datenbank habe. Für jede von ihnen kann ich ihre Informationen durch ein modales Fenster, das eine Teilansicht ist, bearbeiten. Wenn ich jedoch falsche Informationen eingib, leitet mich meine Anwendung zu meiner Teilansicht weiter. Was ich tun wollte, ist die Fehler in mein modales Fenster anzuzeigen.

Meine Aktion:

[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); 
} 

Meine Teilansicht:

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

Mein Skript, das in der Indexanzeige ist:

 $('.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'); 

       }); 
     }); 

Auch, wie Sie sehen können, ich habe Legen Sie eine Größe für meine Textfelder, aber in meinem modalen scheint es nicht berücksichtigt zu werden. Irgendwelche Ideen für diese Probleme?

Answer 1

Sie müssen die Eingabe des Bearbeitungsformulars über JavaScript bearbeiten, sonst werden Sie zu Ihrer Teilansicht weitergeleitet.

Sie können etwas tun:

$('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

Sie haben manuell den Validator auf dem Formular feuern, die dynamisch in Ihre HTML-Seite geladen wurde.

versuchen Sie dies:

Ihrer Ansicht nach Gebrauch Ajax.ActionLink den Inhalt der Teilansicht in Ihrem Dialog Container zu laden unnötige JavaScript zu vermeiden.

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

in Sie JS-Datei tun dies

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

Das ist für mich gearbeitet:

//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() 

Entnommen Here

Answer 4

Haben Sie hinzugefügt, um das folgende Skript zum Layout oder zur Ansicht mit dem partiellen? jquery.unobtrusive-ajax.min.js. Dies ist für asynchrone Anforderungen erforderlich und wird nicht standardmäßig hinzugefügt, ist jedoch in einer neuen Lösung unter Skripts vorhanden.