jquery - Why my partial is rendering 2 times in MVC?

Question

I have a partial which initially renders when the page first loads. And then When I click on nav-tab, it creates another set of partial inside my View. It should update the same partial without creating a new set of it.

Controller

public ActionResult Index()
{
    ClsHome model = new ClsHome();

    return View(model);
}

public PartialViewResult EmployeeBasedCountry(int CountryId)
{
    ClsHome clshome = new ClsHome();
    clshome.Country = CountryId;

    clshome.countries = CountryFilter(CountryId);          
    return PartialView("~/Views/Home/_pEmp.cshtml", clshome);
}

View

@model EmpWebsite.Models.Home.ClsHome      

<div id=Partial class="col-md-5">                 
   @Html.Partial("_pEmp")
</div>

Partial

@model EmpWebsite.Models.Home.ClsHome  
<ul class="nav nav-tabs nav-justified">
    <li class="active">@Html.ActionLink("Australia", "EmployeeBasedCountry", "Home", new  @CountryId = "1" },new{@class = "ActionLinkId"})
    </li> 
    <li>@Html.ActionLink("New Zealand", "EmployeeBasedCountry", "Home", new {@CountryId = "2" },new{@class = "ActionLinkId"})</li>       
</ul>

<div class="tab-content">
    <div class="panel">
        <table class="table-striped">
            <tr class="heading">
                <th>
                    EmpId
                </th>
                <th>
                    EmpName
                </th>
            </tr>

            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @item.EmpId
                    </td>
                    <td>
                        <a>@item.EmpName</a>
                    </td>
                </tr>
            }
        </table>
    </div>
</div>

Script

$(document).on("click", '.ActionLinkId', function (e) {
            e.preventDefault();
            $.ajax({
                url: $(this).attr("href"),        
            type: "GET",
        }).done(function (partialViewResult) {
            debugger;
            $("#Partial").html(partialViewResult);
        });
        });

Answer 1

The fact that you have class=col-md-5 implies this is not all of your HTML in the view.

While it's useful to provide a cut-down snippet, this could be the cause of getting "two contents" when reloading via ajax - especially if you have a bootstrap modal dialog or similar. I suggest in the first case to reduce the html to the bare minimum.

The reason your tabs are not updating is because you are replacing too much. You are including the tabs in your PartialView so they are being overwritten when you replace them. So what happens is:

• initial render
• click on li - bootstrap selects it (so you see it for a moment)
• your ajax GET code runs
• the li is overwritten with your hardcoded li class=active (so resets back)

The key is to move the navigation to outside the content, ie:

View: @model EmpWebsite.Models.Home.ClsHome

<ul class="nav nav-tabs nav-justified">
    <li class="active">@Html.ActionLink("Australia", "EmployeeBasedCountry", "Home", new  CountryId = "1" }, new { @class = "ActionLinkId" })
    </li> 
    <li>@Html.ActionLink("New Zealand", "EmployeeBasedCountry", "Home", new { CountryId = "2" }, new { @class = "ActionLinkId"})</li>       
</ul>

<div class='col-md-5'>
    <div class="tab-content">
        <div class="panel">
            <div id="Partial">
                @Html.Partial("_pEmp")
            </div>
        </div>
    </div>
</div>

Partial

@model EmpWebsite.Models.Home.ClsHome  
<table class="table-striped">
    ...

then your "navigation" remains on the page and is not reloaded/reset each time.

An alternative to would be to set the "active" only on the correct li, but that gets messy and mixes separation of concerns (your partial should be concerned only with rendering the content, not the navigation).