MVC 4 Validation with a partial view

Asked by
I'm using MVC 4 and Entity Framework to develop a web app. I'm working with partial views which are loaded with javascript. One of them is a create view which includes validation. And that's my problem : the validation. I have a custom validation logic and, for example, if a user enters some numbers into a field such as "Name", it displays an error.

Here, with the partial views, it redirects me on my partial with the errors displayed but what I wanted to do is to stay on my main view (Index view) and keep my partial view which displays the errors.

Here is my partial view :

@model BuSIMaterial.Models.Person

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@using (Html.BeginForm()) {
 @Html.ValidationSummary(true)
 <fieldset>
 <legend>Person</legend>

 <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.TextBoxFor(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", @placeholder="yyyy/mm/dd"})
 @Html.ValidationMessageFor(model => model.StartDate)
 </div>

 <div class="editor-label">
 End date : 
 </div>
 <div class="editor-field">
 @Html.TextBoxFor(model => model.EndDate, new { @class = "datepicker", @placeholder = "yyyy/mm/dd" })
 @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 class="form-actions"> <button type="submit" class="btn btn-primary">Create</button> </div> </fieldset> } @section Scripts { @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/jqueryui") @Styles.Render("~/Content/themes/base/css") }
In my view Index, I have this :

<input type="button" value="New person" class="btn create"/>
<div id ="create_person"></div>
And the way I load my Partial View :

$(".create").click(function () {

 var url = '/Person/CreatePerson';
 $("#create_person").load(url);

});
The actions :

public ActionResult CreatePerson()
{
 ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name");
 return PartialView("_CreatePerson");
}

//
// POST: /Person/Create

[HttpPost]
public ActionResult CreatePerson(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(person);
 }

 db.Persons.AddObject(person);
 db.SaveChanges();
 return RedirectToAction("Index");
 }

 return PartialView(person);
}
Any idea to include the validation without redirecting to my Partial View?

Best Answer

Answer by
If you post the page it will not come back to the dynamically loaded partial view. Try to make a ajax call to /Person/CreatePerson. Besides unobtrusive validation will not work easily with dynamic content. check the link http://stackoverflow.com/questions/9321040/unobtrusive-validation-on-dynamically-added-partial-view-not-working

Your Answer

Name:
Answer: