Question

I want to implement my <li class="active">@Html.ActionLink("CAN", "Emp", "Home", new { @CountryId = "1" }, new { @class = "LinkId" })</li> like <a data-toggle="tab" href="#">. Currently, If I am selecting any Tab it is showing CAN only. How to change this.

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

View

@model EmpWebsite.Models.Home.ClsHome      

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

partial

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

Script

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

如何实现<ul>导航选项卡的行为类似于<a data-toggle="tab" href="#"> in MVC?

1 个答案: