Ok, back to blogging again after a wonderful trip to Canada :)
In this sample I'm going to create a Gridview and bind it to a set of records coming from AdventureWorks DB.
Note: AdventureWorksDB is the sample database in SQL Server 2005. Obviously you can connect to any other database which you may prefer.
First let's create structure of our work. I recommend let's have a dropdown list which shows the product subcategories and a grid which depending to selected product subcategory, shows bunch of related products. As you guess the code will be really simple and is not dependent to ATLAS, so I just put the code here without additional explanation.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Atlas.aspx.cs" Inherits="Atlas" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:SqlDataSource ID="sdsDDL" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>" SelectCommand="SELECT ProductSubcategoryID, Name FROM Production.ProductSubcategory">
</asp:SqlDataSource>
<asp:DropDownList ID="DDL" runat="server" AutoPostBack="True" DataSourceID="sdsDDL" DataTextField="Name" DataValueField="ProductSubcategoryID">
</asp:DropDownList>
<asp:SqlDataSource ID="sdsGDV" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>" SelectCommand="SELECT Name, ProductNumber, ReorderPoint FROM Production.Product T WHERE (T.ProductSubcategoryID = @PSID)">
<SelectParameters>
<asp:ControlParameter ControlID="DDL" DefaultValue="1" Name="PSID" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<asp:GridView ID="GDV" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataSourceID="sdsGDV">
<FooterStyle BackColor="White" ForeColor="#000066" />
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="ProductNumber" HeaderText="ProductNumber" SortExpression="ProductNumber" />
<asp:BoundField DataField="ReorderPoint" HeaderText="ReorderPoint" SortExpression="ReorderPoint" />
</Columns>
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
If you remember from the prior post; we have just started an ATLAS application and now we are ready to writ the code. In fact we could create ATLAS application WITHOUT writing EVEN one line of code-behind! How? Let see ;)
The first thing we need to take advantage of it, is an easy-to-use control which is responsible for partial-rendering. This control is ScriptManaget.
You can simply use this control right after your serer-side form tag. Don't forget to enable ScriptManager's PartialRendering attribute to true:
<form id="form1" runat="server">
<atlas:ScriptManager runat="server" ID="asm" EnablePartialRendering="true" />
..
</form>
If you create the above page and make it run, you'll see, when user changer the selected product subcategory via dropdownlist, the page posts back and then ONLY the gridview's data changes (rebinds). So we can say that in our example the gridview control is the only updating control after post backs and this will give us an idea about putting this control inside a ATLAS control named "UpdatePanel". By design UpdatePanel is responsible for updating the controls inside it in very specific time. As you guess we should place our gridview inside an "UpdatePanel" like this:
<atlas:UpdatePanel runat="server" ID="aup" >
<ContentTemplate>
<asp:GridView ID="GDV" ... >
...
</ContentTemplate>
</atlas:UpdatePanel>
But how can we enforce the "UpdatePanel" to update the gridview with new server data depending on the value that has been selected by the user through the dropdownlist? The answer is simple. "UpdatePanel" control supports a collection called "triggers". In this collection you can simply enforce when "updatePanel" has to update its containing control(s). Its syntax is very easy and wonderful:
<atlas:UpdatePanel runat="server" ID="aup" >
<ContentTemplate>
<asp:GridView ID="GDV" ... >
...
</ContentTemplate>
<Triggers>
<atlas:ControlValueTrigger ControlID="DDL" PropertyName="SelectedValue" />
</Triggers>
</atlas:UpdatePanel>
That's it. Your page become ATLAS enables and behaves exactly as you expect from an equivalent AJAX enabled pgae!
As you noticed we never used any line of code-behind!!
Following is the complete code for the above sample:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Atlas.aspx.cs" Inherits="Atlas" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager runat="server" ID="asm" EnablePartialRendering="true" />
<div>
<asp:SqlDataSource ID="sdsDDL" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>" SelectCommand="SELECT ProductSubcategoryID, Name FROM Production.ProductSubcategory">
</asp:SqlDataSource>
<asp:DropDownList ID="DDL" runat="server" AutoPostBack="True" DataSourceID="sdsDDL" DataTextField="Name" DataValueField="ProductSubcategoryID">
</asp:DropDownList>
<asp:SqlDataSource ID="sdsGDV" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>" SelectCommand="SELECT Name, ProductNumber, ReorderPoint FROM Production.Product T WHERE (T.ProductSubcategoryID = @PSID)">
<SelectParameters>
<asp:ControlParameter ControlID="DDL" DefaultValue="1" Name="PSID" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<atlas:UpdatePanel runat="server" ID="aup" >
<ContentTemplate>
<asp:GridView ID="GDV" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataSourceID="sdsGDV">
<FooterStyle BackColor="White" ForeColor="#000066" />
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="ProductNumber" HeaderText="ProductNumber" SortExpression="ProductNumber" />
<asp:BoundField DataField="ReorderPoint" HeaderText="ReorderPoint" SortExpression="ReorderPoint" />
</Columns>
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<atlas:ControlValueTrigger ControlID="DDL" PropertyName="SelectedValue" />
</Triggers>
</atlas:UpdatePanel>
</div>
</form>
</body>
</html>
Enjoy!
To be Continued
