Ajax.BeginForm update partial view with error from model

I’m trying to create a register user form using Ajax.BeginForm which is itself in a partial view.

So on the main index page i have

@Html.Partial("_RegisterPage")

and the _RegisterPage has the following Ajax.BeginForm function:

<div id="registerUserDiv">
    @using (Ajax.BeginForm("Register", "Account", null,
    new AjaxOptions
    {
        HttpMethod = "POST",
        UpdateTargetId = "registerUserPopup",
        OnSuccess = "RegisterSuccess(data)",
        OnFailure = "RegisterFailed"
    },
    new { @class = "form-horizontal", target = "_self" }))

    ... registering user logic here...

When this fails for whatever reason, i would like the page to refresh showing the validation errors, so i have set the div just above the Ajax.BeginForm (i have also tried giving a div name on the index page to surround the @Html.Partial page – e.g. @Html.Partial(“_RegisterPage”)) to be the UpdateTargetId value.

In the controller i have

    public async Task<ActionResult> Register(RegisterViewModel model)
    {
        if (ModelState.IsValid)
        {
            .. logic here
        }

        return PartialView("_RegisterPage", model);
    }

Which should return the same partial view which is called from the index page.

However, doing the above causes the updated partial view to be blank with no data.

I have tried returning a normal view (just to test) and i can see that it does render correctly, but using a partial view always returns blank.

Is there something i’m missing from this setup that’s causing my partial page (with validation error information) from loading correctly?


Source: ajax

Leave a Reply