javascript - 如何在 MVC 中实现 nav-tabs 使其表现得像 ？

Question

我想实现我的 <li class="active">@Html.ActionLink("CAN", "Emp", "Home", new { @CountryId = "1" }, new { @class = "LinkId" })</li>喜欢<a data-toggle="tab" href="#"> .目前，如果我选择任何 Tab它正在显示 CAN仅有的。如何更改此设置。

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

    return View(model);
}

public PartialViewResult Emp(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>

部分

<ul class="nav nav-tabs nav-justified">
      <li>
        @Html.ActionLink("CAN", "Emp", "Home", new { @CountryId = "1" }, new { @class = "LinkId" })</li>
     <li> 
        @Html.ActionLink("FR", "Emp", "Home", new { @CountryId = "2" }, new { @class = "LinkId" })</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", '.LinkId', function (e) {
            e.preventDefault();
            $.ajax({
                url: $(this).attr("href"),        
            type: "GET",
        }).done(function (partialViewResult) {
            debugger;
            $("#Partial").html(partialViewResult);
        });
        });

Answer 1

您几乎已经完成了所需的一切 - 在这种情况下，您不需要服务器端编程来实现所需的结果，只需在您的情况下使用 Javascript 或 jQuery。

我不知道你到底想实现什么，但你可以尝试以下代码片段。

查看

<ul class="nav nav-tabs nav-justified">
  <li>
    <a href="#" class="LinkId" data-toggle="tab" data-url="/home/emp?CountryID=1" data-id="1">CAN</a>
  </li>
  <li>
    <a href="#" class="LinkId" data-toggle="tab" data-url="/home/emp?CountryID=2" data-id="2">FR</a>
  </li>     
</ul>  

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

脚本

$(document).on("click", '.LinkId', function (e) {
            var $link = $(this);
            e.preventDefault();
            $.ajax({
                url: $(this).data("url"),        
            type: "GET",
        }).done(function (partialViewResult) {
            $('.LinkId.active').removeClass('active');
            $link.addClass('active');

            debugger;
            $("#Partial").html(partialViewResult);
        });
 });