Web Forms :: Creating / Opening Tabs Dynamically Inside CSS?
Jan 1, 2010
I'm trying to create new tabs within page. When I click a link in my navmenu, it should open the Redirected page in a new tab within the page as new tab (not the browser tab). It is something like the visual studio, where we get the page opened inside a new tab when you click an item in the Solution explorer. Would any body let me know how to implement this functionality. (generate tab with close functinality). I m not talking about TabStrip.
I need to insert some JavaScript code inside a UserControl that I load from an Ajax call via jQuery Ui Tabs. Let me explain... This is my View (with jQuery loaded)
<script type="text/javascript"> $(document).ready(function () { $("#tabs").tabs({ cache: false, }); getContentTab (1); }); function getContentTab(index) { var url='<%= Url.Content("~/Home/getUserControl") %>/' + index; var targetDiv = "#tabs-" + index; $.get(url,null, function(result) { $(targetDiv).html(result); }); } </script> <div id="tabs"> <ul> <li><a href="#tabs-1" onclick="getContentTab(1);">Nunc tincidunt</a></li> <li><a href="#tabs-2" onclick="getContentTab(2);">Proin dolor</a></li> <li><a href="#tabs-3" onclick="getContentTab(3);">Aenean lacinia</a></li> </ul> <div id="tabs-1"> </div> <div id="tabs-2"> </div> <div id="tabs-3"> </div> </div> With these lines of code I call the Ajax function to load the content into a DIV. This is the Action from the controller: public ActionResult getUserControl(int num) { return PartialView("TestUC", num); } And this is the UserControl... <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> Number... <span id="testSpan"><%=Model.ToString() %></span>!! <input type="button" value="Click me!!" onclick="message();" /> <script type="text/javascript"> function message(item) { alert($("#testSpan").html()); } </script>
The problem is that the message() function returns always 1 (instead of returning the correct number). My question is... How should I add the script to my UserControl in order to have my code running correctly?
I've an item template inside a grid which has a <asp:LinkButton/> inside it. I assign the text for the link button as
<%# Convert.ToString(Eval("Tags"))%>
Tags can have a string with multiple tags in it delimited by space. For eg. "sports", "sports cricket", "sports cricket sachin" are the examples of some possible tags.
I want to create a button for each tag inside the string. How can i create the controls (server control - linkbutton) dynamically during runtime inside the grid item template?
I'm working on master pages. And I would like to create tabs much like firefox tabs sharing sessions which need to navigate on different pages.I tried many solution but all comes into vain.
I know this has been asked before, but I feel like I'm losing my way trying to follow the other examples out there. Does anyone see a straightforward solution to my particular problem?
Goal:
Two column Master Page
Left column contains a list of [stuff] (I'm trying a Repeater with LinkButtons)
Right column contains a TabContainer which will add dynamically created tabs when buttons on the left are clicked.
I had initially been creating tabs in the LB's OnCommand event, but of course this means that any tab generated by one click is lost if the user clicks another LinkButton.
So I moved the code to create a new tab to the OnInit section of the page and attempted to loop through the RepeaterItems comparing the UniqueId of each LinkButton until I found the one that was clicked using Request.Form["__EVENTTARGET"].
When I tried to loop through the RepeaterItems, however, the count was always 0, and the Repeater would not populate.
So now I am rebinding the Repeater in the Init section on every post-back - this allows me to find the LinkButton that was clicked. I then add the new Tab based on the LB that was clicked like this:
[Code]....
This properly adds new Tabs to the TabContainer using this code:
[Code]....
but I still have the issue where I can only ever have one dynamically created tab in the TabContainer at a time. All of the code above is being executed in OnInit, which I thought would save the tabs during post-backs, but instead this is behaving as tho I was adding the tabs in the OnCommand event of the Link Button...
I am trying to use a button to dynamically create a brand new tab every time i click it and load a control in there. I'm starting on the tab creation so far. I have on my aspx page, an update panel and a tab container control to handle it. The issue I am having is that the button will only create one tab no matter how many times I click
I am working on a pretty heavy page in an application and the scenario is:
There is a Tab control in the page, having four tabs. These tabs individually consist of different user controls and other asp controls. Most of these usercontrols in turn consist of other user controls. Every user control contains huge javaScript functions which validate them, populate controls and call web services.
What I am trying to achieve is to load only the Tab and its user controls on the page load and when the user clicks on a specific tab, load its contents (User controls) dynamically. Once that is done, I am setting the tab's postback to false to prevent loading it again once loaded.
I tried to achieve this by making the user controls in the other tabs - visible="false" in the markup and loading them from server side on some specific event. But that causes the javaScript functions in those user controls to give errors ('Object expected') when I go to that tab.
If I set the user controls in the other tabs to visible true, then no matter what; the page life cycle goes to each registered control and loads every subsequent control in that web user control which makes the main page slow (on loading and every postback).
The position of the Tab and the inner user controls is fixed. Although I am taking care that no data is populated unnecessarily on the page and user controls on hidden tabs, I dont want the tabs to get loaded altogether unless requested. If I load them on runtime, their corresponding javaScripts start giving errors.. note that I am not generating the controls on runtime, they exist in the page design. I just dont want to load them dynamically
I have datalist menu, when I click on each menuitems a new Dynamic Ajax tab is created. my problem is : if I click on a menu item for several times, dynamic tab is created for several times too,however I want to create my tab just one time. and if I click again on menu item the previous tab that was created before is shown. here is my code to create tabs:
I saw some example in google..and all of them with jquery...is there any way of creating tabs like ajax control tool kit in webforms without using Jquery...its not a requirement..i want to know the best way of doing it..I am very new to MVC and I know its not posibble to use Ajax control tool kit in mvc...I just noticed in this asp.net site My Profile page got some cool tabs..can anyone know how to do something like
How to solve Cross browser session Problem???When i login to my site and open a new tab,the session is shared.I want a new session for each tab.It is possible without using cookieless = 'true',but i cant use this.
I am creating an site where a user uploads an excel file to check if any of the records exist in a database. Then they are returned an excel file with only the records that are NOT in the database. I was thinking I should do it this way1. User uploads their excel file. The app opens excel file and loads records into a dataset (so far this is working with the code below)2. Using datarow and another function to check if each excel record exists in the database3 If the record does NOT exist, and it is the first record tested, create an excel file called records.xlsx and write the record into the file
4. Check the next record and if it does NOT exist in the database, then check if records.xlsx already exists then open it and write it into it.
[Code]....
Hopefully its clear, sorry if its not, I'm a bit of a novice at this. Is this a good way to do it? Does anyone know of any tutorials that might outline how to open an existing file and write to it?
I am using Ajaxtoolkit in my application. I am declaring the tabcontainer and tab panels on the serverside. I just have my Updatepanel on the Client-Side. I was wondering how to assign css to the tabs like onhover or click would change its background color and highlight the tab up.
Secondly, since I am dynamically creating these tabs, how would I put a close for each of the tabs?
I have a two usercontrols sales and salessearch. they are inside two tabs. I want to refresh the contents inside the tabs when i click in the tab headings, which are basicaly <a> tags. Right now when i switch between tabs I have no way of updating them.
How do i make the tabcontents refresh when i click on tab headings.
Following is the code...
I use a javascript function selecttab() to switch between tabs.
I am using the tab control and basically I have 4 buttons. Each button will load a seperate ascx control into a brand new tab. After about 4 tabs, since it has to regenerate all 4 tabs, the speed in order to add tabs just becomes too long for my tastes. Is there any way to remedy this and make it go faster?
EDIT2:Using Internet Explorer 7.0 and 8.0
EDIT: Some Code, I store the i in viewstate and loop through this every time for each panel per regeneration
private void BuildNewTab(int i) { TabPanel newPanel = new TabPanel();[cod]....
At the moment, I have an aspx page with a tabcontainer (ajax toolkit). Inside each tab, I have a little form or other content. At page load, each tab is loaded. Technically I can load the tabs at tabclick (with use of update panels) but this result in unnecessary data traffic.
Is there are a way or example how to use jquery tabs that loads aspx content (html)?
This way we can still use vs.net design tool with aspx pages and load data in a much smarter way.
I have a page with 4 fixed Tabs. Tabs 1 and 2 are always in position 1 and 2. However, the users are allowed to create their own tabs and add their own html content. I do this by creating a new tab in codebehind and inserting it into the tabcontainer AFTER the frist 2 and before the last 2 tabs. There could be several of these. EX: "F1 | F2 | U1 | U2 | U3 | F3 | F4" where F is a fixed tab and U is a custom tab.
As long as ALL tabs are visible then everything works fine after postbacks.
Based on user settings I sometimes hide fixed tab 1. Everything loads fine the first time. However, on postback The content on fixed tab 4 (always the last tab) is displayed on the bottom of EVERY tab (fixed or custom). It is still displayed in fixed tab 4.
A little background on the code:
Since the tabs are added dynamically they do not exist on postback and must be re-generated every time. This is done in Page_LoadComplete. I have tried it on PageLoad and it behaves the same way.
If I do not re-generate the pages on post back then the problem goes away - as do the custom tabs.
The only thing I could find was from last year, and was supposedly fixed (http://www.codeplex.com/AjaxControlToolkit/WorkItem/View.aspx?WorkItemId=16321
I am using simple google map. When first time click on tab "showmap" when perfect load map.
Like show in image 1:
Now "showmap" tab hide other tab show and then again open tab "showmap" then not perfect open map.
Like show in image 2:
The code is:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> <script type="text/javascript"> function show() { var map;
I used to implement this above title by using iframe but now I don't want to use it any more I have some plans in my mind I need to implement them by opening an external page inside our asp.net page without using any iframe I have only simple aspx page with div tag and panel and some other serverside components, I just want to know how I can do it without iframe? I don't want to design new complex control but I am looking for some methods can do that for me.
I have to mention that I need to control area which is loaded by external site as the same as iframe but the difference is that iframe can not handled by ajax even you put iframe inside the update panel your page has refresh and postback while you are changing the src value programmatically (in c# code) so we have to design some others methods what is the solution? I thought I can make request an get some html and show into div but I couldn't to implement it.
i am creating check box's dynamically and assigning them names like "chk_1" and "chk_2".now if later in my code i want to check if they have been checked how can i do that.if i do something like if chk_1.checked is True then i am getting error that chk_1 is not declared.
i am using VB.net 2.0 i can post my code if needed.
