在ASP.NET MVC中选择“页面加载时选项卡”

我在Razor页面上有两个标签，我希望能够加载页面并选择页面A或B.目前，页面加载并始终登陆A.我试图按照以下方式执行此操作…

在我的主页视图中，我调用了我的产品视图

 Learn More  

我传递路由值“productB”，所以我可以尝试加载选项卡。 在我的产品控制器中我有

 public ActionResult Index(object id = null) { if (id != null && !String.IsNullOrEmpty()) ViewBag.ActiveTab = id.ToString(); return View(); } 

产品视图

 @{ string activeTab = ViewBag.ActiveTab; } 
 
 
  productA  
 
  productB  
 
 
 
 
 ... 
 
 ... 
 
 
  

与function

 $(function () { var selector = '@activeTab'; $("#" + selector).addClass("active"); // Also tried the following... // var anchor = '@activeTab' || $("a[data-toggle=tab]").first().attr("href"); // $('a[href=' + anchor + ']').tab('show'); }); 

但这不会选择我的标签页。 这看起来很简单，我怎样才能让它发挥作用？

Answer 1

尝试

 $(function () { var anchor = "@Html.Raw(HttpUtility.JavaScriptStringEncode(activeTab))" || $(".nav-tabs a").first().attr("href").replace('#',''); //$('#'+anchor).tab('show'); $('.nav-tabs a[href=#' + anchor + ']').tab('show'); }); 

还要确保已激活选项卡

 $('.nav-tabs a').click(function (e) { e.preventDefault() $(this).tab('show') }) 

JSFiddle演示

Answer 2

首先，您应该将参数类型从object更改为string。 如果你把它保留为对象，当你从ViewBag的剃刀视图中读取它时，你不会得到你期望的字符串（A或B），而是你将获得System.Object

 public ActionResult Index(string id = null) { if (id != null) ViewBag.ActiveTab = id.ToString(); return View(); } 

此外，您应该通过调用该选项卡的锚标记上的tab方法来启用选项卡。 我将标记更改为包含每个锚标记的Id，以便我们稍后可以在jQuery代码中选择元素。

 
 
  productA  
 
  productB  
  

现在，在您的文档准备好之后，使用@activeTab变量值（您已从ViewBag中读取）的值来构建a标记的jQuery选择器表达式并在其上调用show方法。

 $(function () { var selector = '@activeTab'; if(selector) { $("#link-tab"+selector).tab('show'); } });