ASP.NET MVC PartialView doesn't emit validation markup

Question

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

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

        set;
    } ...
}

In my action method I invoke the PartialView method like this

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

But on the page I cannot see any markup for the validation logic however and nothing happens if any errors are 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 via ajax update (if th e user clicks on a button, I want to add new markup to that form). If I include those controls statically, I mean if I render them when the page gets loaded, validation works but if I add controls to that form by an ajax call, no validation markup is inserted for those controls. My partial view looks like this:

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

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

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

My form looks like this:

@using (Html.BeginForm())
{
    <div id="div_Products">
        @Html.EditorFor(x => x)
    </div>

    <input type="submit" value="Compare" />
}

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

[HttpPost]
public ActionResult InsertProduct()
{
    var newProductVM = new ProductViewModel{ ProductPrice = 789 };

    return PartialView("~/Views/Nutrition/EditorTemplates/ProductViewModel.cshtml", newProductVM);
}

I figured out that the MVC engine inserts those validation markup only if it finds that the controls are inside a form control. When I try to update my form control via an ajax call, MVC has no way to know that they will be placed inside a form element and that's why it doesn't emit any validation logic for them, I suppose.

Answer 1

Put this in the top of your partial view and you will get the validation message rendered into the html output:

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

If you are using ajax to add the form fields you can trigger the new fields to get added to the validation, once they've been added to the DOM/Page using something like:

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

EDIT/UPDATE (23 Fed 2013): I've just hacked the FormContext of a partial view for the first time in Visual Studio 2012 and it seems that with the latest versions of jQuery and Validation etc I don't need to add the 3 lines of javascript (above) for the validation to work dynamically over ajax which is great!

Answer 2

In your Partial View, add this (C#/Razor):

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

Answer 3

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

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

after you have loaded the form markup/controls through AJAX. This parses your new form elements and creates the clientside validation you have specified in your view.