Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
206 views
in Technique[技术] by (71.8m points)

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

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);
        });
        });
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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).


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...