Ext.NET 基础学习笔记05 (数据绑定/数据展示)

1.XTemplate绑定数据

<ext:Window runat="server" ID="win1" Title="XTemplaters用法" 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>

后台C#代码:

UserInfo userInfo = new UserInfo() { Name = "Jack", Gender = "M", Age = 30 };

win1.Data = userInfo;

2.使用Store处理数据

Store可以理解为一个数据容器(数据仓库,可以为我们提供需要显示的数据)，它包含Modal和Proxy。
　-- Modal：数据模型，包括一些字段等，通常与数据库中的字段、实体模型中的字段对应。
　-- Proxy：数据交互的代理，包括MemoryProxy、AjaxProxy、DirectProxy等

2.1 显示绑定了所有数据的Store

<ext:Panel runat="server" Width="600" Height="400" AutoScroll="true">
            <Items>
                <ext:DataView runat="server" ID="myDataView" ItemSelector=".info">　　　　　　　　　　　　　　//DataView用于显示数据
                    <Store>
                        <ext:Store runat="server" ID="storeUserInfo" PageSize="5">　　　　　　　　　　　　　　　　//Store用于提供数据
                            <Model>
                                <ext:Model runat="server" IDProperty="Name">
                                    <Fields>
                                        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
                                    </Fields>
                                     <Fields>
                                        <ext:ModelField Name="Gender" Type="String"></ext:ModelField>
                                    </Fields>
                                     <Fields>
                                        <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>

后台C#代码:

private 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();
}

2.2 使用Store实现远程获取数据,远程排序,分页等功能

<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>
                                        </Fields>
                                        <Fields>
                                            <ext:ModelField Name="Gender" Type="String"></ext:ModelField>
                                        </Fields>
                                        <Fields>
                                            <ext:ModelField Name="Age" Type="Int"></ext:ModelField>
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Proxy>　　　　　　　　　　　　　　　　　　　　　　　　
                                    <ext:AjaxProxy Url="StoreHandler.ashx">　　//通过一般处理程序来获取数据
                                        <ActionMethods Read="GET"></ActionMethods>
                                        <Reader>
                                            <ext:JsonReader RootProperty="data" />
                                        </Reader>
                                    </ext:AjaxProxy>
                                </Proxy>
                            </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>

后台C#代码(StoreHandler.ashx):

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";

StoreRequestParameters 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));　　　　//将数据集合转换为JSON数据返回到客户端
}

private Paging<UserInfo> GetPageData(int start, int limit, DataFilter[] filter, DataSorter[] sorter)
{
List<UserInfo> userInfoList = UserInfo.GetData();

Paging<UserInfo> result = new Paging<UserInfo>();

result.TotalRecords = userInfoList.Count;　　　　　　//TotalRecords : 数据总行数,用于客户端分页(生成页码)
result.Data = userInfoList.Skip(start).Take(limit).ToList();　　//Data: IEnumerable<T> 类型的数据集合

return result;
}

posted @ 2020-05-28 11:51 Peaceful_Pig 阅读(245) 评论(0) 编辑收藏举报

刷新页面返回顶部

安静的猪

Ext.NET 基础学习笔记05 (数据绑定/数据展示)

公告