I am using bootstrap tabs in my ASP.NET MVC project. In this tab, I need to give external link so when users click on particular tab it will redirect to particular link.
Basically I have four controller. Now I need to redirect to each controller when user clicks on tab.
Below is the code I tried to use but it is not working :
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
Update :
If we remove data-toggle="tab", then it will loose tab functionality. I mean when i click on tab, it loads page and redirect. So my question is, can we redirect to other controller without loading page like what we are doing now and make it works like tab?
Just remove the data-toggle="tab" attribute and it will work as you expected.
Demo
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home
</li>
<li>Profile
</li>
<li>Messages
</li>
<li>Settings
</li>
</ul>
Related
I'm stuck with this problem for over 2 hours and can't find the answer anywhere.
I have a project that uses Identity. I have created a register and login not using Identity scaffolded items from the beginning.
Next, I added custom fields to user identity using ApplicationUser:IdentityUSer.
Now I want to allow users to manage their profiles. I wanted to use the default Identity Manager and then customize it. I didn't have it though so I added a new scaffolded Identity with only "Identity/Pages/Account/Manage" item. It has created an area.
The problem is that I don't know how to access the Index page inside this area in my _LoginPartial view.
Part of _LoginPartial code:
#if (SignInManager.IsSignedIn(User))
{
<ul class="navbar-nav flex-grow-1 justify-content-end text-center">
<li class="nav-item mr-5 text-center">
<a //here i want to access Index page class="nav-link btn">Hello, #User.Identity.Name</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Logout">Logout</a>
</li>
</ul>
}
else
{
}
My project structure:
Is this a good way to manage user profile though?
To have your first <a> tag link to your new Account | Manage page, you can include the asp-area, asp-controller and asp-action attributes. (similar to what you already have on your second <a> tag).
Try changing the line to this:
<a asp-area="Identity" asp-controller="Account" asp-action="Manage" class="nav-link btn">Hello, #User.Identity.Name</a>
I am working in Asp.net MVC 5. In shared layout,i am using nav to redirect to Index View of Controller but its not working. showing error Resources cannot found
Following is the code of NAV
<ul class="sidebar navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="~/Controllers/ContractorsController.cs/Index.cshtml">
<i class="fas fa-fw fa-chart-area"></i>
<span>Contractors</span>
In these Controllers i want to redirect to ContractorsControllers
And to Index View of Contractors Controller.
In MVC you cannot directly navigate to View. Use below code.
<a class="nav-link" href="#Url.Action("Index", "Contractors")">
I can't get the anchor Tag helper to work in combination with data-toggle = tag.
I manage to set the active class on the correct tab but my code on my controller will never be run. What am I missing?
<div class="navbar">
<div>
<ul class="nav nav-tabs">
<li class="active"><a asp-controller="Customer" asp-action="Device" asp-fragment="PlantInfo" data-toggle="tab" >Enhetsinformation</a></li>
<li><a asp-controller="Customer" asp-action="Start" data-toggle="tab" >Larm</a></li>
<li><a asp-controller="Customer" asp-action="Start" data-toggle="tab" >Historik</a></li>
<li><a asp-controller="Customer" asp-action="MeterReading" asp-fragment="MeterReading" data-toggle="tab" >Avläsningar</a></li>
<li><a asp-controller="Customer" asp-action="Start" data-toggle="tab" >Ärenden</a></li>
</ul>
</div>
</div>
Tabs are not really supposed to actually hit your controller. The whole point is that you're switching between content on page. The Bootstrap tab javascript is going to prevent the default action of the link such that it doesn't actually take you to a new page, but just loads the reference content area. That's also why the actual href of your tab links should be targets, point to the ids of the various content areas on your page:
Content 1
...
<div id="content1">
Tab content
</div>
If I had to guess at your confusion here, I'd imagine you're thinking that by linking to an actual controller action, that content should be fetched from the server and rendered on the page when you click that tab. That's incorrect and not how Bootstrap tabs work. If you wanted it to function that way, you'd need your own JavaScript to define the tab switching behavior (Bootstrap's code will not work anymore for this) and as part of that, you'd need to issue AJAX requests to fetch that content. That's all on you. It doesn't happen automatically.
I am building a web app with Rails 4 and Bootstrap 3.
In one of the pages, I have the following Bootstrap tabs:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Profile</li>
<li role="presentation"><span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> Billing</li>
<li role="presentation"><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span> Expert</li>
</ul>
and then, the following content in these tabs:
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">
</div>
<div role="tabpanel" class="tab-pane" id="billing">
</div>
<div role="tabpanel" class="tab-pane" id="expert">
</div>
</div>
When I hover any of these tabs, I see that the direct URL is, ie: http://localhost:3000/account/edit#profile, http://localhost:3000/account/edit#billing and http://localhost:3000/account/edit#expert.
However, when I try to link directly to the tab from another page, the active tab is still the first one (not the one I linked to).
Two notes:
I am using Bootstrap tabs "without any JavaScript", as explained in the markdown section in the documentation.
I would like to link to these tabs using Rails link_to helper.
Any idea why this is not working?
I don't think you'll be able to accomplish what you're after without throwing some javascript into the mix, as the tabs are meant for intrapage nagivation, not interpage navigation. Additionally, the href tags aren't even required on those tabs, as it's the data-toggle attribute which controls which tab pane to present.
If adding a small javascript snippet is a viable option, this will switch to the appropriate tab when the page is navigated to.
hash = window.location.hash
$("a[href=#{hash}]").click()
https://jsfiddle.net/tL7sutnt/
You're setting the active tab in the view
<li role="presentation" class="active"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Profile</li>
which is going to take precedence.
If you want this to work, you need to add the active class to whatever tab is being referenced in the url anchor (#expert, in your case)
See this post if you need code reference.
***EDIT:
Since you aren't using js, use the answer at the bottom that dynamically determines the active tab by parsing the request
So I have one page that works perfectly fine, I am actually creating the links programatically and any link to get to the page with the working back button from is fine - I can see the back button no problem, but then I have a drop down that is just UL full of links and the two pages I link to from there don't show the back button.
Here is the top of the working page.
<div data-role="page" id="detailsPage" data-add-back-btn="true">
<div data-role="header">
<h1 id="title"></h1>
</div>
There here is the one that doesn't work.
<div data-role="page" id="calendarPage" data-add-back-btn="true">
<div data-role="header">
<h1 id="title">Calendar</h1>
</div>
Here is the UL that has the link to the calendar page that won't show a back button.
<div class="ui-block-b">
<ul data-role="menu" id="optionsDropDown">
<li>
<span data-role="button" data-icon="arrow-d" data-iconpos="right" data-iconpos="left">Calendar</span>
<ul data-role="listview" data-inset="true">
<li data-icon="false">
Thursday
</li>
<li data-icon="false">
Friday
</li>
<li data-icon="false">
List All Sessions
</li>
<li data-icon="calendar">
<a href="#calendarPage" >Calendar</a>
</li>
<li data-icon="gear">
<a href="#settingsPage" >Settings</a>
</li>
</ul>
</li>
</ul>
</div>
The back button on detailsPage always works, the back button on calendarPage never shows up. I have trolled the site but people seems to have issues when they mess with changeHash which I haven't touched.
Could I be screwing something up in the JS? I can't see anything obvious, I could post my whole JS file but I don't even touch these pages from there or mess with the links or anything. I thought maybe because the display is set to none on that list I just showed you above that it wouldn't work but then I tried changing that - it make no difference if you can see it initially or not. I don't get any errors in the console. I am so stumped at the moment. I hope someone can help.
Thanks
Not sure if it is a possible cause but according to the docs, data-role="button" is only valid on <a>, <button> and <input> type elements. I don't see <span> listed there and wonder if that is affecting your navigation?
There is also no valid data-role="menu" attribute listed.
What version of jQuery Mobile are you using? Are you relying on any third party widgets?