Question

I’ve this structure

View

    Html.RenderPartial (1)

    Html.RenderPartial (2)

Then in each one of those Partial Views I have

 @Ajax.ActionLink("Edit", "EditMethod", null, new AjaxOptions
               {
                   HttpMethod = "POST",
                   InsertionMode = InsertionMode.Replace,
                   UpdateTargetId = "divEditContent"
               }, new { @class = "my-edit" })

And when clicked it renders another partial,replacing the div “divEditContent” with something like:

public PartialViewResult EditContactInformation()
{
    return PartialView("_MyEdit", GetDetails());
}

_MyEdit partial has something like:

    @using (Ajax.BeginForm("SaveContactInformation", "MyBsol", new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "divContactInformationContent"
    }))
    {
     <script type="text/javascript">
            $(function () {
                $('form#ajaxForm').find('a.submit-link').click(function () {
                    $('form#ajaxForm').submit();
                });
            })
        </script>
    <a href="#" class="submit-link">Save</a>
    @Ajax.ActionLink("Cancel", "CancelEdit", null, new AjaxOptions
                           HttpMethod = "POST",
                           InsertionMode = InsertionMode.Replace,
                           UpdateTargetId = "divContent"
                       }, new { @class = "my-cancel" })
     @Html.TextBoxFor(model => model.Title, new { @class = "txt-input", placeholder = "Eg. Mr, Mrs, Ms" })
    @Html.ValidationMessageFor(model => model.Title)
    }

The problem is that data-val atttributes are not rendered for the input, BUT if I put the last partial (_MyEdit) where the Ajax.ActionLink (1) it DOES render them.

Is this a bug? Any workaround?
Thanks in advance! Guillermo

UPDATE

I’ve found something really interesting, if I go (in Chrome or Firefox with Firebug) and click on View Source I don’t see data-val attributes, but if I click on Inspect Element I see them..weird…

Answer 1

If you want the data validation tags to be there, you need to be in a FormContext. Hence, if you’re dynamically generating parts of your form, you need to include the following line in your partial view:

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

You then need to make sure you dynamically rebind your unobtrusive validation each time you add/remove items:

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