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 如何异步的获取数据、服务器分页等。
起飞网原创首发,转载请注明出处。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。