[译]使用Gaia Ajax小部件创建简约的Ajax CRM系统
By robot-v1.0
本文链接 https://www.kyfws.com/applications/creating-a-minimalistic-ajax-crm-system-with-gaia-zh/
版权声明 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
- 6 分钟阅读 - 2807 个词 阅读量 0[译]使用Gaia Ajax小部件创建简约的Ajax CRM系统
原文地址：https://www.codeproject.com/Articles/20340/Creating-a-Minimalistic-Ajax-CRM-System-with-Gaia
原文作者：Thomas_Hansen
译文由本站 robot-v1.0 翻译
前言
An article about creating an Ajax CRM system using Gaia Ajax Widgets
有关使用Gaia Ajax小部件创建Ajax CRM系统的文章
介绍(Introduction)
今天,实际上存在着一百万个不同的Ajax框架,并且其中大多数都希望您进行大量的JavaScript开发. Gaia Ajax Widgets有所不同,因为它不需要您学习JavaScript,并且整个开发过程都可以围绕事件驱动的应用程序模型进行.(Today virtually a million different Ajax Frameworks exist, and most of them want you to do a lot of JavaScript development. Gaia Ajax Widgets is different since it does not require you to learn JavaScript and the whole development process can be focused around an Event Driven application model.)
今天,我们将创建一个小型Ajax应用程序,该应用程序具有一个简约的CRM系统以及一个Ajaxified DataGrid,该系统显示:“数据库"中的客户,以及一个用于创建新客户的Modal Ajax窗口.当您读完本文时,您应该对Gaia Ajax Widgets感到非常满意,它是在ASP.NET中创建Ajax解决方案的简单模型.(Today we’ll create a small Ajax Application featuring a minimalistic CRM system with an Ajaxified DataGrid which shows: the Customers in your “database”, and a Modal Ajax Window which is for creating new Customers. When you finish this article you should be pretty well aquinted with Gaia Ajax Widgets and it’s simple model for creating Ajax Solutions in ASP.NET.)
使用代码(Using the Code)
您在此解决方案中看到的大多数代码对于大多数ASP.NET开发人员来说都是众所周知的.但是,有两个有趣的地方值得强调.当您具有非Gaia控件并且希望在Ajax回调中重新呈现时,必须将这些控件包装在任何Gaia容器小部件内(例如Gaia Panel,PlaceHolder,Window或任何其他可以包含hold控件的Gaia控件).然后,当您希望重新渲染这些控件时,必须调用(Most of the code you see in this solution should be pretty well known to most ASP.NET developers. However, there are a couple of interesting points which should be emphasized. When you have non-Gaia controls and you wish to re-render in Ajax Callbacks you must wrap those controls inside any Gaia Container Widget (e.g. Gaia Panel, PlaceHolder, Window or any other Gaia Control that can contain chold controls). Then when you wish to re-render those controls you must call the) ForceAnUpdate 让Gaia Ajax容器控件包装"非Ajax控件”.在下面的代码中对转发器进行数据绑定时,可以看到一个示例.(for the Gaia Ajax Container control to wrap “non-Ajax controls.” An example of this can be seen when DataBinding the repeater in the code below.)
// Notice how we must FORCE an update of the Ajax Container Widget
// wrapping our Repeater...!
if (Manager.Instance.IsAjaxCallback)
repeaterPlaceHolder.ForceAnUpdate();
还要注意,此样本中的精选Ajax解决方案不包含一行JavaScript!还要注意,所有事情都是使用事件应用程序模型控制的.这意味着,每当您需要决定要做什么的核心部分发生任何事情时,都会引发一个Event,可以为其定义一个Event Handler.(Notice also that the featured Ajax Solution in this sample does not contain ONE single line of JavaScript! Also notice that everything is controlled using an Event Application Model. This means that everytime something happens in the core where you need to decide upon what to do, you will get an Event raised for which you can define an Event Handler.)
您在此处看到的示例使用以下小部件:(The sample you see here uses these widgets:)
- Gaia Ajax Button(Gaia Ajax Button)
- Gaia Ajax DropDownList(Gaia Ajax DropDownList)
- Gaia Ajax文字框(Gaia Ajax TextBox)
- Gaia Ajax DateTimePicker(Gaia Ajax DateTimePicker)
- Gaia Ajax单选按钮(Gaia Ajax RadioButtons)
- Gaia Ajax复选框(Gaia Ajax CheckBoxes)
- 盖亚`阿贾克斯(Gaia Ajax)橱窗(Gaia Ajax Window)
- Gaia Ajax DraggablePanel(Gaia Ajax DraggablePanel)
- Gaia Ajax PlaceHolder(Gaia Ajax PlaceHolder)
- ASP.NET中继器(ASP.NET Repater) 此外,该代码已被大量注释,并且应该具有很好的自我解释性,尽管如果您有任何疑问,我将尝试在此处监视论坛部分并尽可能频繁地回答.祝你今天愉快!(Also, the code is heavily commented and should be pretty self explanatory, though if you have questions I’ll try to monitor the forums section here and answer as frequently as possible. Have a nice day!)
关于Gaia Ajax小部件(About Gaia Ajax Widgets)
该下载内容包含打开,编码和运行解决方案所需的一切. Gaia Ajax Widgets是免费和开源软件(GPL),这意味着您可以自己创建Open Source和Free软件,而无需为库支付任何费用.尽管如果您希望创建封闭源代码的软件,也可以购买使用该库的商业许可.(The download contains everything you need to open, code and run the solution. Gaia Ajax Widgets is Free and Open Source Software (GPL) which means you can create Open Source and Free software yourself without having to pay anything for the library. Though if you wish to create closed-source software you can also purchase a commercial license for using the library.)
解决方案的代码背后(Codebehind of the Solution)
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代码(The ASPX Code for the Solution)
<%@ 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>
<!--<span class="code-comment"> This Button will make sure the Window becomes Visible when
clicked --></span>
<gaia:Button
runat="server"
ID="createNew"
Text="Create new Customer"
OnClick="createNew_Click" />
<!--<span class="code-comment"> Creating a Draggable Panel just for fun ;) --></span>
<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...! ;)
<!--<span class="code-comment"> 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...! --></span>
<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>
<!--<span class="code-comment"> Adding sorting to the Grid --></span>
<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>
<!--<span class="code-comment"> Actual Ajax Window, this is the declarative .aspx element
to create an Ajax Window which is Modal --></span>
<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>
许可
本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。
C# C#2.0 Windows .NET .NET2.0 WebForms ASP.NET Dev 新闻 翻译