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 third tab opens up with the result of the submit from the post back. I am a little unsure how I would go about doing this? Here is my tab control so far…

<script type="text/javascript">
    $(function () {
        $("#searchPatient").tabs();
    });
</script>
<div id="searchPatient" style="display:inline; float:inherit">
    <ul>
        <li><a href="#searchByMRN">Search By MRN</a></li>
        <li><a href="#searchByDemographics">Search By Demo</a></li>
        <li><a href="#retTable">Return Table</a></li>
    </ul>
    @Html.Partial("_SearchByMRN")
    @Html.Partial("_SearchByDemographic")
    @Html.Partial("_RetTable")


</div>

as you can see, the setup I have is kind of simple. Each of those Partial calls has the partial view in it with the divs for the tabs. I am guessing in the script on this page, I would need to disable the traditional submit functionality, and instead just show the 3rd tab (retTable). Not sure what event’s I would need to look for? Any ideas on how I can get started on this? Any examples of something similar?

UPDATE:
Good afternoon gentlement. This tab control works perfectly, but I am trying to extend it abit…
I want to send JSON data back to the retTable, and append a table in the final tab… I thought if I changed my Controller method to return JSON back to the page…

public ActionResult SearchByMRN(SearchByMRNModel searchByMRN)
        {

            //Have to flesh this out more... Will return JSON result set back to SearchPatient View
            //Can pull right out of old project... Shouldn't be a major problem...
            //ImportPopulationManagementDLL's      
            string UID = HttpContext.User.Identity.Name;
            DataRepository dr = new DataRepository();
            List<SelectListItem> retVal = dr.SearchByMRN(searchByMRN, UID);
            return Json(DataRepository.searchPatientJSonStr(retVal), JsonRequestBehavior.AllowGet);// PartialView("_RetTable");
        }

I have this Script in the original view that is rendered (the one that calls the .tabs() function

<script type="text/javascript">
    $(function () {
        $("#searchPatient").tabs();
    });
    function switchToResultTab(data) {
        $('a[href="#retTable"]').click();
        debugger;
        $("#list").setGridParam({
            datatype: 'jsonstring',
            datastr: data,
            caption: 'Patient Search Result'
        }).trigger("reloadGrid");
    }

    function failToTab(data) {
        alert("");
        $("list").setGridParam({
        datatype:'jsonstring',
        caption: 'Patient Search Result',
        datastr:data
        }).trigger("reloadGrid");
    }
</script>

I figured that It would be pretty simple, but somehow or the other, the ajax function just keeps asking me to save the JSON file… Which I feel is just a pain in the rear.
Also, how would you have a loading gif when calling Ajax.BeginForm… I bet there is a loading field. Let me double check…

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