如何根据 ViewBag 的值调用 javascript 方法

Posted 2023-02-26

【中文标题】如何根据 ViewBag 的值调用 javascript 方法

【英文标题】：How to invoke javascript method based on a Value of ViewBag

【发布时间】：2017-06-19 17:07:14

【问题描述】：

我正在开发小型 mvc 应用程序，在我的视图中有一个选项卡控件，它有 3 个选项卡，根据 ViewBag 值我需要打开我的第三个选项卡，这是我的视图外观的图像：

因此，当加载 View 时，我需要检查 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，所以如果有一个值，那么我将加载包含 TAB3 的 HTML 来拥有 class="active"（请阅读详细代码）。

但不幸的是，使用这种方法，TAB3 变得活跃但也不是 OPENED，因此它的内容不可见，它被准确地保留在 TAB1 上，而 TAB3 看起来像是活跃的，这很糟糕 :( .

所以我所做的是：

我编写了应该真正打开 TAB3 的 javasscript 方法，但我不知道如何调用它，所以我想我可以在我的 li 元素上使用 onload 方法调用它，所以你们可以在代码中看到上面我写在我的李上

onload="RedirectToTab();"

但不幸的是什么也没发生..

这是我的 RedirectToTab javascript 方法的定义：

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

那么各位，我该如何根据我的 ViewBag 的值打开 TAB3？

谢谢大家 干杯

【参考方案1】：

只需使用 razor 引擎在 javascript 中输出您的 ViewBag 值：

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

现在您可以从准备好的文档中调用它：

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

【讨论】：

是的，我之前尝试过，但是如何在 View 加载之前从 html 调用 RedirectToTab 方法？我尝试添加<script> RedirectToTab(); </script>，但不幸的是没有奏效:)

我之前尝试过这种方法并且它正在工作，但是当视图被加载时，它会加载 TAB1，因为它默认是活动选项卡，之后它会跳转到 TAB3，我想对用户隐藏它加载视图时转到 tab1，然后转到 tab3

您可以通过多种方式进行处理。如果您担心标签“跳跃”，您应该处理 CSS 中标签的可见性。

你是什么意思？隐藏一些标签或？

【参考方案2】：

您无需使用 JavaScript 打开选项卡。您可以在 Razor 视图中执行此操作，其好处是在页面加载时看不到活动选项卡从 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>