之前的七篇文章都是介紹Ext.Net較為基礎的東西，今天的這一篇將介紹數據的一些用法，包括XTemplate綁定數據、Store（Modal、Proxy）、ComboBox的用法等。
XTemplate綁定數據
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 = "QeeFee", Gender = "M", Age = 30 }; win1.Data = userInfo; }
來看看顯示效果：
使用Store處理數據
Store可以理解為一個數據容器，它包含Modal和Proxy。
- Modal：數據模型，包括一些字段等，通常與數據庫中的字段、實體模型中的字段對應。
- Proxy：數據交互的代理，包括MemoryProxy、AjaxProxy、DirectProxy等
接下來是一個例子，這個例子中使用了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="5"> <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 BindDataView() { List<UserInfo> userInfoList = new List<UserInfo>(); for (int i = 1; i <= 12; i++) { UserInfo userInfo = new UserInfo() { Name = "QeeFee" + i, Gender = "M", Age = 30 + i }; userInfoList.Add(userInfo); } storeUserInfo.DataSource = userInfoList; storeUserInfo.DataBind(); }
其他的一些代碼：
var MyApp = { userInfo: { prepareData: function (data) { data.Gender = data.Gender == "M" ? "男" : "女"; return data; } } };
上面的js代碼用來處理數據
.info { border: 1px solid #ccc; padding:5px; margin:5px; width:280px; float:left; background:#efefef; }
上面的css代碼用來處理顯示樣式
OK，來看看效果吧：
注意，在這段代碼中有一個坑，就是用來處理數據的那段js，莫名其妙的執行兩次，還沒有找到原因。
OK，以上就是這篇文章的內容，下一篇中將介紹Ext.Net Store 如何異步的獲取數據、服務器分頁等。