Ext.Net学习笔记08：Ext.Net中使用数据
之前的七篇文章都是介绍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 如何异步的获取数据、服务器分页等。
起飞网原创首发，转载请注明出处。