Databases
StackOverflow2013
Postsdbo
POMVC 4 Modal window, partial view and validation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMVC 4 Modal window, partial view and validation
    text
    copied!<p>I'm using MVC4 &amp; Entity Framework to develop a web application. I have a table which enumerates all the persons I have in my DB. For each of them, I can edit their info throught a modal window which is a Partial View. However, when I put some wrong information, my application redirects me to my partial view. What I wanted to do is to display the errors <strong>into</strong> my modal window.</p> <p>My action : </p> <pre><code>[HttpGet] public ActionResult EditPerson(long id) { var person = db.Persons.Single(p =&gt; 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 &gt; 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); } </code></pre> <p>My partial view : </p> <pre><code>@model BuSIMaterial.Models.Person &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt; &lt;h3 id="myModalLabel"&gt;Edit&lt;/h3&gt; &lt;/div&gt; &lt;div&gt; @using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post, new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "POST", UpdateTargetId = "table" })) { @Html.ValidationSummary() @Html.AntiForgeryToken() @Html.HiddenFor(model =&gt; model.Id_Person) &lt;div class="modal-body"&gt; &lt;div class="editor-label"&gt; First name : &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.TextBoxFor(model =&gt; model.FirstName, new { maxlength = 50 }) @Html.ValidationMessageFor(model =&gt; model.FirstName) &lt;/div&gt; &lt;div class="editor-label"&gt; Last name : &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.TextBoxFor(model =&gt; model.LastName, new { maxlength = 50 }) @Html.ValidationMessageFor(model =&gt; model.LastName) &lt;/div&gt; &lt;div class="editor-label"&gt; National number : &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.NumNat, new { maxlength = 11 }) @Html.ValidationMessageFor(model =&gt; model.NumNat) &lt;/div&gt; &lt;div class="editor-label"&gt; Start date : &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.TextBoxFor(model =&gt; model.StartDate, new { @class = "datepicker", @Value = Model.StartDate.ToString("yyyy/MM/dd") }) @Html.ValidationMessageFor(model =&gt; model.StartDate) &lt;/div&gt; &lt;div class="editor-label"&gt; End date : &lt;/div&gt; &lt;div class="editor-field"&gt; @if (Model.EndDate.HasValue) { @Html.TextBoxFor(model =&gt; model.EndDate, new { @class = "datepicker", @Value = Model.EndDate.Value.ToString("yyyy/MM/dd") }) @Html.ValidationMessageFor(model =&gt; model.EndDate) } else { @Html.TextBoxFor(model =&gt; model.EndDate, new { @class = "datepicker" }) @Html.ValidationMessageFor(model =&gt; model.EndDate) } &lt;/div&gt; &lt;div class="editor-label"&gt; Distance House - Work (km) : &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.HouseToWorkKilometers) @Html.ValidationMessageFor(model =&gt; model.HouseToWorkKilometers) &lt;/div&gt; &lt;div class="editor-label"&gt; Category : &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.DropDownList("Id_ProductPackageCategory", "Choose one ...") @Html.ValidationMessageFor(model =&gt; model.Id_ProductPackageCategory) &lt;a href="../ProductPackageCategory/Create"&gt; Add a new category?&lt;/a&gt; &lt;/div&gt; &lt;div class="editor-label"&gt; Upgrade? : &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.EditorFor(model =&gt; model.Upgrade) @Html.ValidationMessageFor(model =&gt; model.Upgrade) &lt;/div&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button class="btn btn-inverse" id="save" type="submit"&gt;Save&lt;/button&gt; &lt;/div&gt; } &lt;/div&gt; </code></pre> <p>My script which is in the Index view : </p> <pre><code> $('.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'); }); }); </code></pre> <p>Also, as you can see, I have put a size for my textboxes but in my modal, it seems to not be taken into account. Any ideas for these issues?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload