ASP.NET MVC PartialView does not highlight validation markup

Question

I created a partial view in an MVC 3 application. This view has a strongly typed model as follows:

public class ProductViewModel { [Required, Display(Name = "Product price")] public decimal? ProductPrice { get; set; } ... } 

In my action method, I call a PartialView method like this

 PartialView("ProductViewModel", products[0]); 

But on the page I do not see the markup for the verification logic, but nothing happens if there are errors on the page. If I use this partial view as an editor template, it works. Any help is appreciated.

Edit: To be more specific, I have an HTML form and I want to add markup to it using an ajax update (if the user clicks a button, I want to add a new markup to this form). If I enable these controls statically, I mean, if I create them when the page loads, the check is done, but if I add the controls to this form with ajax call, no check mark will be inserted for these controls . My partial view is as follows:

 @Html.LabelFor(x => x.ProductPrice) @Html.TextBoxFor(x => x.ProductPrice) @Html.ValidationMessageFor(x => x.ProductPrice) 

My form is as follows:

 @using (Html.BeginForm()) { <div id="div_Products"> @Html.EditorFor(x => x) </div> <input type="submit" value="Compare" /> } 

The above code works well, validation works. On the server side, I call an action method that looks like this:

 [HttpPost] public ActionResult InsertProduct() { var newProductVM = new ProductViewModel{ ProductPrice = 789 }; return PartialView("~/Views/Nutrition/EditorTemplates/ProductViewModel.cshtml", newProductVM); } 

I realized that the MVC engine only inserts this check markup if it detects that the controls are inside the form control. When I try to update my form control using an ajax call, MVC cannot know that they will be placed inside the form element and why it does not emit any validation logic for them. I guess.

Answer 1

Put this at the top of the partial view and you will get a validation message displayed in the html output:

 if (this.ViewContext.FormContext == null) { this.ViewContext.FormContext = new FormContext(); } 

If you use ajax to add form fields, you can activate new fields to add to the validation as soon as they have been added to the DOM / page, using something like:

 $("form").removeData("validator"); $("form").removeData("unobtrusiveValidation"); $.validator.unobtrusive.parse("form"); 

EDIT / UPDATE (Fed 23, 2013): I just hacked the FormContext partial view for the first time in Visual Studio 2012, and it seems like with the latest versions of jQuery and Validation, etc. I do not need to add 3 lines of javascript (above) to verify working dynamically on ajax, which is great!

Answer 2

In a partial view, add this (C # / Razor):

 @Html.ValidationMessageFor(model => model.ProductPrice) 

Answer 3

Not sure if this is still a problem for you, but a solution would have to call:

 $.validator.unobtrusive.parse($('#your-new-form-div')); 

after you have loaded the markup / form elements via AJAX. This analyzes your new form elements and creates a client check that you specify in your submission.

Answer 4

Have you enabled unobtrusive validation in web.config or the view itself?

in web.config:

 <configuration> <appSettings> <add key="ClientValidationEnabled" value="true"/> <add key="UnobtrusiveJavaScriptEnabled" value="true"/> </appSettings> </configuration> 

or inside the code:

 HtmlHelper.ClientValidationEnabled = true; HtmlHelper.UnobtrusiveJavaScriptEnabled = true; 

Answer 5

Using client validation, you can re-validate items loaded after the page loads. Since MVC now uses jQuery validation, if you have client validation enabled,

jquery validate - field check in pageload

It might help you.