MVC 3, (razor) load partial with validation

Question

Hi I'm prototpying an ajax wizard with MVC 3 (razor). An oddity I've notice is when you return a partial view to UpdateTargetId plugs the view in but doesn't add/apply the Unobtrusive JavaScript. If I load the partial view outside the ajax block e.g.

@Html.Partial("Company")

It works perfectly so I'm not missing any of the standard libraries and My web config is all good.

So at the moment I'm little stumped.

My view is the following:

@using(Ajax.BeginForm("Step", "Origination", new AjaxOptions { UpdateTargetId = "stepArea" })){

    <div id="stepArea"></div>
   <input id="btnSubmit" type="submit" value="submit" />
}

Controller:

public ActionResult Step(FormCollection formCollection)
{
    if (this.Request.IsAjaxRequest())
    {
        switch ((TempData["step"] as string))
        {
            case "Company":
                TempData["step"] = "Person";
                return PartialView("Company");

            case "Person":
                TempData["step"] = "Pay";
                return PartialView("Person");

            case "Settlement":
                return PartialView("Pay");

            default:
                TempData["step"] = "Company";
                return PartialView("UserType");
        }
    }
    return View();
}

My Question is can the validation from the partial view be initalised/implemented from the partial refresh?

Answer 1

After reading a few forums and doing some experiments. the final piece of the puzzle, causing the validation to work after returning a partial view. jquery.validate.unobtrusive not working with dynamic injected elements

<script type="text/javascript">

    function validateAjaxForm() {
        $("form").removeData("validator");
        $("form").removeData("unobtrusiveValidation");
        $.validator.unobtrusive.parse("form");
        return $('#form').valid();
    }
</script>


 @{ Html.EnableClientValidation(true); } 
@using (Ajax.BeginForm("Step", "Origination", new AjaxOptions { UpdateTargetId = "stepArea", OnBegin = "return validateAjaxForm();" }, new { id = "form" }))
{
    <div id="stepArea"></div>
    <input id="btnSubmit" type="submit" value="submit" />
}

works perfectly.