Magic AJAX: Applying AJAX to your existing Web Pages

<%@ Page language="C#" MasterPageFile="~/MasterPage.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
	<asp:XmlDataSource ID="CustomersDataSource" runat="server" EnableCaching="true" CacheDuration="Infinite" DataFile="~/App_Data/customers.xml" />
	<asp:XmlDataSource ID="RowDataSource" runat="server" EnableCaching="true" CacheDuration="Infinite" DataFile="~/App_Data/customers.xml" XPath="customers/customer[@CustomerID='']" />

	<ajax:ajaxpanel ID="Ajaxpanel1" runat="server">
	
	<fieldset>
		<legend>GridView &amp; DetailsView using MagicAjax</legend>
		<i>An example of an ASP.NET 2.0 GridView combined with a DetailsView. Paging the grid and viewing the details is done without a visible postback.</i><br /><br />
		<table><tr>
		<td valign="top">
				<asp:GridView Width="400px" ID="GridView1" runat="server" DataSourceID="CustomersDataSource" 
						EnableViewState="False"
						DataKeyNames="customerid" AllowPaging="True"
						AutoGenerateSelectButton="True"
						OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
						OnPageIndexChanged="GridView1_PageIndexChanged"
						AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal">
						<Columns>
								<asp:BoundField DataField="CompanyName" HeaderText="Company" />
								<asp:BoundField DataField="Country" HeaderText="Country" />                                
						</Columns>
					<PagerSettings Mode=NextPreviousFirstLast FirstPageImageUrl="~/images/first.GIF" LastPageImageUrl="~/images/last.GIF" NextPageImageUrl="~/images/next.gif" PreviousPageImageUrl="~/images/prev.GIF" />
					<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
					<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
					<SelectedRowStyle BackColor="#738A9C" ForeColor="#F7F7F7" />
					<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Center" />
					<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
					<AlternatingRowStyle BackColor="#F7F7F7" />
				</asp:GridView>
		</td>
		<td valign="top">
				<asp:DetailsView Width="350px"  ID="DetailsView1" runat="server" 
						DataKeyNames="customerid"  
						HeaderText="Customer Details"
						EmptyDataText="No customer currently selected"
						DataSourceID="RowDataSource" 
						AutoGenerateRows="False" 
						BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal">
						<Fields>
								<asp:BoundField DataField="CustomerID" HeaderText="ID" HeaderStyle-Width="80px" />
								<asp:BoundField DataField="CompanyName" HeaderText="Company" />
								<asp:BoundField DataField="ContactName" HeaderText="Contact" />
								<asp:BoundField DataField="Address" HeaderText="Address" />                
								<asp:BoundField DataField="City" HeaderText="City" />      
								<asp:BoundField DataField="Country" HeaderText="Country" />                             
						</Fields>
					<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
					<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
					<AlternatingRowStyle BackColor="#F7F7F7" />
				</asp:DetailsView>   
		</td>
		</tr></table>
  </fieldset>
  </ajax:ajaxpanel>
</asp:Content>

<script language="C#" runat="server">
	private void GridView1_SelectedIndexChanged(object sender, EventArgs e)
	{
		RowDataSource.XPath = "customers/customer[@CustomerID='" + GridView1.SelectedDataKey.Value + "']";
	}
	private void GridView1_PageIndexChanged(object sender, EventArgs e)
	{
		GridView1.SelectedIndex = -1;
	}
</script>