Question

我有一个局部，最初在页面首次加载时呈现。然后，当我单击nav-tab时，它将在视图内创建另一组partial。它应该更新相同的部分，而不创建新的部分。

控制器

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

查看

@model EmpWebsite.Models.Home.ClsHome      

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

部分

@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>

脚本

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

Answer 1

您拥有class=col-md-5的事实表明，这并不是视图中HTML的全部。

尽管提供一个简短的片段很有用，但这可能是通过ajax重新加载时获得“两个内容”的原因-尤其是在您具有引导模式对话框或类似内容的情况下。我建议在第一种情况下将html减少到最低限度。

选项卡未更新的原因是因为替换过多。您在PartialView中包含了这些选项卡，因此在替换它们时它们将被覆盖。所以发生的是：

初始渲染
点击li-引导程序将其选中（您稍后会看到它）
您的ajax GET代码运行
li被您的硬编码li class=active覆盖（因此重新设置）

关键是将导航移到内容的之外，即：

查看： @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>

部分

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

然后，您的“导航”将保留在页面上，并且不会每次都重新加载/重置。

一种替代方法是仅在正确的li上设置“活动”，但这会造成混乱并且混合了关注点的分离（您的部分关注点仅应与呈现内容有关，而与导航无关）。

Answer 2

在这种情况下，原因必须是返回视图而不是部分视图。在您的情况下，视图将带有布局代码。

尝试添加新视图并将其作为部分视图进行检查，将代码复制到该视图中，它必须可以工作。

为什么我的局部文件在MVC中渲染2次？

2 个答案: