jQuery UI Accordion in ASP.NET WebForms - feed with data from database (Part 2)
In the first part I’ve shown how to implement jQuery UI Accordion in an ASP.NET website in only few steps, without any server-side interaction. We’ve seen how easy is to setup the Accordion and to apply some theme to it.
Now, lets do some more with the ASP.NET framework. I will use ASP.NET Repeater (this example is using ASP.NET WebForms), and the ASP.NET Method to retrieve data from database.
Also in the next blog I will create the same example with ASP.NET MVC.
Lets start from the database.
I’ve created complete new database which contains only one table.
Here is the DB Script you need for this example:
go
use MyWebStore
go
CREATE TABLE Products
(
id int not null primary key identity(1,1),
name nvarchar(100) not null,
price decimal,
picture nvarchar(200),
[description] text
)
go
INSERT INTO Products
VALUES ('Inspiron 15R Laptop', 600, 'Inspiron15RLaptop.png',
'The Inspiron laptop''s sleek new design is not only easy on the eyes, it seamlessly travels by your side without getting in your way.
Sleek details Upon opening the Inspiron, your eyes will be immediately drawn to the brushed metal appearance of the smudge-proof palm rest.
The keyboard''s 10-key numeric keypad makes it easy to work with applications that require data entry or directional moves.')
INSERT INTO Products
VALUES ('XPS 15 Laptop', 850, 'XPS15Laptop.png',
'Powerful graphics. Powerfully smart. The XPS 15 laptop has what it takes to take you to new levels of performance.
Comes with standard leading edge NVIDIA® performance graphics3 (available up to 2 GB) for powerful photo and video editing and high-resolution gaming with breathtaking detail.')
INSERT INTO Products
VALUES ('Inspiron Mini 10 (1018) Netbook', 430, 'InspironMini10Notebook.png',
'The Inspiron Mini 10 goes anywhere you go and with ease.
With a slim profile for computing in compact spaces and a starting at weight of less than 3 lbs.6, youll want to bring the ultra-portable ')
select * from Products
If successful, you will automatically see the table with three records. I’ve also stored image names for each product which I have in my project on the images folder
Now, we will create simple ASP.NET Method that will retrieve the data from database and will bind it to repeater on Page_Load
{
Repeater1.DataSource = GetProducts();
Repeater1.DataBind();
}
public DataTable GetProducts()
{
string query = "select * from products";
SqlConnection con = new SqlConnection
(WebConfigurationManager.ConnectionStrings["MyWebStoreConnectionString"].ConnectionString);
SqlCommand cmd = new SqlCommand(query, con);
DataTable data = new DataTable();
SqlDataAdapter adapter = new SqlDataAdapter(cmd);
using (con)
{
con.Open();
adapter.Fill(data);
}
return data;
}
I have the connection string in Web.Config
<add name="MyWebStoreConnectionString"
connectionString="Data Source=.;Initial Catalog=MyWebStore;Integrated Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>
and the ASPX code is:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery Accordion</title>
<link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/blitzer/jquery-ui.css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.6/jquery-ui.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#products").accordion();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="products" style="width:500px;">
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<h3><a href="#"><%# DataBinder.Eval(Container.DataItem, "name") %></a></h3>
<div>
<p>
<%# DataBinder.Eval(Container.DataItem, "description") %>
</p>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
We have less code from the previous blog since we have the Repeater which will do the job of repeating the data depending of how many records the DataTable has. So, if we add new records in database, the Repeater will take care of it to generate all the records with the same template defined inside ItemTemplate.
Now, if you run the website, you will see this:
Great! We’ve successfully implemented it with connection to our server-side logic and data retrieved from database.
Now, lets do the same thing with ASP.NET MVC.
See the following blog.
Regards,
Hajan