如何实现< ul>导航标签的行为类似于< a data-toggle ="tab" href ="#">在MVC中? [英] How to implement <ul> nav-tabs to behave like <a data-toggle="tab" href="#"> in MVC?

问题描述

我想像<a data-toggle="tab" href="#">一样实现我的<li class="active">@Html.ActionLink("CAN", "Emp", "Home", new { @CountryId = "1" }, new { @class = "LinkId" })</li>.当前，如果我选择任何Tab，则仅显示CAN.如何更改它.

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

查看

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

推荐答案

您已经完成了几乎所有需要的工作-在这种情况下，您不需要服务器端编程即可获得所需的结果，只需在您的脚本中使用Javascript或jQuery案件.

You already did almost everything you need - in this case you don't need server-side programming to achieve the wanted result, just use Javascript or jQuery in your case.

我不知道您到底想实现什么，但是您可以尝试以下代码段.

I don't know what exactly would you like to achieve, but you can give a go with the following code snippets.

查看

<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 ="#">在MVC中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！