HomeОбразованиеRelated VideosMore From: kudvenkat

jQuery tabs in asp net

90 ratings | 26773 views
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/06/jquery-tabs-in-aspnet.html In this video we will discuss how to use jQuery tabs in an ASP.NET web forms application. jQuery tabs widget is a single content area with multiple panels, each associated with a header in a list. This is similar to Accordion widget, which we discussed in Part 74 and 75. a) Tabs must be in either an ordered or unordered list b) Each tab "title" must be inside of a list item and wrapped by an anchor element with an href attribute c) Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab. Steps to retrieve data from a database table and present it using jQuery accordian in an asp.net webforms application. We will use the country webservice that we worked with in the previous video session. We want to retrieve data from the following database table tblEmployee and display it using jQuery tabs widget in an asp.net web forms application Add a WebForm to the project. Copy and paste the following code. Notice that we are using 2 repeater controls to produce the HTML that the jQuery tabs widget expects. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="jquery-1.11.2.js"></script> <script src="jquery-ui.js"></script> <link href="jquery-ui.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function () { $('#tabs').tabs({ collapsible: true, active: 1, event: 'mouseover' }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="tabs" style="width: 600px"> <ul> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <li> <a href="#C_<%#Eval("ID")%>"><%#Eval("Name") %> </a> </li> </ItemTemplate> </asp:Repeater> </ul> <asp:Repeater ID="Repeater2" runat="server"> <ItemTemplate> <div id="C_<%#Eval("ID")%>"> <%#Eval("CountryDescription")%> </div> </ItemTemplate> </asp:Repeater> </div> </form> </body> </html> Copy and paste the following code in the code-behind file using System; namespace Demo { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { Services.CountryServiceSoapClient client = new Services.CountryServiceSoapClient(); Services.Country[] countries = client.GetCountries(); Repeater1.DataSource = countries; Repeater1.DataBind(); Repeater2.DataSource = countries; Repeater2.DataBind(); } } } jQuery Tabs Widget Options collapsible - By default, atleast one panel need to be active. If you want to collapse all the panels, including the one that is active, set this option to true. active - This option can be set to a boolean value or integer. Setting active to false will collapse all panels. This requires the collapsible option to be true. An Integer value will make the corresponding panel active. Panels use zero-based index. event - The type of event that the tabs should react to in order to activate the tab. The default is "click". To activate on hover, use "mouseover".
Html code for embedding videos on your blog
Text Comments (8)
Ram Gupta (9 months ago)
Nice explanation
Anusha N (11 months ago)
can you please explain us how we can add / remove tabs dynamically in jquery
Salam Bashir (1 year ago)
great
Ali Hameed (1 year ago)
Sir what if i have to create tabs using jquery with out using Repeater control??? may be in MVC... i mean how is it possible to do if i have to populate list inside the jquery to produce the tab???
achu achuss (2 years ago)
if i need to add a button in each tab and proceed through the button to next tab...then wat to do? will u plz help me.....?
Luan Nguyen (3 years ago)
Thanks sir. I'm following your videos everyday. These're very helpfull & great.
developernader (3 years ago)
Thank you very much
Jaihoon Merzakhil (3 years ago)
very nice videos sir i am really enjoying very nice method of teaching. if it is possible please make a video for to provide search engin for our websites  Ex: i have a text box and a button in my website if some wants to search my website content like services the user should be able to search  best wishes thanks

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.