|
|
<%@ Page language="c#" %>
<%@ Register TagPrefix="ajax" 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 (.NET version <%= System.Environment.Version %>)</h4>
<form id="form1" runat="server">
<span style="float:right"><asp:Button runat="server" Text="Regular PostBack" /></span>
<hr />
<h5>1. Simple button showing server time</h5>
<ajax:ajaxpanel ID="Ajaxpanel1" runat="server">
<asp:Button runat="server" ID="ShowTime" Text="Show server's date & time" OnClick="ShowTime_Click" />
<asp:Label runat="server" ID="lblShowTime" BackColor="Blue" ForeColor="White" />
</ajax:ajaxpanel>
<hr>
<h5>2. Master/detail dropdown lists</h5>
<ajax:ajaxpanel ID="Ajaxpanel2" runat="server">
Please pick a car:
<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" />
<asp:Label id="lblSelectedCar" runat="server" />
</ajax:ajaxpanel>
<hr>
<h5>3. Datagrid (sorting and selecting)</h5>
<ajax:ajaxpanel ID="Ajaxpanel3" 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>
</ajax: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 ShowTime_Click(object sender, EventArgs e)
{
lblShowTime.Text = DateTime.Now.ToString();
}
/******************/
/* Example 2 code */
/******************/
protected void brand_SelectedIndexChanged(object sender, EventArgs e)
{
model.Items.Clear();
model.Items.Add(new ListItem("- Select car model -", ""));
model.Visible = true;
select.Enabled = false;
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 3 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>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.
A list of licenses authors might use can be found here
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.
Submit an article or tip