Magic AJAX: Applying AJAX to your existing Web Pages

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

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
	<ajax:ajaxpanel ID="Ajaxpanel1" runat="server">
	
	<fieldset>
		<legend>Datagrid using MagicAjax (incl. sorting and selecting)</legend>
		<i>This is a very basic example of a datagrid that does sorting and selecting without a visible postback to the server.<br />
		Try this: reduce the height of your browser window's, so you need to scroll down to see the grid. Notice that MagicAjax keeps the scroll-position after callbacks.</i><br /><br />
		<asp:DataGrid Width="250px" id="grid" Runat="server" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
			BackColor="White" CellPadding="4" AllowSorting="True" PageSize="3" OnSortCommand="grid_SortCommand">
			<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
			<SelectedItemStyle ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
			<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
			<HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
			<Columns>
				<asp:ButtonColumn Text="Select" CommandName="Select"></asp:ButtonColumn>
			</Columns>
			<PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
		</asp:DataGrid>
	</fieldset>
	
	</ajax:ajaxpanel>
</asp:Content>

<script language="C#" runat="server">
	
	private void Page_Load(object sender, EventArgs e)
	{
		if (!IsPostBack)
		{
			//fill datagrid (example 2)
			FillGrid();
		}
	}

	/// <summary>
	/// Creates a DataTable and binds to grid
	/// </summary>
	private void FillGrid()
	{
		//create data
		System.Data.DataTable dt = new System.Data.DataTable("Person");
		dt.Columns.Add("Brand");
		dt.Columns.Add("Model");
		dt.Rows.Add(new string[] {"BMW", "X3"});
		dt.Rows.Add(new string[] {"Citroen", "Berlingo"});
		dt.Rows.Add(new string[] {"Fiat", "Punto"});
		dt.Rows.Add(new string[] {"Mercedes", "E Class"});
		dt.Rows.Add(new string[] {"Opel", "Zafira"});
		dt.Rows.Add(new string[] {"Peugeot", "206"});
		dt.Rows.Add(new string[] {"Volvo", "V70"});
		dt.Rows.Add(new string[] {"VW", "Golf"});
		System.Data.DataView dv = dt.DefaultView;

		//sort data
		dv.Sort = SortExpression;

		//bind data
		grid.DataSource = dv;
		grid.DataBind();
	}

	/// <summary>
	/// SortExpression of the grid (stored in ViewState!)
	/// </summary>
	private string SortExpression
	{
		get 
		{
			if (ViewState["_grid_SortExpression"] != null)
			{
				return (string)ViewState["_grid_SortExpression"];
			}
			else 
			{
				return "Brand asc"; //default
			}
		}
		set 
		{
			ViewState["_grid_SortExpression"] = value;
		}
	}

	private void grid_SortCommand(object source, DataGridSortCommandEventArgs e)
	{
		string[] currentSort = SortExpression.Split(' ');

		if (currentSort[0] != e.SortExpression)
		{
			grid.SelectedIndex = -1;
			SortExpression = e.SortExpression + " asc";
		}
		else
		{
			SortExpression = string.Format("{0} {1}", e.SortExpression, currentSort[1] == "desc" ? "asc" : "desc");
		}

		//refill datagrid
		FillGrid();
	}
</script>