Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
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 = ”
[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
