asp.net core docker jQuery accordion in asp net

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...

In this video we will discuss how to implement accordian panel in an ASP.NET web forms application using jQuery.

What is accordian
Accordian is great for displaying collapsible content panels for presenting information in a limited amount of space.

2 simple steps to produce an accordin using jQuery

Step 1 : The HTML of the accordion container needs pairs of headers and content panels as shown below
<div id="accordian" style="width: 400px"> <h3>Header 1</h3> <div>Content Panel 1</div> <h3>Header 2</h3> <div>Content Panel 2</div> <h3>Header 3</h3> <div>Content Panel 3</div>
</div>

Step 2 : Invoke accordion() function on the container div
$(' #accordian').accordion();

Retrieve data from a database table and present it using jQuery accordian in an asp.net webforms application

WebService (ASMX) Code

namespace Demo
{ [WebService(Namespace = " http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] [System.Web.Script.Services.ScriptService] public class CountryService : System.Web.Services.WebService { [WebMethod] public List<Country> GetCountries() { List<Country> listCountries = new List<Country>(); string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString; using (SqlConnection con = new SqlConnection(cs)) { SqlCommand cmd = new SqlCommand("spGetCountries", con); cmd.CommandType = CommandType.StoredProcedure; con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { Country country = new Country(); country.ID = Convert.ToInt32(rdr["ID"]); country.Name = rdr["Name"].ToString(); country.CountryDescription = rdr["CountryDescription"].ToString(); listCountries.Add(country); } } return listCountries; } }
}

WebForm jQuery code.

$(document).ready(function () { $.ajax({ url: 'CountryService.asmx/GetCountries', method: 'post', contentType: 'application/json;charset=utf-8', dataType: 'json', success: function (data) { var htmlString = ''; $(data.d).each(function (index, country) { htmlString += '<h3>' + country.Name + '</h3><div>' + country.CountryDescription + '</div>'; }); $(' #accordion').html(htmlString).accordion({ collapsible: true, active: 2, }); } });
});

collapsible - By default, atleast one section need to be active. If you want to collapse all the sections, 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.

For the complete list of options, methods and events of accordian widget
http://api.jqueryui.com/accordion

asp.net core docker jQuery accordion in asp net
85 Likes	85 Dislikes
23,299 views views	524K followers
Education	Upload TimePublished on 23 Jun 2015

Related keywords

wcf vs web api,ado.net core,sql server management studio,webkinz,webadvisor,craigslist nj,wcf one piece,asp.net core 3,ajax players,weber grill parts,webtoon,tutorials by hugo,csharp corner,mvc design pattern,asp.net machine account,servers for minecraft,asp.net core dependency injection,ado.net tutorial,services angular,ajax ontario,asp.net mvc tutorial,asp.net cos'è,csharp assembly,tutorialspoint python,sql join,services briefcase,asp.net core web api,ajax jquery,wccftech,jquery ajax example stackoverflow,craigslist ny,asp.net zero,csharp foreach,jquery ajax tutorial with jsp,server memes,sql date format,services online,chase,serverless architecture,server resume,wcf c#,server books,tutorialspoint javascript,mvcc connect,ado.net mysql,services technologies gps,jquery ajax tutorial w3schools,ajax deadpool,jquery ajax tutorial mvc,server jobs,cvs,website,mvc tutorial,costco hours,wcf service application,tutorialspoint spring,serverless,wcf soap,jquery json tutorial for beginners,wcf cat,cool math games,wcf test client,services & training hse colombia sas,servicestack,citibank,asp.net core identity,sql union,ajax parking,sql database,asp.net core logging,mvconnect,cunyfirst,asp.net guida,wcf nba,csharp download,wcfi foundation,jquery tutorial for beginners youtube,csharp online,wcf authentication,tutorials near me,http://asp.net,server 2019,jquery ajax example,chernobyl,ado.net descargar,web of dreams,jquery ajax example json,serverminer,ajax cleaner,ado.net visual studio 2019,webassign,ado.net vs entity framework,jquery tutorial for beginners in tamil,ado.net visual studio 2017,csharp list,sql like,asp.net mvc,asp.net core tutorial,sqlite,wcfm,jquery slider tutorial for beginners,ajax roster,jquery ajax example get,jquery tutorial for beginners with examples step by step,mvc architecture,http://ado.net,asp.net core mvc,ajax soccer,server hosting,wcfi,jquery tutorial for beginners with examples pdf,jquery tutorial for beginners with examples step by step pdf,ajax dish soap,capital one,server rack,tutorialspoint html,jquery ajax tutorials,csharp interface,craigslist,jquery ajax tutorial point,webroot,tutorialspoint reactjs,ajax request,wcf dragon ball,asp.net core 2.2,jquery ajax tutorials point,tutorialspoint python 3,sql developer,webster,services transmission company sas,sql group by,asp.net core signalr,services manager,mvc framework,ajax paving,mvc near me,tutorialspoint spring boot,mvc map,csharp online compiler,asp.net download,jquery ajax tutorial in asp.net,sql between,ado.net c# pdf,services tag dell,wcf 2019 nba,csharp switch,ado.net ventajas y desventajas,csharpstar,wcf tutorial,ajax jquery tutorial for beginners pdf,tutorialspoint,ajax meaning,csharp-video-tutorials.blogspot,tutorials dojo,central park 5,csharp string format,ado.net c#,asp.net core github,jquery tutorial for beginners kudvenkat,server status,ajax fc,server jobs nyc,asp.net core swagger,sql formatter,credit karma,services group,jquery tutorial for beginners full,server error in '/' application,services windows,asp.net core 3.0,sql injection,jquery tutorial for beginners – learn jquery,tutorialspoint c#,wcf ria services,calculator,ado.net entity data model,sql insert,tutorialspoint tableau,services google play apk,sqlyog,asp.net core 3 release date,sql server,server job description,tutorials by a,jquery ajax tutorial post,servicenow,webcam,mvc hours,webmd symptom,jquery ajax tutorial for beginners,csharp array,csharp enum,ajax call,asp.net core 2. guida completa per lo sviluppatore,jquery ajax example php,asp.net core,server pro,server status ffxiv,cheap flights,webcrims,asp.net core hosting,services sas,jquery tutorial for beginners with examples free download,tutorialspoint java,tutorialspoint java compiler,webmd,csharp to json,college football,ado.net dataset,csharp dictionary,cnn,website builder,tutorialspoint sql,asp.net web api,jquery ajax tutorial pdf,server side rendering,weber grills,sql server 2017,tutorialspoint spark,mvc nj,ado.net oracle,asp.net core download,csharp to vb.net,jquery best tutorial for beginners,webster bank,webstaurant,tutorialsystems,ajax post,services fms publish announcement,services.msc no abre,ajax jersey,csharp operator,asp.net core razor pages,server duties,asp.net core environment variables,csharp random,jquery tutorial for beginners step by step,century 21,services consultores,services consulting,mvcsd,services.msc,mvcsc,ado.net pdf,asp.net core configuration,ajax marvel,jquery datatable tutorial for beginners,sql update,asp.net tutorial,mvc medical,ado.net entity data model visual studio 2019,wcfs international curriculum,mvc2,ado.net entity data model visual studio 2017,chase online,wcf api,jquery ajax sample,costco,server jobs near me,webex,sql meaning,sql tutorial,sql commands,jquery validation tutorial for beginners with examples,jquery online tutorial for beginners,ado.net entity framework,ajax tavern,tutorialsteacher,ajax javascript,jquery tutorial for beginners pdf,jquery ajax tutorial for beginners with examples,services desk,jquery ajax tutorial asp.net mvc,ajax greek,csharp tutorial,mvc pattern,ado.net sql server,ado.net connection,asp.net identity,mvcu,asp.net core middleware,jquery tutorial for beginners in hindi,wcf web service,jquery tutorial ajax json,mvc webadvisor,web store,mvcc,webmail,mvci,jquery ajax tutorial php,mvctc,