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*@
    <button id="btnFormSearchByMRN" type="submit">Search<button>
}

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.

Answer 2

If I remember correctly, you can select jQuery UI tab from the URL. If you browse to the same page but with a hash #retTable added to page URL, Return Table tab will be selected. So if the page URL is localhost/Patient/Search, you can use localhost/Patient/Search#retTable to open the third tab.

Since you need to do that in a postback, form's action should contain the hash. Here's an example on how to do that: ASP.NET MVC - Post form to html bookmark?

Answer 3

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*@
    <button id="btnFormSearchByMRN" type="submit">Search<button>
}

EDIT

This will render following HTML output:

<form method="post" id="formSearchByMRN" data-ajax-update="#retTable" data-ajax-success="switchToResultTab()"
data-ajax-mode="replace" data-ajax-method="POST" data-ajax="true" action="/SearchController/SearchByMRN" novalidate="novalidate">...</form>

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();
}