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;
}

来看看显示效果:

image

使用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,来看看效果吧:

image

注意,在这段代码中有一个坑,就是用来处理数据的那段js,莫名其妙的执行两次,还没有找到原因。

OK,以上就是这篇文章的内容,下一篇中将介绍Ext.Net Store 如何异步的获取数据、服务器分页等。




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/3556098.html,如需转载请自行联系原作者

相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
9天前
mvc.net分页查询案例——DLL数据访问层(HouseDLL.cs)
mvc.net分页查询案例——DLL数据访问层(HouseDLL.cs)
10 0
|
9天前
|
存储 测试技术 计算机视觉
高维数据惩罚回归方法:主成分回归PCR、岭回归、lasso、弹性网络elastic net分析基因数据
高维数据惩罚回归方法:主成分回归PCR、岭回归、lasso、弹性网络elastic net分析基因数据
|
9天前
|
SQL 数据库
使用ADO.NET查询和操作数据
使用ADO.NET查询和操作数据
12 0
|
9天前
|
SQL 开发框架 .NET
ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
ASP.NET WEB+EntityFramework数据持久化——考核练习库——1、用户管理系统(考点:查询列表、增加、删除)
74 0
|
9天前
|
Oracle 关系型数据库 数据管理
.NET医院检验系统LIS源码,使用了oracle数据库,保证数据的隔离和安全性
LIS系统实现了实验室人力资源管理、标本管理、日常事务管理、网络管理、检验数据管理(采集、传输、处理、输出、发布)、报表管理过程的自动化,使实验室的操作人员和管理者从繁杂的手工劳作中解放出来,提高了检验人员的工作效率和效益,降低了劳动成本和差错发生率。
|
7月前
|
前端开发 JavaScript
.net core 前端传递参数有值 后端接收到的数据却是null
1、问题分析 在做接口测试时,偶然出现了前端输出有值,但是后端断点调试时却出现接收参数总是为null的情况 2、解决办法 前端打印log,看前端的每一个传值的数据类型,与后端请求参数类进行认真的一一比对 小技巧: ① 直接打印调用接口的传参值的数据类型,例如 console.log(type of this.form.name) --string console.log(type of this.form.age) --number 打印的数据类型与后端接口的参数类比对,查出不对应的类型 ② 关于非必填的值,默认传值可能出现空字符串(' ')、NaN值(Not a Number
116 0
|
8月前
|
JSON 数据格式
.NET Core - 配置绑定:使用强类型对象承载配置数据
.NET Core - 配置绑定:使用强类型对象承载配置数据
|
10月前
|
数据库 C#
C#,.net,winform导入Excel功能以及下载Excel文件到本地,并使用SqlBulkCopy把DataTable类型的数据写入到sqlserver数据库中
C#,.net,winform导入Excel功能以及下载Excel文件到本地,并使用SqlBulkCopy把DataTable类型的数据写入到sqlserver数据库中
245 0
|
12月前
|
数据采集 JavaScript 前端开发
为什么用Python爬取网页数据,在检查net work中很多和教程上不一样?
今天就来说说,我们为什么会出现这个问题,以及我们应该怎么做,才能解决这个问题?
|
Web App开发
.Net Core下使用HtmlAgilityPack解析采集互联网数据
.Net Core下使用HtmlAgilityPack解析采集互联网数据
97 0