|
|
<%@ 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 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