View and PartialView with jQuery UI

I divide my space screen with a table in 2 columns. The left one is for the menu the right one for the content. In the right column I use jQuery UI tab. The second tab manage a list of contact, I divide the content of this second tab in 2 columns. The left one is the form to add/update a contact, in the right column it's a grid. The problem when I post the form is on "DetailContactDetail", i tried return View, PartialView, or I get the form full screen without anything. I'd like refresh the content of the tab to see the change in the grid.

Controller :

public ActionResult DetailContact()
{
    ....
    return PartialView("DetailContact", model);
}

public ActionResult SaveContac开发者_如何学JAVAt(CustomerModel model)
{
    .....
    return PartialView("DetailContactDetail");
}

HTML :

<script id="Ready" type="text/javascript">
    $(document).ready(function () {
        var $tabs = $("#tabs").tabs({
            select: function (e, ui) {
                runMethod(ui.index);
            }
        });
    });

    function runMethod(selectedtab) {
        switch (selectedtab) {
            case 0:
                $.post('/Customer/DetailGeneral', function (data) {
                    $('#tabs-1').html(data);
                });
                break;
            case 1:
                $.post('/Customer/DetailContact', function (data) {
                    $('#tabs-2').html(data);
                });
                break;
            case 2:
                $.post('/Customer/DetailAdresse', function (data) {
                    $('#tabs-3').html(data);
                });
                break;
        }
    }
</script>

<table style="width:100%;">
<tr>
    <td style="width:20%;vertical-align:top;">                  
        @Html.Partial("MnuCustomer")
    </td>
    <td style="width:80%;vertical-align:top;">  
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Info</a></li>
                <li><a href="#tabs-2">Contact</a></li>
                <li><a href="#tabs-3">Adress</a></li>
            </ul>
            <div id="tabs-1">@Html.Partial("DetailGeneral", Model)</div>
            <div id="tabs-2"></div>
            <div id="tabs-3"></div>
        </div>

    </td>
</tr>
</table>

The tab content look like this (PartialView "DetailContact.cshtml") look like :

<table style="width:100%;" border="0">
<tr>
    <td style="width:50%;">@Html.Partial("DetailContactDetail",Model)</td>
    <td style="width:50%;">@Html.Partial("DetailContactGrid",Model)</td>
</tr>
</table>

DetailContactDetail and DetailContactGrid are PartialView.

It sounds to me you are not submitting the form via AJAX, which seemed like what you wanted to do. If you don't submit the form via AJAX, you should return the whole page (i.e. the page that you show code snippet), not just PartialView("DetailContactDetail").

In another note, it seems to me that your code with tab can be vastly simplified to the following:

<script id="Ready" type="text/javascript">
    $(document).ready(function () {
        var $tabs = $("#tabs").tabs();
    });
</script>

...

<div id="tabs">
    <ul>
        <li><a href="/Customer/DetailGeneral">Info</a></li>
        <li><a href="/Customer/DetailContact">Contact</a></li>
        <li><a href="/Customer/DetailAdresse">Adress</a></li>
    </ul>
</div>