[Magicajax-cvs] MagicAjax NET 1.1/Examples Examples.aspx,NONE,1.1

SourceForge Headquarters 225 Broadway Suite 1600 San Diego, CA 92101 +1 (858) 422-6466

Update of /cvsroot/magicajax/MagicAjax NET 1.1/Examples
In directory sc8-pr-cvs1.sourceforge.net:/tmp/cvs-serv26255/MagicAjax NET 1.1/Examples

Added Files:
	Examples.aspx 
Log Message:
- Made changes for using CallBackObject.js as embedded resource
- added a MagicAjax example page (with master/detail dropdowns and a datagrid)

--- NEW FILE: Examples.aspx ---
<%@ Page language="c#" %>
<%@ Register TagPrefix="cc1" Namespace="MagicAjax.UI.Controls" Assembly="MagicAjax" %>
<html>
	<head>
		<title>ASP.NET MagicAjax examples</title>
		<style type="text/css">
			body { font-size: small; font-family: verdana }
		</style>
	</head>
	<body>
		<h4>MagicAjax demo's</h4>
		<form id="form1" runat="server">
		
		<hr>
		<h5>1. Master/detail dropdown lists</h5>
		<cc1:ajaxpanel runat="server">
			Please pick a car:&nbsp; 
			<asp:DropDownList id="brand" runat="server" AutoPostBack="true" OnSelectedIndexChanged="brand_SelectedIndexChanged">
				<asp:ListItem>- Select car brand -</asp:ListItem>
			</asp:DropDownList>
			<asp:DropDownList id="model" runat="server" AutoPostBack="true" Visible="false" OnSelectedIndexChanged="model_SelectedIndexChanged" /><br /><br />
			<asp:Button id="select" runat="server" Text="Select Car" Enabled="false" OnClick="select_Click" />&nbsp; 
			<asp:Label id="lblSelectedCar" runat="server" />
		</cc1:ajaxpanel>
		
		<hr>
		<h5>2. Datagrid (sorting and selecting)</h5>
		<cc1:ajaxpanel runat="server">
			<asp:DataGrid id="grid" Runat="server" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px"
				BackColor="White" CellPadding="4" AllowSorting="True" PageSize="3"
				OnSortCommand="grid_SortCommand" OnSelectedIndexChanged="grid_SelectedIndexChanged">
				<FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
				<SelectedItemStyle Font-Bold="True" 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>
		</cc1:ajaxpanel>
		
		</form>
	</body>
</html>

<script language="C#" runat="server">

	private void Page_Load(object sender, EventArgs e)
	{
		if (!IsPostBack)
		{
			//fill the car brands (example 1)
			brand.Items.Add("VW");
			brand.Items.Add("Mercedes");
			brand.Items.Add("Citroen");

			//fill datagrid (example 2)
			FillGrid();
		}
	}

	/******************/
	/* Example 1 code */
	/******************/

	protected void brand_SelectedIndexChanged(object sender, EventArgs e)
	{
		model.Items.Clear();
		model.Items.Add(new ListItem("- Select car model -", ""));
		model.Visible = true;

		switch (brand.SelectedValue)
		{
			case "VW":
				model.Items.Add("Golf");
				model.Items.Add("Passat");
				model.Items.Add("Beetle");
				model.Items.Add("Phaeton");
				break;
			case "Mercedes":
				model.Items.Add("S Class");
				model.Items.Add("E Class");
				model.Items.Add("A Class");
				model.Items.Add("M Class");
				break;
			case "Citroen":
				model.Items.Add("C3 Pluriel");
				model.Items.Add("C5 Break");
				model.Items.Add("C8");
				model.Items.Add("Berlingo");
				break;
			default:
				model.Visible = false;
				break;
		}
	}

	protected void model_SelectedIndexChanged(object sender, EventArgs e)
	{
		select.Enabled = model.SelectedIndex != 0;
	}

	protected void select_Click(object sender, EventArgs e)
	{
		lblSelectedCar.Text = "You have picked the " + brand.SelectedValue + " " + model.SelectedValue;
	}

	/******************/
	/* Example 2 code */
	/******************/

	/// <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"; //default
			}
		}
		set 
		{
			ViewState["_grid_SortExpression"] = value;
		}
	}

	private void grid_SortCommand(object source, DataGridSortCommandEventArgs e)
	{
		if (SortExpression != e.SortExpression)
		{
			grid.SelectedIndex = -1;
		}

		SortExpression = e.SortExpression;

		//refill datagrid
		FillGrid();
	}

	private void grid_SelectedIndexChanged(object sender, EventArgs e)
	{
		//refill datagrid
		FillGrid();
	}
</script>