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?

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.