如何基于ViewBag的值调用javascript方法 [英] How to invoke javascript method based on a Value of ViewBag
问题描述
我正在处理小型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>
如您所见，人们依赖于ViewBag.SuccessBody的值，我尝试加载相应的HTML，因此，如果有值，我将加载包含TAB3的HTML以拥有class="active"(请阅读详细的代码). /p>
但是不幸的是，使用这种方法时，TAB3变为活动状态，但也没有打开，因此它的内容不可见，在TAB1看起来像它处于活动状态时将其保留在TAB1上，这很糟糕:(.
所以我要做的是:
我写了应该真正打开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?
谢谢大家 干杯
您无需使用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>
I'm working on small mvc application, and on my view there is tab control which has 3 tabs, and depending on ViewBag value I need to open my third tab, here is image of a how my view looks:
So when View is loaded, I need to check for a value of my ViewBag and depending on that I need to open my TAB 3, so here is what I've tried:
<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>
As you can see guys depending on a value od ViewBag.SuccessBody I tried to load corresponding HTML, so if there is a value then I would load HTML which include TAB3 To own class="active" (please read code detailed).
But unfortunatelly with this approach, TAB3 becoming active but not also OPENED, so its content is not visible, it's being kept acctually on TAB1 while TAB3 looks like it's active, and that is bad :( .
So what I've done is :
I wrote javasscript method which should really open TAB3, but I couldn't know how to invoke it so I guess I could invoke it using onload method on my li element, so guys as you can see in code above I wrote on my li
onload="RedirectToTab();"
but unfortunatelly nothing happens..
And here is definition of my RedirectToTab javascript method:
function RedirectToTab() {
var customVal = $("#editViewBag").val();
if (customVal == 'True') {
$('#myTab a[href="#tab_content3"]').tab('show');
}
}
So guys one more time, how can I open TAB3 depending on a vaue of my ViewBag?
Thanks guys Cheers
You don't need to use JavaScript to open the tab. You can do it your Razor view which has the benefit of not seeing the active tab switch from 1 to 3 when the page loads. Here is a simple example with 3 tabs:
@{
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>
这篇关于如何基于ViewBag的值调用javascript方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
