Jquery UI tabs switch on submit event (asp.net MVC 3) returning JSON to final Tab

Question

I have a page with a jqueryUI tab on it. I have 3 tabs. The first two tabs have two separate forms You can submti one or the other but not both. When you submit one Form, the

Answer 1

Put your two forms in Ajax.BeginForm:

@using (Ajax.BeginForm("SearchByMRN",
                       "SearchController",
                       new AjaxOptions
                       {
                           HttpMethod = "POST",
                           InsertionMode = InsertionMode.Replace,
                           UpdateTargetId = "retTable",
                           OnSuccess = "switchToResultTab()"
                       },
                       new
                       {
                           id = "formSearchByMRN"
                       }))
{
    @*Form content goes here*@
    Search
}

EDIT

This will render following HTML output:

...

The OnSuccess-Method will be called when the post has been successfully completed.

ControllerAction:

[HttpPost]
public ActionResult SearchByMRN(Searchmodel searchmodel)
{
    /* Perform serach */

    return PartialView("_RetTable");
}

Do above again for your second search form.

MVC will replace result tabs content with the search result, you then need a javaScript function to switch tabs on success:

function switchToResultTab() {
    $('a[href="#retTable"]').click();
}