接下来演示第一个EXTNET使用案例,在演示之前请容我首先先介绍EXTNET中最基本的几个标记元素:
ext:ResourceManager : 很明示是代码标记是管理EXTNET中的所有代码,如果没有此标记,EXTNET代码将不会运行。
ext:Store : 存储作用
ext:GridPanel: 显示表格。
注意:EXTNET操作方式是基于数据,所以将页面显示的数据可以优先存储在ext:Store标记中,然后能过GridPanel绑定数据存储即可,类似之前WebForm中绑定数据源的方式,只不将数据直接绑定在ext:Store标签中,然后通过ext:GridPanel来显示或者读取ext:Store中的数据即可,文章后将会继续说明方式,目前只是简单说明使用。同时ext:Store中可以绑定JSON,也可以绑定数组数据,还可以XML,大家可以多尝试,同时也告诉一个好消息,EXTNET的所有控件都是可以托动实现,与WebForm开发方式一样,漂亮的页面,只需几分钟就搞定,特别符合没地tml+css的程序员们。
第一、页面代码如下:
View Code
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 2 3 <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %> 4 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 7 <html xmlns="http://www.w3.org/1999/xhtml" > 8 <head runat="server"> 9 <title>Ext测试信息</title> 10 </head> 11 <body> 12 <form id="form1" runat="server"> 13 <ext:ResourceManager ID="ResourceManager1" runat="server" /> 14 <ext:Store ID="Store1" runat="server"> 15 <Reader> 16 <ext:JsonReader> 17 <Fields> 18 <ext:RecordField Name="EmployeeID" Type="Int"></ext:RecordField> 19 <ext:RecordField Name="LastName" Type="String"></ext:RecordField> 20 <ext:RecordField Name="City" Type="String"></ext:RecordField> 21 <ext:RecordField Name="HomePhone" Type="String"></ext:RecordField> 22 <ext:RecordField Name="Country" Type="String"></ext:RecordField> 23 </Fields> 24 </ext:JsonReader> 25 </Reader> 26 </ext:Store> 27 <ext:GridPanel StoreID="Store1" ID="GridPanel1" runat="server" Height="300" Title="Title"> 28 <ColumnModel ID="ctl20"> 29 <Columns> 30 <ext:Column Header="EmployeeID" DataIndex="EmployeeID"></ext:Column> 31 <ext:Column Header="LastName" DataIndex="LastName"></ext:Column> 32 <ext:Column Header="City" DataIndex="City"></ext:Column> 33 <ext:Column Header="HomePhone" DataIndex="HomePhone"></ext:Column> 34 <ext:Column Header="Country" DataIndex="Country"></ext:Column> 35 </Columns> 36 </ColumnModel> 37 </ext:GridPanel> 38 </form> 39 </body> 40 </html>
第二、页面CS代码如下:
View Code
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using Drgon.DAL; 8 9 namespace Dragon.Web 10 { 11 public partial class _Default : System.Web.UI.Page 12 { 13 protected void Page_Load(object sender, EventArgs e) 14 { 15 this.Store1.DataSource = Employee.FindAll(); 16 this.Store1.DataBind(); 17 } 18 } 19 }
第三、员工类如下:
View Code
1 // 2 // Generated by ActiveRecord Generator 3 // 4 // 5 namespace Drgon.DAL 6 { 7 using Castle.ActiveRecord; 8 9 10 [ActiveRecord("Employees")] 11 public class Employee : ActiveRecordBase 12 { 13 14 private int _employeeID; 15 16 private string _lastName; 17 18 private string _city; 19 20 private string _address; 21 22 private string _homePhone; 23 24 private string _country; 25 26 [PrimaryKey(PrimaryKeyType.Native)] 27 public int EmployeeID 28 { 29 get 30 { 31 return this._employeeID; 32 } 33 set 34 { 35 this._employeeID = value; 36 } 37 } 38 39 [Property()] 40 public string LastName 41 { 42 get 43 { 44 return this._lastName; 45 } 46 set 47 { 48 this._lastName = value; 49 } 50 } 51 52 [Property()] 53 public string City 54 { 55 get 56 { 57 return this._city; 58 } 59 set 60 { 61 this._city = value; 62 } 63 } 64 65 [Property()] 66 public string Address 67 { 68 get 69 { 70 return this._address; 71 } 72 set 73 { 74 this._address = value; 75 } 76 } 77 78 [Property()] 79 public string HomePhone 80 { 81 get 82 { 83 return this._homePhone; 84 } 85 set 86 { 87 this._homePhone = value; 88 } 89 } 90 91 [Property()] 92 public string Country 93 { 94 get 95 { 96 return this._country; 97 } 98 set 99 { 100 this._country = value; 101 } 102 } 103 104 public static void DeleteAll() 105 { 106 ActiveRecordBase.DeleteAll(typeof(Employee)); 107 } 108 109 public static Employee[] FindAll() 110 { 111 return ((Employee[])(ActiveRecordBase.FindAll(typeof(Employee)))); 112 } 113 114 public static Employee Find(int EmployeeID) 115 { 116 return ((Employee)(ActiveRecordBase.FindByPrimaryKey(typeof(Employee), EmployeeID))); 117 } 118 } 119 }
第四、效果如下:
如需源码的请发送邮件,由于空间太小,不能打包上传,请见谅。