partial view coming without validation attributes (ASP.NET MVC 3)

Question

A weird thing keeps happening on one of my ASP.NET MVC 3 apps.

I am fetching insert rows via jQuery Ajax api and there is no problem with that. But when I get the necessary partial view back, it is coming without validation attributes and I am unable to rebind the validation for those rows.

Here is what I get as ajax response:

<input type="hidden" name="accommPropertyPeriods.index" autocomplete="off" value="ccaa15b3-76f1-4215-8bb5-a62d700bfc1e" />
    <table style="width:100%;">
    <tr>
        <td>
            <div class="editor-field">
                <select class="chzn-select-deselect" data-placeholder="Choose an Alias..." id="accommPropertyPeriods_ccaa15b3-76f1-4215-8bb5-a62d700bfc1e__AccommPropertySeasonPeriodAliasID" name="accommPropertyPeriods[ccaa15b3-76f1-4215-8bb5-a62d700bfc1e].AccommPropertySeasonPeriodAliasID" style="min-width:100px;"><option value="302">A</option>
<option value="303">B</option>
<option value="304">C</option>
<option value="305">D</option>
</select>

            </div>
        </td>
        <td>
            <div class="editor-field">
                <input class="datefield" id="accommPropertyPeriods_ccaa15b3-76f1-4215-8bb5-a62d700bfc1e__PeriodStartsAt" name="accommPropertyPeriods[ccaa15b3-76f1-4215-8bb5-a62d700bfc1e].PeriodStartsAt" type="text" value="" />

            </div>
        </td>
        <td>
            <div class="editor-field">
                <input class="datefield" id="accommPropertyPeriods_ccaa15b3-76f1-4215-8bb5-a62d700bfc1e__PeriodEndsAt" name="accommPropertyPeriods[ccaa15b3-76f1-4215-8bb5-a62d700bfc1e].PeriodEndsAt" type="text" value="" />

            </div>
        </td>
    </tr>   
    </table>

Here is what I should be getting :

<input type="hidden" name="accommPropertyPeriods.index" autocomplete="off" value="84ddd0f5-a3e2-4f10-8e67-f32528c6393d" />
    <table style="width:100%;">
    <tr>
        <td>
            <div class="editor-field">
                <select class="chzn-select-deselect" data-placeholder="Choose an Alias..." data-val="true" data-val-number="The field AccommPropertySeasonPeriodAliasID must be a number." data-val-required="The AccommPropertySeasonPeriodAliasID field is required." id="accommPropertyPeriods_84ddd0f5-a3e2-4f10-8e67-f32528c6393d__AccommPropertySeasonPeriodAliasID" name="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].AccommPropertySeasonPeriodAliasID" style="min-width:100px;"><option value="302">A</option>
<option value="303">B</option>
<option value="304">C</option>
<option value="305">D</option>
</select>
                <span class="field-validation-valid" data-valmsg-for="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].AccommPropertySeasonPeriodAliasID" data-valmsg-replace="false">*</span>
            </div>
        </td>
        <td>
            <div class="editor-field">
                <input class="datefield" data-val="true" data-val-required="The PeriodStartsAt field is required." id="accommPropertyPeriods_84ddd0f5-a3e2-4f10-8e67-f32528c6393d__PeriodStartsAt" name="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].PeriodStartsAt" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].PeriodEndsAt" data-valmsg-replace="false">*</span>
            </div>
        </td>
        <td>
            <div class="editor-field">
                <input class="datefield" data-val="true" data-val-required="The PeriodEndsAt field is required." id="accommPropertyPeriods_84ddd0f5-a3e2-4f10-8e67-f32528c6393d__PeriodEndsAt" name="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].PeriodEndsAt" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="accommPropertyPeriods[84ddd0f5-a3e2-4f10-8e67-f32528c6393d].PeriodEndsAt" data-valmsg-replace="false">*</span>
            </div>
        </td>
    </tr>   
    </table>

GUIDs don't have to be the same. I am doing so-called non-sequential binding.

Here is the the action which I am invoking through jquery ajax to get a new insert row:

    [HttpPost]
    public PartialViewResult accommPropertySeasonPeriodCreatePartialView(int id, int subid) {

        //some other stuff going on here. non-related to partial view.

        return PartialView("_AccommPropertySeasonPeriodCreatePartialView");
    }

I am nearly out of my mind to figure out why this is happening. Any idea?

Ferraro

Answer 1

The Html.* helpers such as Html.TextBoxFor, Html.CheckBoxFor, ... emit validation attributes only if used inside a form. So make sure you wrap them in a Html.BeginForm call. As far as client side validation is concerned, you should call the jQuery.validator.unobtrusive.parse method after you update your DOM in order to reapply client validation. And yet another article.

If you don't have a form you can cheat and put the following in the partial:

@model MyViewModel
@{
    ViewContext.FormContext = new FormContext();
}
@Html.EditorFor(x => x.Foo)

Now the helper will emit data-* validation attributes on the input field.

Bael

oww, it is going to be a problem. I already have a form on my primary view. Any other way to get around with this automatically or should I override the Editor templates? – Ferraro

@tugberk, see my update about manually instantiating the FormContext in the partial. – Bael

Awesome! Totally worked. Just to understand it, what exactly this tweak tells the framework (or the templating engine?) so that it understands to emit data-* validation attributes on the input field? – Ferraro

@tugberk, this tells the helpers that they are inside a form :-) Basically inside all html helpers there is a test whether the current ViewContext.FormContext property is null. And they generate data-* attributes only if it is not null. When you use a form this is automatically instantiated but when you don't have a form it is null. – Bael

So cool! I am gonna totally blog about it and steal your sentence :) (by giving you the credit of course) It looks like a hack but you made it sound like a legitimate stuff. Is it? – Ferraro