In my application i have tab at the top of the page which should each render a new page.
The tabs are defined in the Layouts file as this will be part of the standard view.
Now i have created different views for each of the options e.g. project is one of the tabs.
So when i click the tab option how will it render the body based on the tab i have selected?
I have used the Foundation layout tabs but will need jquery hooking into it to launch an event.
Any examples or replies would be great
Try jQuery UI Tabs
Edit 1:
<div id="tabs">
<ul>
<li>Projects</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="projects">
<% Html.RenderAction("Projects", "Home"); %>
</div>
<div id="tab-2">
<% Html.RenderAction("TabTwo", "Home"); %>
</div>
<div id="tab-3">
<% Html.RenderAction("TabThree", "Home"); %>
</div>
</div>
Decorate your tabs action method with [ChildActionOnly] if you want methods to work using child view only.
Related
I don't want to change Common Menu Page and want to refresh contact page.
If click to menu link, Menu page don't want to change, only change contact page.
Looks like you want only part of the page to update when moving through routes (urls). Make sure you're using
<%= yield %>
somewhere in your application layout file and that controller templates (app/views/...) don't include the menu themselves.
Example:
<html>
<body>
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
<div id="container">
<%= yield %>
</div>
</body>
</html>
I have page containig partial views
<div class="window">
<div id="progress" class="progress">
</div>
#*<div id="tlv-dialog-content" >*#
<form id="___iskadetails">
<div id="iska-general-details">
#Html.Partial("_workGeneralDetails_EditForm", Model)
</div>
</form>
<div id="tabstrip" class="tabstrip">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
each partial in the tabstrip contain different model
i want to load the partial view after spacific ajax im doing in the client side
in the document.ready
what is the best way to do it
Use the JQUERY UI tab and load different Partial view with their model.
pls look following links that will help you.
http://kevgriffin.com/using-jquery-tabs-and-asp-net-mvc-partial-views-for-ajax-goodness/
http://ericdotnet.wordpress.com/2009/03/17/jquery-ui-tabs-and-aspnet-mvc/
I've created two tabs using jquery UI, and placed two partial views in the tabs as the below code.
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab1">
#Html.Partial("Tab1") </div>
<div id="tab2">
#Html.Partial("Tab2")
</div>
</div>
How can I share data from Tab2 partial view to Tab1 partial view.
Thanks,
Naren
You can't. Directly sharing data between partial views is no good architecture, either. Each partial view should exist for one distinct purpose and should not interfere or exchange data with other ones — in fact, Tab1 shouldn't even know that Tab2 exists.
However, you could store the data in the Model property of the view containing the two partial views and hand that over to each partial view that is rendered:
#model SomeModel
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab1">
#Html.Partial("Tab1", Model)
</div>
<div id="tab2">
#Html.Partial("Tab2", Model)
</div>
</div>
Stylistically I prefer to load not load 2 partials in the same page if the user can only see 1 at a time... I personally prefer to just split them into different views (event if the experience to the user make it look like they're clicking through tabs to get the affect you want)
This prevents partial B from doing something that potentially slows down page load times for partial A, thus slowing down the user experience for no apparent reason.
If you loaded these into 2 different views, then you could use standard action links to move the data across... This is also helpful if you need to navigate directly to a tab (that's not the first one)
I'm trying to use the tabs purely as a navigational menu, loading my pages in the tabs, but being able to bookmark said tabs, and have the address bar correspond with the action I'm executing.
So here is my simple nav partial:
<div id='tabs'>
<ul>
<li id='home'>Home</li>
<li id='test'>Test</li>
</ul>
</div>
And the simple tabs intializer:
$(document).ready(function() {
$('#tabs').tabs({spinner: ''
});
});
My layout just displays $sf_content. I want to display the content for the action I'm executing (currently home or test) in the tab, via ajax, and have the tab be bookmarkable.
I've googled this like 4000 times and I can't find an example of what I'm trying to do. If anyone has a resource they know of, I can look it up, or if you can help, I would greatly appreciate it.
Thank you in advance.
This will make your tabs load using ajax
<div id='tabs'>
<ul>
<li title='home'>Home</li>
<li title='test'>Test</li>
</ul>
<div id="home">home content here</div>
<div id="test">test content here</div>
</div>
I'm using jqueryUI for tabs on a page. I initialize it like below:
$("#tabs").tabs();
<div id="tabs">
<ul>
<li>Part A</li>
<li>Part B</li>
<li>Part C</li>
</ul>
<div id="tabs-4">
.....
</div>
<div id="tabs-2">
....
</div>
<div id="tabs-5">
....
</div>
</div>
I have 2 questions.
How do I set the tab to be custom. say I want second tab to be shown first. $('#tabs').tabs(2) does not work. i got that from this link
Let say I click on a button inside tab1. Clicking on the button takes control back to an action and then control comes back to this page. When the control comes back...then is it possible to set a custom tab?. For example. in tab 1 I click something...go back to the action...and then I want to come back to tab 2.
1.
Is there an error when you call $('#tabs').tabs(2)?
2.
You can set a variable in your controller that tells the view which tab to be active.
#controller
... do some stuff
#current_tab = 2
#view
$('#tabs').tabs(<%= #current_tab %>)