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)
Related
I have a layout page in shared folder of my mvc application. The name of the page is Layout.cshtml
I have two div tags in Layout.cshtml namely div1 and div2.
I have a controller called membersController.
This controller sends list of two types of members to view. i.e. GeneralMembers and AdminMembers.
I have a view called Index.cshtml in members folder.
In this view I get the data as expected. But the only problem is that I dont know how to get that two lists inside of each div. In short I want to have GeneralMembers in div1 and AdminMembers in div2.
There might be duplicates of this question but I dont know the keywords/query to search for on google.
If anyone knows any tutorials then please post the link.
If model you send to View from your Controller Action contains two lists, you may call each of them in your View. For example:
<div class="div1">
<ul>
#foreach (var i in model.GeneralMembers)
<li>#i.Name .......</li>
</ul>
</div>
<div class="div2">
<ul>
#foreach (var i in model.AdminMembers)
<li>#i.Name .......</li>
</ul>
</div>
ADDED:
In that case may me you can use jQuery. In your Index page use hidden div:
<script>
$('.Indexdiv1').hide();
</script>
<div class="Indexdiv1">
<ul>
#foreach (var i in model.GeneralMembers)
<li>#i.Name .......</li>
</ul>
</div>
And on your Layout page append html from Indexdiv1 to div1:
<script>
$(document).ready(function()
{
$('.div1').append($('.Indexdiv1').html())
});
</script>
<div class="div1"></div>
I use Jquery UI to create tabs. I want create new tabs with content tab1 = content tab2
You can use a bit of jQuery to accomplish this. Assuming that your jQuery UI tags code looks like:
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2">Test content</div>
</div>
You can use something similar to the following to copy the content into the first tab.
var content = $('#tabs-2').html();
$('#tabs-1').html(content);
This code takes the HTML string within the tabs-2 div and stores it in a variable. It then sets the content in tabs-1 div to the variable.
My tabs view look like this (Remember this is not part of application.html.erb, since I need the tabs to be available only to certain specific pages):
<div>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active">
Mail Settings
</li>
<li>
Text Settings
</li>
</ul>
</div>
But, on clicking on any of the above tabs, the vertical tabs disappear and goes to the respective views. I would like to retain the tabs in each page it navigates to, any pointers are welcome.
How about using something like
layout "other_layout"
in the relevant controllers? Like explained in http://guides.rubyonrails.org/layouts_and_rendering.html, "2.2.12.1 Specifying Layouts for Controllers"
You can use yield :tag in your layout and use
content_for :tag do
"your tabs"
end
in your views where you want tabs and don't put content_for method in view where you don't want these tabs.
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.
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>