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

Second Answer

Put your two forms in Html.BeginForm:

@using (Html.BeginForm("SearchByMRN",
                       "SearchController",
                       FormMethod.Post,
                       new
                       {
                           id = "formSearchByMRN"
                       }))
{
    @*Form content goes here*@
    Search
}

ControllerAction:

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

    return PartialView("_RetTable");
}

Do above again for your second search form.

Submit form via ajax:

$('#formSearchByMRN, #searchByDemographics').submit(function () {
    if ($(this).valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $('#retTable').html(result);
                switchToResultTab();
            }
        });
    }
    return false;
});


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

But I prefer my previous answer using Ajax.BeginForm, it seems more comfortable to me.