之前的幾篇文章都是介紹Ext.Net較為基礎的東西，今天的這一篇將介紹數據的一些用法，包括XTemplate綁定數據、Store（Modal、PRoxy）、ComboBox的用法等。
XTemplate是個模板，當我們為一個XTemplate綁定數據之后，將會按照模板的預定格式進行顯示。
<ext:Window runat="server" ID="win1" Title="XTemplates用法" Width="300" Height="200"> <Tpl runat="server"> <Html> <div class="info"> <p>姓名：{Name}</p> <p>性別：{Gender}</p> <p>年齡：{Age}</p> </div> </Html> </Tpl></ext:Window>然后我們有一個這樣的實體類：
public class UserInfo{ public string Name { get; set; } public string Gender { get; set; } public int Age { get; set; }}UserInfo類中的字段分別對應模板中字段對應。然后我們在頁面加載的時候完成數據綁定：
protected void Page_Load(object sender, EventArgs e){ UserInfo userInfo = new UserInfo() { Name = "呂布", Gender = "男", Age = 24 }; win1.Data = userInfo;}來看看顯示效果：
Store可以理解為一個數據容器，它包含Modal和Proxy。
接下來是一個例子，這個例子中使用了DataView來顯示數據，使用Store來提供數據，這個例子仍然使用我們上面的UserInfo類。
<ext:Panel runat="server" Width="600" Height="400" AutoScroll="true"> <Items> <ext:DataView runat="server" ID="myDataView" ItemSelector=".info"> <Store> <ext:Store runat="server" ID="storeUserInfo" PageSize="6"> <Model> <ext:Model runat="server" IDProperty="Name"> <Fields> <ext:ModelField Name="Name" Type="String"></ext:ModelField> <ext:ModelField Name="Gender" Type="String"></ext:ModelField> <ext:ModelField Name="Age" Type="Int"></ext:ModelField> </Fields> </ext:Model> </Model> </ext:Store> </Store> <Tpl runat="server"> <Html> <tpl for="."> <div class="info"> <p>姓名：{Name}</p> <p>性別：{Gender}</p> <p>年齡：{Age}</p> </div> </tpl> </Html> </Tpl> </ext:DataView> </Items> <BottomBar> <ext:PagingToolbar runat="server" StoreID="storeUserInfo"></ext:PagingToolbar> </BottomBar></ext:Panel>在這段代碼中，我們定義了一個DataView，DataView中包含了一個Store和一個Tpl模板，在代碼的最后，我們添加了分頁處理，使用了PagingToolbar。我們在后臺代碼中為Store綁定數據：
protected void Page_Load(object sender, EventArgs e) { BindDataView(); } protected void BindDataView() { List<UserInfo> userInfoList = new List<UserInfo>(); for (int i = 1; i <= 11; i++) { UserInfo userInfo = new UserInfo() { Name = "David" + i, Gender = "男", Age = 18 + i }; userInfoList.Add(userInfo); } storeUserInfo.DataSource = userInfoList; storeUserInfo.DataBind(); }CSS樣式：
.info { border: 1px solid #ccc; padding:5px; margin:5px; width:280px; float:left; background:#efefef; }效果如下：
介紹了如何使用數據，將數據綁定在一個DataView中進行顯示，里面用到了Store，只不過那是一個直接綁定所有數據的Store，并不具備遠程獲取數據、遠程排序、分頁等功能，今天我們來看看如何實現。
首先來創建一般處理程序，我命名為StoreHandler.ashx，然后它的處理過程代碼如下：
public void ProcessRequest(HttpContext context){ context.Response.ContentType = "application/json"; var requestParams = new StoreRequestParameters(context); int start = requestParams.Start; int limit = requestParams.Limit; DataSorter[] sorter = requestParams.Sort; DataFilter[] filter = requestParams.Filter; Paging<UserInfo> employees = GetPageData(start, limit, filter, sorter); context.Response.Write(JSON.Serialize(employees));}這個方法中，我們首先使用HttpContext創建一個StoreRequestParameters對象，這個對象中包含Start、Limit、Page、Sort、Filter、Group等參數。
我們在獲取到這些數據以后，通過GetPageData來取到符合條件的數據，然后創建一個Paging<T>類的實例，這個類中包含了Data和TotalRecords兩個重要的屬性
我們的獲取數據方法的代碼如下：
public Paging<UserInfo> GetPageData(int start, int limit, DataFilter[] filter, DataSorter[] sorter){ var userInfoList = UserInfo.GetData(); Paging<UserInfo> result = new Paging<UserInfo>(); result.TotalRecords = userInfoList.Count; result.Data = userInfoList.Skip(start).Take(limit).ToList(); return result;}Index.aspx.cs文件部分代碼：
public partial class Index : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } } public class UserInfo { public string Name { get; set; } public string Gender { get; set; } public int Age { get; set; } public static List<UserInfo> GetData() { List<UserInfo> userInfoList = new List<UserInfo>(); for (int i = 1; i <= 11; i++) { UserInfo userInfo = new UserInfo() { Name = "David" + i, Gender = "男", Age = 18 + i }; userInfoList.Add(userInfo); } return userInfoList; } }有了這個handler，我們接下來需要對Store進行改造：
<ext:Store runat="server" ID="storeUserInfo" PageSize="6" RemoteFilter="true" RemoteSort="true"> <Model> <ext:Model ID="Model1" runat="server" IDProperty="Name"> <Fields> <ext:ModelField Name="Name" Type="String"></ext:ModelField> <ext:ModelField Name="Gender" Type="String"></ext:ModelField> <ext:ModelField Name="Age" Type="Int"></ext:ModelField> </Fields> </ext:Model> </Model> <Proxy> <ext:AjaxProxy Url="StoreHandler.ashx"> <ActionMethods Read="GET" /> <Reader> <ext:JsonReader Root="data" /> </Reader> </ext:AjaxProxy> </Proxy></ext:Store>
AjaxProxy的Url就是我們的Handler地址。ActionMethods是請求方式，JsonReader是reader屬性，它獲取的數據根節點是data。這里都是根據ExtJS中ajaxproxy來定義的，你可以通過看原文博主之前的文章來了解這方面的內容：ExtJS 4.2 教程-06：服務器代理（proxy），顯示效果和前面的一樣。
PageProxy是Ext.Net實現的一種分頁方式，它與使用handler的方式不同，PageProxy通過實現OnReadData事件來完成分頁。
這里我們直接看Store的代碼：
<ext:Store runat="server" ID="storeUserInfo" PageSize="6" OnReadData="storeUserInfo_ReadData"> <Model> <ext:Model ID="Model1" runat="server" IDProperty="Name" > <Fields> <ext:ModelField Name="Name" Type="String"></ext:ModelField> <ext:ModelField Name="Gender" Type="String"></ext:ModelField> <ext:ModelField Name="Age" Type="Int"></ext:ModelField> </Fields> </ext:Model> </Model> <Proxy> <ext:PageProxy></ext:PageProxy> </Proxy></ext:Store>
然后再后臺代碼中實現storeUserIn
新聞熱點
疑難解答
