English Version: http://dflying.dflying.net/1/archive/114_display_one_item_in_a_collection_using_aspnet_atlas_itemview_control.html

在这个系列中，我将介绍一些Atlas Sys.UI.Data中较高级的控件，包括：

  1. Sys.UI.Data.ListView：使用ASP.NET Atlas ListView控件显示列表数据
  2. Sys.UI.Data.ItemView：使用ASP.NET Atlas ItemView控件显示集合中的单个数据
  3. Sys.UI.Data.DataNavigator：使用 ASP.NET Atlas PageNavigator控件实现客户端分页导航
  4. Sys.UI.Data.SortBehavior：使用ASP.NET Atlas SortBehavior实现客户端排序
  5. Sys.UI.Data.XSLTView：使用ASP.NET Atlas XSLTView控件用XSLT修饰并显示XML数据

这篇是其中的第二篇：使用ASP.NET Atlas ItemView控件显示集合中的单个数据

有时候我们需要显示给用户列表中某一项的详细信息，例如，在购物程序中的产品详细情况。ASP.NET Atlas ItemView客户端控件为您提供了对这项功能的支持，就像ASP.NET服务器端控件DetailsView一样，但Atlas ItemView控件完全在客户端运行。

ItemView类（ListView类同样，见使用ASP.NET Atlas ListView控件显示列表数据 ）继承于Sys.UI.Data.DataControl基类。该基类提供了一些公共的属性，包括：

  1. canMoveNext：当前记录后是否有下一条记录。
  2. canMovePrevious：当前记录前是否有前一条记录。
  3. data：控件包含的数据集合。
  4. dataIndex：当前记录的index。
  5. dataItem：基于dataIndex的当前的记录。
  6. length：记录的条目数。

同时还包括下列方法：

  1. addItem：添加一条记录到当前的数据集合中。
  2. deleteCurrentItem：删除基于dataIndex的当前记录。
  3. moveNext：如果canMoveNext为true，将dataIndex加1，指向下一条记录。
  4. movePrevious：如果canMovePrevious为true，将dataIndex减1，指向前一条记录。

请注意所有的以上操作都仅在客户端，也就是说只修改了客户端的数据。所以如果您希望将改变提交到服务器，则需要调用DataSource的相应方法。

ItemView通过继承获得了以上的属性和方法，并且还对基类有如下扩展：

  1. itemTemplate：指定项目模版。Atlas可以根据这个模版渲染您的内容。
  2. emptyTemplate：指定无数据时的模版。当数据集合为空或者DataSource还在取得数据的过程中时，Atlas会显示这个模版。

以上是ItemView的简要介绍。让我们通过一个例子来熟悉ItemView。这个程序基于Atlas官方发布的示例程序，并适当做了一些简化。

首先暴露一个Web Service以被Atlas使用。

定义item entry类：

class Entry
public class Entry
{
    private string _name;
    private string _description;
    private int _id;

    [DataObjectField(true, true)]
    public int Id
    {
        get { return _id; }
        set { _id = value; }
    }

    [DataObjectField(false)]
    [DefaultValue("New row")]
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }

    [DataObjectField(false)]
    [DefaultValue("")]
    public string Description
    {
        get { return _description; }
        set { _description = value; }
    }

    public Entry()
    {
        _id = -1;
    }

    public Entry(int id, string name, string description)
    {
        _id = id;
        _name = name;
        _description = description;
    }
}

定义Web Methods。我们需要提供Select，Insert，Update以及Delete方法以期对我们的数据集合进行完整的CRUD操作。注意到我们在初始化数据时使用了System.Threading.Thread.Sleep(2000)来模拟两秒钟的网络延迟，这样可以看到emptyTemplate中的内容。

Data Service
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyDataService : DataService
{
    static List<Entry> _data;
    static int _nextId;
    static object _dataLock = new object();

    private static List<Entry> Data
    {
        get
        {
            if (_data == null)
            {
                lock (_dataLock)
                {
                    if (_data == null)
                    {
                        System.Threading.Thread.Sleep(2000);
                        
                        _data = new List<Entry>();
                        _data.Add(new Entry(0, "ListView", "A control to display data using templates."));
                        _data.Add(new Entry(1, "Window", "A control to display dialogs."));
                        _data.Add(new Entry(2, "Weather", "A control to display local weather."));
                        _nextId = 3;
                    }
                }
            }
            return _data;
        }
    }

    [DataObjectMethod(DataObjectMethodType.Delete)]
    public void DeleteRow(int id)
    {
        foreach (Entry row in _data)
        {
            if (row.Id == id)
            {
                lock (_dataLock)
                {
                    _data.Remove(row);
                }
                break;
            }
        }
    }

    [DataObjectMethod(DataObjectMethodType.Select)]
    public Entry[] SelectRows()
    {
        return MyDataService.Data.ToArray();
    }

    [DataObjectMethod(DataObjectMethodType.Insert)]
    public Entry InsertRow(string name, string description)
    {
        Entry newRow;
        lock (_dataLock)
        {
            newRow = new Entry(_nextId++, name, description);
            _data.Add(newRow);
        }
        return newRow;
    }

    [DataObjectMethod(DataObjectMethodType.Update)]
    public void UpdateRow(Entry updateRow)
    {
        foreach (Entry row in _data)
        {
            if (row.Id == updateRow.Id)
            {
                row.Name = updateRow.Name;
                row.Description = updateRow.Description;
                break;
            }
        }
    }
}

然后，在ASP.NET中加入必须的标记，控件以及ItemView的模版。我们需要添加如下五部分的脚本：

  1. Atlas服务器端控件ScriptManager。所有的Atlas页面中都需要包含这个控件以装载Atlas所必须的JavaScript文件。
  2. id为detailsView的<div>，将被Atlas用来输出渲染后的内容。
  3. 导航部分，用于在在客户端集合中导航，以显示集合中不同的记录。
  4. 命令部分，用于修改，添加，删除记录（在客户端），并且提交到服务器。
  5. 模版部分，用于指定相应的ItemView模版。所有的模版将被置于一个隐藏的div中，这样不会在页面上显示出来。
<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />

<!-- Element for ItemView (container) -->
<div id="detailsView">
</div>

<!-- Navigators -->
<input type="button" id="previousButton" value="<" title="Go to previous row" />
<span id="rowIndexLabel"></span>
<input id="nextButton" type="button" value=">" title="Go to next row" />
|

<!-- Commands -->
<input type="button" id="addButton" value="New" title="Create a new row" />
<input type="button" id="delButton" value="Delete" title="Delete the current row" />
|
<input type="button" id="saveButton" value="Save" title="Save all pending changes" />
<input type="button" id="refreshButton" value="Refresh" title="Discard pending changes and get the latest data from the server" />

<!-- Templates -->
<div style="visibility: hidden; display: none">
    <div id="detailsTemplate">
        Name:
        <input id="nameField" size="30" /><br />
        Description:<br />
        <textarea id="descriptionField" rows="4" cols="40"></textarea><br />
    </div>
    <div id="emptyTemplate">
        Getting Data
    </div>
</div>

最后需要做的是在页面上添加Atlas脚本。

下面是DataSource的脚本：

<dataSource id="dataSource" serviceURL="MyDataService.asmx" autoLoad="true" />

下面是ItemView的脚本。我们将绑定上面的DataSource控件作为数据源，并且将ItemView的enabled属性绑定到DataSource的isReady属性上，以期在数据源没有装载完成前禁用ItemView。同样为ItemView定义了itemTemplate和emptyTemplate。

<itemView id="detailsView">
    <bindings>
        <binding dataContext="dataSource" dataPath="data" property="data"/>
        <binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
    </bindings>
    <itemTemplate>
        <template layoutElement="detailsTemplate">
            <textBox id="nameField">
                <bindings>
                    <binding dataPath="Name" property="text" direction="InOut"/>
                </bindings>
            </textBox>
            <textBox id="descriptionField">
                <bindings>
                    <binding dataPath="Description" property="text" direction="InOut"/>
                </bindings>
            </textBox>
        </template>
    </itemTemplate>
    <emptyTemplate>
        <template layoutElement="emptyTemplate" />
    </emptyTemplate>
</itemView>

下面是导航部分的脚本。我们提供了一个label用来显示当前的记录编号（记录index加上1，使用了Atlas的Add transformer。关于Atlas transformer，您可以参考：在ASP.NET Atlas中创建自定义的Transformer ）。还提供了前后移动记录的导航按钮（通过使用Atlas的InvokeMethod action调用相应的ItemView的方法）。

<button id="previousButton">
    <bindings>
        <binding dataContext="detailsView" dataPath="canMovePrevious" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="detailsView" method="movePrevious" />
    </click>
</button>

<label id="rowIndexLabel">
    <bindings>
        <binding dataContext="detailsView" dataPath="dataIndex" property="text" transform="Add" />
    </bindings>
</label>

<button id="nextButton">
    <bindings>
        <binding dataContext="detailsView" dataPath="canMoveNext" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="detailsView" method="moveNext" />
    </click>
</button>

下面是命令部分的脚本。这里我们能够在客户端添加/删除记录，并将改变提交给服务器或者放弃提交。

<button id="addButton">
    <bindings>
        <binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="detailsView" method="addItem" />
    </click>
</button>

<button id="delButton">
    <bindings>
        <binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="detailsView" method="deleteCurrentItem" />
    </click>
</button>

<button id="saveButton">
    <bindings>
        <binding dataContext="dataSource" dataPath="isDirtyAndReady" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="dataSource" method="save" />
    </click>
</button>

<button id="refreshButton">
    <bindings>
        <binding dataContext="dataSource" dataPath="isReady" property="enabled"/>
    </bindings>
    <click>
        <invokeMethod target="dataSource" method="load" />
    </click>
</button>

大功告成，可以在浏览器中测试了。

装载中：

装载完成：

记录间导航：

修改并保存：

上述示例代码可以在此处下载：http://files.cnblogs.com/dflying/AtlasItemViewDemo.zip

使用ASP.NET Atlas ItemView控件显示集合中的单个数据相关推荐

  1. ASP.NET Atlas简单控件介绍——Sys.Component基类与Sys.UI.Control基类

    作者:Dflying Chen (http://dflying.cnblogs.com/) 本系列有三篇文章: ASP.NET Atlas简单控件介绍--Sys.Component基类与Sys.UI. ...

  2. ASP.NET Atlas简单控件介绍——InputControl，TextBox，Button和CheckBox

    作者:Dflying Chen (http://dflying.cnblogs.com/) 注:本系列文章比较基础,基本为Atlas官方文档的翻译,熟悉Atlas的朋友可以跳过. 本系列有三篇文章: ...

  3. asp.net findcontrol html控件,findcontrol-在ASP.NET中查找控件的更好方法

    findcontrol-在ASP.NET中查找控件的更好方法 我有一个复杂的asp.net表单,在一个表单中甚至有50到60个字段,例如FindControl(),在MultiView中我有GridV ...

  4. asp.net image控件显示Bitmap

    可以借助base64直接显示图片,避免image.imageUrl="xxx.aspx". 代码如下: Bitmap bmp = new Bitmap(200, 200);usin ...

  5. 构建安全的 ASP.NET 网页和控件

    本页内容 本模块内容 目标 适用范围 如何使用本模块 威胁和对策 设计注意事项 输入验证 跨站点脚本 身份验证 授权 模拟 敏感数据 会话管理 参数处理 异常管理 审核和日志记录 小结 其他资源 本模 ...

  6. 【开源】QuickPager ASP.NET2.0分页控件V2.0.0.3 【增加了使用说明】

    ================================ 欢迎转载,但是请注明出处.本文出自博客园 .谢谢合作! ================================ 最新版本:V ...

  7. 用JS验证asp.net服务端控件

    可以用javascript来验证asp.net服务端的控件,不过目前只局限于验证textbox(输入框)不能为空的情况.还有一个前提条件是,提交按钮必须是html的控件,再加上一个runat=serv ...

  8. 创建用于 ASP.NET 的分页程序控件

    Dino Esposito Wintellect 2003 年 10 月 适用于:     Microsoft® ASP.NET 摘要:解决向任何 ASP.NET 控件添加分页功能的问题.还为开发复合 ...

  9. ASP.Net2.0 数据绑定控件的优越性在哪里？

    尽管有丰富.功能强大的编程接口,ASP.NET 1.x DataGrid 控件仍需要编写大量自定义代码来处理普通操作,如分页.排序.编辑和删除数据.例如,当用户单击以保存或取消更改时,DataGrid ...

  10. 演练GridView控件显示目录图片

    本博文,将带你学习使用GridView控件显示站点目录的图片.如果你已经学会怎样做图片缩略图:怎样应用接口来实现统一的属性,方法或函数:怎样动态加载用户控件,等等.就不必往下看了.因为此篇博文就是演练 ...

最新文章

  1. Cookie的生命周期
  2. 基于NPOI的Excel数据导入
  3. 怎样才算熟悉python-怎样才算python入门
  4. 原生JS实现图片滚动
  5. swing和MySQL登录注册_JavaSwing+Mysql实现简单的登录界面+用户是否存在验证
  6. ASP.NET数据库访问系列教程01-概述篇 创建数据访问层(下)
  7. Spring JSF集成
  8. flink中akka的使用 以jobClient提交任务为例子
  9. 数据科学 IPython 笔记本 9.3 理解 Python 中的数据类型
  10. 使用计算机控制台方法,故障控制台使用方法
  11. iPhone 13或有8款配色；vivo百万年薪招工程师；特斯拉新增行车记录视频紧急情况自动保存功能|极客头条...
  12. SVN 使用hooks 自动更新到远程的web目录下
  13. PaintCode如何使用标签和画布？
  14. java启动脚本_java启动脚本
  15. CAD导出pdf的正确方法（包括导出黑白pdf）
  16. 黑客攻击手段揭秘(转)
  17. java maven 读写pdf_Java向PDF模板写入数据
  18. 2020年3月—— ES6
  19. php 前后端分离之rsa与des加密之旅
  20. 微端游戏启动器launcher的制作（序篇）

热门文章

  1. 【数字信号】基于GUI数字波束算法库【含Matlab源码 313期】
  2. 【手写数字识别】基于matlab知识库手写体数字识别【含Matlab源码 311期】
  3. 【图像检索】基于matlab GUI KNN图像检索【含Matlab源码 267期】
  4. openai-gpt_GPT-3是“人类”吗？
  5. 游戏行业数据类丛书_理论丛书：高维数据101
  6. 合并重叠数据combine_first
  7. linux桌面cpu,ubuntu14.04设置桌面显示网速、cpu信息等
  8. java-练习2：MobilePhone
  9. 可视化排班管理_呼叫中心外包之管理要点与数据分析对策
  10. python导入第三方数据库