使用 Gaia Ajax Widgets 创建极简 Ajax CRM 系统
3.00/5 (7投票s)
2007年9月4日
2分钟阅读
46072
545
一篇关于使用 Gaia Ajax Widgets 创建 Ajax CRM 系统的文章。
引言
如今，几乎有数百万个不同的 Ajax 框架存在，而且大多数框架都要求你进行大量的 JavaScript 开发。Gaia Ajax 组件则不同，因为它不需要你学习 JavaScript，整个开发过程可以围绕事件驱动的应用程序模型展开。
今天，我们将创建一个小型 Ajax 应用程序，它具有一个极简的 CRM 系统，其中包含一个 Ajax 化后的 DataGrid，用于显示“数据库”中的客户，以及一个用于创建新客户的模态 Ajax 窗口。完成本文后，你应该对 Gaia Ajax 组件及其在 ASP.NET 中创建 Ajax 解决方案的简单模型有相当的了解。
Using the Code
你在此解决方案中看到的大部分代码对于大多数 ASP.NET 开发人员来说应该都比较熟悉。但是，有一些有趣的要点值得强调。当你拥有非 Gaia 控件，并且希望在 Ajax 回调中重新渲染它们时，必须将这些控件包装在任何 Gaia 容器控件中（例如 Gaia Panel、PlaceHolder、Window 或任何可以包含子控件的 Gaia 控件）。然后，当你希望重新渲染这些控件时，必须调用 Gaia Ajax 容器控件的 ForceAnUpdate 方法来包装“非 Ajax 控件”。可以在下面代码中 DataBinding repeater 时看到一个示例。
// Notice how we must FORCE an update of the Ajax Container Widget
// wrapping our Repeater...!
if (Manager.Instance.IsAjaxCallback)
repeaterPlaceHolder.ForceAnUpdate();
请注意，此示例中提供的 Ajax 解决方案不包含任何一行 JavaScript 代码！同时请注意，一切都使用事件应用程序模型进行控制。这意味着每次在核心中发生需要决定如何处理的事情时，都会引发一个事件，你可以为该事件定义一个事件处理程序。
此示例使用以下组件
- Gaia Ajax 按钮
- Gaia Ajax 下拉列表
- Gaia Ajax 文本框
- Gaia Ajax 日期时间选择器
- Gaia Ajax 单选按钮
- Gaia Ajax 复选框
- Gaia Ajax 窗口
- Gaia Ajax 可拖动面板
- Gaia Ajax 占位符
- ASP.NET Repeater
此外，代码注释非常详细，应该相当易于理解，如果你有任何问题，我会尽量监控这里的论坛部分并尽快回复。祝你愉快！
关于 Gaia Ajax 组件
下载包含打开、编码和运行解决方案所需的一切。Gaia Ajax 组件是免费且开源的软件 (GPL)，这意味着你可以创建开源和免费软件，而无需为该库支付任何费用。但是，如果你希望创建闭源软件，也可以购买该库的商业许可证。
解决方案的代码隐藏部分
using System;
using System.Collections.Generic;
using Gaia.WebWidgets;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// If this is the initial hit on the page we build a default
// Database to show our user
BuildDefaultDatabase();
RebindRepeater();
}
}
#region DataGrid/Repeater stuff
// This just re-databinds our ASP.NET Repeater and flush
private void RebindRepeater()
{
// Here we sort the Customers according to whatever value is selected
// in the Sorting DropDownList object...!
Customers.Sort(
delegate(Customer left, Customer right)
{
switch (sortDdl.SelectedValue)
{
case "Name":
return left.Name.CompareTo(right.Name);
case "Address":
return left.Address.CompareTo(right.Address);
case "BirthDate":
return left.BirthDate.CompareTo(right.BirthDate);
case "Male":
return left.Male.CompareTo(right.Male);
default:
throw new ApplicationException("System error...!!");
}
});
customerRep.DataSource = Customers;
customerRep.DataBind();
// Notice how we must FORCE an update of the Ajax Container Widget
// wrapping our Repeater...!
if (Manager.Instance.IsAjaxCallback)
repeaterPlaceHolder.ForceAnUpdate();
}
// Here we're building a default "database", note that in a real
// application you'd use an ACTUAL
// database and NOT the Session object to store this data ,)
private void BuildDefaultDatabase()
{
List list = new List();
list.Add(new Customer(Guid.NewGuid(), "Thomas Hansen",
"Galactica 614", new DateTime(1974, 5, 16), true));
list.Add(new Customer(Guid.NewGuid(), "Jan Blomquist",
"Astronomicum 792", new DateTime(1977, 12, 23), true));
list.Add(new Customer(Guid.NewGuid(), "Stian Solberg", "Uranus 1161",
new DateTime(1977, 8, 11), true));
list.Add(new Customer(Guid.NewGuid(), "Kariem Ali", "Milky Way 384",
new DateTime(1982, 4, 7), true));
Session["customers"] = list;
}
private Customer GetCustomer(Guid id)
{
// Looping through to FIND the Customer
Customer current = Customers.Find(
delegate(Customer idx)
{
if (idx.Id == id)
return true;
return false;
});
return current;
}
// Returns the Id of the Customer inside the repeater item
private static Guid GetCustomerId(
System.Web.UI.WebControls.RepeaterItem repItem)
{
HiddenField idField = repItem.Controls[1] as HiddenField;
Guid id = new Guid(idField.Value);
return id;
}
// This method is being called by the OnTextChanged Event from our NAME
// TextBox
protected void NameChanged(object sender, EventArgs e)
{
// Getting the control first...
TextBox edit = (TextBox)sender;
// Retrieving the Repeater row
System.Web.UI.WebControls.RepeaterItem repItem = (
System.Web.UI.WebControls.RepeaterItem)edit.Parent;
// Finding current Customer
Customer current = GetCustomer(GetCustomerId(repItem));
// updating the Customers name...
current.Name = edit.Text;
}
// This method is being called by the OnTextChanged Event from our NAME
// TextBox
protected void AddressChanged(object sender, EventArgs e)
{
// Getting the control first...
TextBox edit = (TextBox)sender;
// Retrieving the Repeater row
System.Web.UI.WebControls.RepeaterItem repItem = (
System.Web.UI.WebControls.RepeaterItem)edit.Parent;
// Finding current Customer
Customer current = GetCustomer(GetCustomerId(repItem));
// updating the Customers name...
current.Address = edit.Text;
}
// This method is being called by the OnTextChanged Event from our NAME
// TextBox
protected void BirthDateChanged(object sender, EventArgs e)
{
// Getting the control first...
DateTimePicker edit = (DateTimePicker)sender;
// Retrieving the Repeater row
System.Web.UI.WebControls.RepeaterItem repItem = (
System.Web.UI.WebControls.RepeaterItem)edit.Parent;
// Finding current Customer
Customer current = GetCustomer(GetCustomerId(repItem));
// updating the Customers BirthDate...
if (edit.Value.HasValue)
current.BirthDate = edit.Value.Value;
}
protected void MaleCheckedChanged(object sender, EventArgs e)
{
// Getting the control first...
RadioButton edit = (RadioButton)sender;
// Retrieving the Repeater row
System.Web.UI.WebControls.RepeaterItem repItem = (
System.Web.UI.WebControls.RepeaterItem)edit.Parent;
// Finding current Customer
Customer current = GetCustomer(GetCustomerId(repItem));
// updating the Customers Sex...
current.Male = edit.Checked;
}
protected void FemaleCheckedChanged(object sender, EventArgs e)
{
// Getting the control first...
RadioButton edit = (RadioButton)sender;
// Retrieving the Repeater row
System.Web.UI.WebControls.RepeaterItem repItem = (
System.Web.UI.WebControls.RepeaterItem)edit.Parent;
// Finding current Customer
Customer current = GetCustomer(GetCustomerId(repItem));
// updating the Customers Sex...
current.Male = !edit.Checked;
}
#endregion
// Called when Sorting order changes...
protected void sortDdl_SelectedIndexChanged(object sender, EventArgs e)
{
// Since all the logic happens with the Rebind method anyway we
// just dispatch this call to that method :)
RebindRepeater();
}
// Shorthand accessor for our "Database"
public List Customers
{
get { return (List)Session["customers"]; }
}
// This one is being called when the Create New Customer button is
// pushed...!
protected void createNew_Click(object sender, EventArgs e)
{
// Showing Ajax Window just by setting it's Visible property to TRUE
newCustomerWnd.Visible = true;
}
// This one is being called when the user is FINISHED creating a new
// Customer and clicks the "Create" button...!
protected void createNewCustomer_Click(object sender, EventArgs e)
{
try
{
Customer n = new Customer();
n.Name = newName.Text;
n.Address = newAdr.Text;
n.BirthDate = newDate.Value.Value;
n.Male = newMale.Checked;
newCustomerWnd.Visible = false;
Customers.Add(n);
RebindRepeater();
}
catch (Exception err)
{
Manager.Instance.AddScriptForClientSideEval("alert('something " +
"went wrong while trying to create new customer!" +
"Date error...??');");
}
}
}
解决方案的 ASPX 代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>CodeProject Tutorial - A Minimalistic Ajax CRM system with Gaia</title> <link href="mac_os_x.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <!-- This Button will make sure the Window becomes Visible when clicked --> <gaia:Button runat="server" ID="createNew" Text="Create new Customer" OnClick="createNew_Click" /> <!-- Creating a Draggable Panel just for fun ;) --> <gaiaExt:DraggablePanel runat="server" style="padding:35px;border:solid 1px #aaa;background-color:#aaf;width:600px;cursor:move;" ID="dragger"> Try to move me around...! ;) <!-- We must wrap our ASP.NET Repeater inside a Gaia Container Control (here the PlaceHolder) in order to be able to RE-render the Repeater in Gaia Ajax Callbacks...! --> <gaia:PlaceHolder runat="server" ID="repeaterPlaceHolder"> <table style="background-color:#ddf;border:solid 1px #aaa;cursor:default;"> <asp:Repeater runat="server" ID="customerRep"> <ItemTemplate> <tr> <td> <gaia:HiddenField runat="server" Value='<%# DataBinder.Eval( Container.DataItem, "Id")%>' /> <gaia:TextBox runat="server" AutoPostBack="true" OnTextChanged="NameChanged" Text='<%# DataBinder.Eval( Container.DataItem, "Name")%>' /> </td> <td> <gaia:TextBox runat="server" AutoPostBack="true" OnTextChanged="AddressChanged" Text='<%# DataBinder.Eval( Container.DataItem, "Address")%>' /> </td> <td> <gaia:DateTimePicker runat="server" CssClass="mac_os_x" HasDropDownButton="true" Format="yyyy.MM.dd" Width="80px" HasTimePart="false" AutoPostBack="true" OnTextChanged="BirthDateChanged" Text='<%# ((DateTime)DataBinder.Eval( Container.DataItem, "BirthDate")).ToString( "yyyy.MM.dd")%>' /> </td> <td> <gaia:RadioButton runat="server" GroupName="maleGroup" Text="Male" AutoPostBack="true" OnCheckedChanged="MaleCheckedChanged" Checked='<%# DataBinder.Eval( Container.DataItem, "Male").Equals( true)%>' /> <gaia:RadioButton runat="server" GroupName="maleGroup" Text="Female" AutoPostBack="true" OnCheckedChanged= "FemaleCheckedChanged" Checked='<%# !DataBinder.Eval( Container.DataItem, "Male").Equals( true)%>' /> </td> </tr> </ItemTemplate> </asp:Repeater> </table> </gaia:PlaceHolder> </gaiaExt:DraggablePanel> <!-- Adding sorting to the Grid --> <gaia:DropDownList runat="server" ID="sortDdl" AutoPostBack="true" OnSelectedIndexChanged="sortDdl_SelectedIndexChanged"> <asp:ListItem Text="Name" /> <asp:ListItem Text="Address" /> <asp:ListItem Text="BirthDate" /> <asp:ListItem Text="Male" /> </gaia:DropDownList> <!-- Actual Ajax Window, this is the declarative .aspx element to create an Ajax Window which is Modal --> <gaia:Window runat="server" ID="newCustomerWnd" Visible="false" CssClass="mac_os_x" CenterInForm="true" Width="450" Modal="true" Height="200"> <table style="margin:15px;border:solid 1px #ccc;"> <tr> <td>Name: </td> <td> <gaia:TextBox runat="server" ID="newName" /> </td> <td>Birth Date: </td> <td> <gaia:DateTimePicker runat="server" CssClass="mac_os_x" HasDropDownButton="true" Format="yyyy.MM.dd" Width="80px" HasTimePart="false" Text="1982.01.01" ID="newDate" /> </td> </tr> <tr> <td>Address: </td> <td> <gaia:TextBox runat="server" ID="newAdr" /> </td> <td>Male: </td> <td> <gaia:CheckBox runat="server" ID="newMale" /> </td> </tr> <tr> <td colspan="4" style="text-align:right;"> <gaia:Button runat="server" ID="createNewCustomer" OnClick="createNewCustomer_Click" Text="Create" /> </td> </tr> </table> </gaia:Window> </div> </form> </body> </html>