Question

I am playing about with jQuery UI and PartialViews and have run into a problem I can’t quiet get my head around.

This bit works as I expect:

<div>
    @Ajax.ActionLink("Test Me!", "dialogtest", new { id = Model.Id }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "dialogtest-view" })</td>
</div>
<div id="dialogtest-view">
</div>

this GETs to this action method

[HttpGet]
public PartialViewResult DialogTest(int id)
{
    //pretend to get something from DB here
    var vm = new DialogUITestVM();
    return PartialView("uidialog_partial", vm);
}

And returns me a PartialView which displays in the targeted div. jQuery + jQueryUI is used to pop this div up as a modal dialog. Part 1 of test done!

OK so now let’s say the PartialView returned is just a basic form with a textbox, something along the lines of:

@using (Html.BeginForm("DialogTest", "pages", FormMethod.Post))
{  
    @Html.HiddenFor(x => x.Id)
    @Html.TextBoxFor(x => x.Name)
    <button type="submit">Test Me!</button>
}

This is POSTd back to the controller fine –

[HttpPost]
public ActionResult DialogTest(DialogUITestVM vm)
{
    //arbitrary validation so I can test pass and fail)
    if (vm.Name.Equals("Rob"))
    {
        //error!
        vm.ErrorMessage = "There was an error you numpty. Sort it out.";
        return PartialView(vm);
    }

    //hooray it passed - go back to index
    return RedirectToAction("index");
}

However – if I make the action fail the validation, rather than targeting the PartialView to the div again, it redraws the whole page (which obviously loses the jQuery UI dialog).

What I want is: if validation fails, just update the div that contained the form.

Where am I going wrong?

Answer 1

You could use an Ajax form in your partial instead of a normal form and use a OnSuccess callback in your AjaxOptions:

@using (Ajax.BeginForm("DialogTest", "pages", new AjaxOptions { UpdateTargetId = "dialogtest-view", OnSuccess = "success" }))
{  
    @Html.HiddenFor(x => x.Id)
    @Html.TextBoxFor(x => x.Name)
    <button type="submit">Test Me!</button>
}

and then modify your controller action respectively:

[HttpPost]
public ActionResult DialogTest(DialogUITestVM vm)
{
    //arbitrary validation so I can test pass and fail)
    if (vm.Name.Equals("Rob"))
    {
        //error!
        vm.ErrorMessage = "There was an error you numpty. Sort it out.";
        return PartialView(vm);
    }

    //hooray it passed - go back to index
    return Json(new { redirectUrl = Url.Action("Index") });
}

and of course define the corresponding success callback in your javascript files:

function success(result) {
    if (result.redirectUrl) {
        window.location.href = result.redirectUrl;
    }
}