如何根據ViewBag的值調用javascript方法

我正在處理小型mvc應用程序，並且在我的視圖中有一個具有3個選項卡的選項卡控件，並且取決於ViewBag值，我需要打開第三個選項卡，在這裏是的像我認爲的樣子：如何根據ViewBag的值調用javascript方法

因此被載入視圖時，我需要檢查我的ViewBag的價值，取決於我需要打開我的TAB 3，所以這裏就是我嘗試：

<div class="" role="tabpanel" data-example-id="togglable-tabs"> 
    <ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist"> 
      @if (ViewBag.SuccessBody == null) 
      { 
       <li role="presentation" class="active"> 
        <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">TAB 1</a> 
       </li> 
       <li role="presentation" class=""> 
        <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 2</a> 
       </li> 
       <li role="presentation" class=""> 
        <a href="#tab_content3" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 3</a> 
       </li> 
      } 
      else 
      { 
       <li role="presentation" class=""> 
        <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">TAB 1</a> 
       </li> 
       <li role="presentation" class=""> 
        <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 2</a> 
       </li> 
       <li role="presentation" class="active" onload="RedirectToTab();"> 
        <a href="#tab_content3" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 3</a> 
       </li> 

      } 
    </ul>

正如你所看到的取決於值OD ViewBag.SuccessBody我試圖加載相應的HTML傢伙，所以如果有一個值，則我將加載HTML，其中包括TAB3擁有class="active"（請閱讀詳細的代碼）。

但可惜的是這種方法，TAB3變得活躍，但不也開了，因此它的內容是不可見的，它被acctually保持在TAB1而TAB3看起來像它的活躍，這是不好的:(。

所以我所做的是：

我寫了使用JavasScript方法，它應該真正開放TAB3，但我不知道如何調用它，所以我想我可以使用onload方法我li元素調用它，所以傢伙，你可以在上面的代碼中看到我在我的書寫上

onload="RedirectToTab();"

，但可惜的是沒有任何反應..

這裏是我的RedirectToTab JavaScript方法的定義：

function RedirectToTab() { 
      var customVal = $("#editViewBag").val(); 
      if (customVal == 'True') { 
       $('#myTab a[href="#tab_content3"]').tab('show'); 
      } 
}

所以，球員更多的時間，我怎麼能根據我的ViewBag的vaue打開TAB3？

謝謝你們乾杯

來源

2017-06-19 Roxy' Pro

只需使用剃刀引擎輸出的ViewBag值中的javascript：

$(document).ready(function() { 
    RedirectToTab(); 
});

來源

2017-06-19 17:11:02 mjw

是的，我試過，以前，但我怎麼能稱之爲'RedirectToTab'方法從HTML，查看加載之前？我嘗試添加''但不幸的是，沒有工作:) –

請參閱編輯這個額外的要求。 – mjw

我以前試過這種方法，它是工作，但當視圖加載時，它會加載TAB1，因爲它是默認的活動選項卡，之後它將跳轉到TAB3，我想隱藏用戶它將要加載視圖時tab1然後到tab3 –

：

function RedirectToTab() { 
     var customVal = '@ViewBag.SuccessBody'; 
     if (customVal == 'True') { 
      $('#myTab a[href="#tab_content3"]').tab('show'); 
     } 
}

現在你可以從文檔準備調用此您不需要使用JavaScript來打開選項卡。你可以做到這一點你的剃刀視圖，這有利於在頁面加載時看到從1到3的活動選項卡切換。下面是一個簡單的例子有3個標籤：

@{ 
    string tab1 = null, tab2 = null, tab3 = null; 
    if (ViewBag.SuccessBody == null) 
    { 
     tab1 = "active"; 
    } 
    else 
    { 
     tab3 = "active"; 
    } 
} 
<ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="@tab1"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li> 
    <li role="presentation" class="@tab2"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li> 
    <li role="presentation" class="@tab3"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a></li> 
</ul> 

<div class="tab-content"> 
    <div role="tabpanel" class="tab-pane @tab1" id="tab1"> 
     tab 1 
    </div> 
    <div role="tabpanel" class="tab-pane @tab2" id="tab2"> 
     tab 2 
    </div> 
    <div role="tabpanel" class="tab-pane @tab3" id="tab3"> 
     tab 3 
    </div> 
</div>

來源

2017-06-20 11:22:12 jpishko

如何根據ViewBag的值調用javascript方法

回答

相關問題