jQuery tutorial for beginners - jQuery accordion using asp net repeater control

5.0 (2)

25 learners

What you'll learn

This course includes

22.5 hours of video
Certificate of completion
Access on mobile and TV

Summary

Keywords

jquery ajax tutorial jquery ajax tutorial for beginners jquery accordion asp.net repeater jquery accordion with asp.net listview asp.net jquery accordion database jquery tutorial jquery tutorial for beginners

Full Transcript

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-accordion-using-aspnet-repeater.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 In this video we will discuss implementing an accordion in asp.net webforms application using asp.net repeater control and jQuery. This is continuation to Part 74, in which we we have implemented accordion by building h3 and div element pairs using jQuery. We can offload this responsibility to the asp.net repeater control. Steps to modify the example in Part 74, to use asp.net repeater control Step 1 : Add a reference to the ASMX web service a) In the Solution Explorer, right click on the project and select Add - Service Reference b) In the Add Service Reference dialog box, click the Discover button. This should discover the CountryService.asmx c) In the Namespace textbox, type Services and click OK Step 2 : Add a new WebForm to the project. 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(); repeaterCountries.DataSource = client.GetCountries(); repeaterCountries.DataBind(); } } } Step 3 : Copy and paste the following HTML and jQuery code in the ASPX page <%@ 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 () { $('#accordion').accordion(); }); </script> </head> <body> <form id="form1" runat="server"> <div id="accordion" style="width: 600px"> <asp:Repeater ID="repeaterCountries" runat="server"> <ItemTemplate> <h3> <%#Eval("Name") %> </h3> <div> <%#Eval("CountryDescription") %> </div> </ItemTemplate> </asp:Repeater> </div> </form> </body> </html> Please note : You can also use the ASP.NET ListView control instead of Repeater control