asp ajax data,ASP.NET AJAX无刷新数据处理技术4

21.15 动态排列列表数据

在Web窗体页中，能够动态排列列表中的数据的功能也是一个比较流行的功能。并且，上述排列操作不需要刷新Web窗体页，从而提高了应用程序的友好性和交互性。

实现目标

本实例介绍使用ASP.NET

AJAX中的ReorderList控件实现动态排列列表数据的功能。

技术实现

1．从数据库中获取所有商品分类

从ASPNET3WebDB数据库的Category表中获取所有商品分类的功能由GetCategorys()方法实现，它被包含在Category类之中。该方法从ASPNET3WebDB数据库的Category表中获取所有商品分类的名称、显示顺序、父目录等信息，其具体实现步骤如下：

 从Web.Config配置文件中获取数据库连接字符串，并保存在变量conString中。

 使用上述连接字符串创建SqlConnection对象sqlCon，该对象用来连接数据库。

 创建获取文件的SQL语句“SELECT * FROM

[Category]”。

 创建执行选择操作的SqlDataAdapter对象sqlDa。

 打开数据库连接，并执行选择操作，并将获取的结果填充到DataSet对象ds中。

 如果上述操作成功，则返回ds变量的值。

GetCategorys()方法的程序代码如下：

public DataSet GetCategorys()

{ ///获取连接字符串

string conString =

ConfigurationManager.ConnectionStrings[

"ASPNET3WEBDBCONNECTIONSTRING"].ConnectionString;

///创建连接

SqlConnection sqlCon = new

SqlConnection(conString);

///创建SQL语句

string cmdText = "SELECT * FROM [Category]";

///创建SqlDataAdapter对象

SqlDataAdapter sqlDa = new

SqlDataAdapter(cmdText,sqlCon);

DataSet ds = new DataSet();

try

{ ///打开连接

sqlCon.Open();

///获取数据并填充DataSet对象

sqlDa.Fill(ds);

}catch(Exception ex){throw new

Exception(ex.Message,ex);} ///抛出异常

finally{sqlCon.Close();} ///关闭连接

return ds;

}

2．创建DataItem类

DataItem类封装了数据项，包含两个属性：ID和Name。其中，ID属性表示数据项的ID值，Name属性表示数据项的名称。创建DataItem类的程序代码如下：

///引入新的命名空间

using System.Collections.Generic;

#region DataItem类

public class DataItem

{

private int id;

private string name;

///属性ID

public int ID

{

get

{ return id; }set { id = value; }

}

///属性Name

public string Name

{

get

{ return name; }set { name = value; }

}

}

#endregion

3．创建AjaxSortData.aspx页面

在Sample_21应用程序中创建AjaxSortData.aspx页面，并在该页面上创建一个ScriptManager控件和一个ReorderList控件。这些控件的ID属性的值分别为sm和rlData。其中，sm控件提供无刷新的Web环境。rlData控件以列表形式显示数据项。AjaxSortData.aspx页面的部分HTML设计代码如下：

StylesheetTheme="Aspnet3DBWeb"

CodeFile="AjaxSortData.aspx.cs"

Inherits="AjaxSortData" %>

runat="server">

动态排列列表数据

/>

runat="server" SortOrderField="Name"

DataKeyField="ID">

("Name")

%>

alt="按住鼠标可以拖动"

/>  

4．AjaxSortData.aspx页面初始化

AjaxSortData.aspx页面初始化功能由其Page_Load(object sender, EventArgs

e)事件实现。该事件首先调用Category类的GetCategorys()方法获取ASPNET3WebDB数据库的Category表中的数据。然后将数据添加到list泛型列表中，最后把list设置为rlData控件的数据源，并显示数据。Page_Load(object

sender, EventArgs e)事件的程序代码如下：

///

/// 排序列表的数据源

///

protected

List list;

private void Page_Load(object

sender,System.EventArgs e)

{

if(list == null)

{ ///初始化数据源

list

= new List();

///获取数据

ASPNET3DBBook.Category

category = new ASPNET3DBBook.Category();

DataSet

ds = category.GetCategorys();

///读取数据，并存放到数据源list中

if(ds

== null || ds.Tables.Count <= 0 ||

ds.Tables[0].Rows.Count <= 0) return;

foreach(DataRow

row in ds.Tables[0].Rows)

{ ///创建一项数据

DataItem

item = new DataItem();

item.ID

= Int32.Parse(row["ID"].ToString());

item.Name

= row["Name"].ToString();

list.Add(item);

}

///绑定并显示数据

rlData.DataSource

= list;

rlData.DataBind();

}

}

把AjaxSortData.aspx页面设置为Sample_21应用程序的起始页面，并运行该应用程序。AjaxSortData.aspx页面的初始界面如图21-22所示。用鼠标按住【商品分类根】数据项，并拖动到【一级分类04】数据项之后，操作如图21-23所示。

 

图21-22 AjaxSortData.aspx页面的初始界面 图21-23 拖动【商品分类根】数据项

放开鼠标，【商品分类根】数据项将放置在【一级分类04】数据项之后。此时AjaxSortData.aspx页面如图21-24所示。

图21-24 AjaxSortData.aspx页面显示排序后的数据

21.16 多样式显示验证信息

在ASP.NET提供的常用验证方式中，验证的提示信息一般显示在Web窗体页或对话框中。然而，有时这种显示方式仍然不够友好。幸运的是，ASP.NET

AJAX提供了一种被称为“多样式验证提示”的技术。该技术能够以非常友好的方式显示验证的提示信息。

实现目标

本实例介绍在ASP.NET中如何使用ASP.NET AJAX Toolkit

Control中的ValidatorCalloutExtender控件以多样式方式显示验证提示信息。

技术实现

创建AjaxValidator.aspx页面

在Sample_21应用程序中创建AjaxValidator.aspx页面，并在该页面上创建一个ScriptManager控件、一个UpdatePanel控件、一个TextBox控件、一个RequiredFieldValidator控件、一个ValidatorCalloutExtender控件和一个Button控件。这些控件的ID属性的值分别为sm、up、tbValue、rfvValue、vcue和btnCommit。其中，sm和up控件共同提供无刷新的Web环境。tbValue控件供用户输入值。rfvValue控件验证tbValue控件的值是否为空，vcue控件将以提示样式显示rfvValue控件的错误提示信息。btnCommit控件产生一个提交操作。AjaxValidator.aspx页面的部分HTML设计代码如下：

StylesheetTheme="Aspnet3DBWeb" %>

runat="server">

多样式显示验证信息

/>

runat="server">

Width="200">

runat="server" ControlToValidate= "tbValue"

ErrorMessage="值不能为空"

Display="None">

runat="server"

TargetControlID="rfvValue">

/>

/>

把AjaxValidator.aspx页面设置为Sample_21应用程序的起始页面，并运行该应用程序。单击【提交】按钮，AjaxValidator.aspx页面以提示样式显示“值不能为空”错误提示信息，如图21-25所示。

图21-25 AjaxValidator.aspx页面以提示样式显示“值不能为空”错误提示信息

21.17 创建页面更新的动画

在Web窗体页更新数据时，一般情况下，Web窗体页都是相对“静止”的。此时，用户只能等待Web窗体页更新数据之后才能够操作。然而，有时Web窗体页能够把更新操作的过程采用动画的方式展示给用户，从而提高了应用程序的交互性和友好性。

实现目标

本实例介绍使用ASP.NET

AJAX中的UpdatePanelAnimationExtender控件为UpdatePanel控件更新操作提高动画的功能。

技术实现

1．创建AjaxAnimation.aspx页面

在Sample_21应用程序中创建AjaxAnimation.aspx页面，并在该页面上创建一个ScriptManager控件、一个UpdatePanel控件、一个Label控件、一个Button控件和一个UpdatePanelAnimationExtender控件。这些控件的ID属性的值分别为sm、up、lbTime、btnCommit和upaeTime。其中，sm和up控件共同提供无刷新的Web环境。lbTime控件显示当前时间。btnCommit控件更新lbTime控件显示的时间。upaeTime控件为btnCommit控件的更新操作显示动画。

★ 注意 ★

upaeTime控件显示了更新过程中(OnUpdating)的动画和更新后(OnUpdated)的动画。

AjaxAnimation.aspx页面的部分HTML设计代码如下：

Language="C#"

StylesheetTheme="Aspnet3DBWeb"

CodeFile="AjaxAnimation.aspx.cs" Inherits="AjaxAnimation"

%>

runat="server">

创建页面更新的动画

ID="sm" runat="server" />

ID="up"

runat="server">

runat="server">

/>

Text="单击演示动画" OnClick="btnCommit_ Click" />

ID="upaeTime" runat="server"

TargetControlID="up">

Property="style"

PropertyKey="backgroundColor" />

Property="style"

PropertyKey="backgroundColor" />

2．AjaxAnimation.aspx页面初始化

AjaxAnimation.aspx页面初始化功能由其Page_Load(object sender, EventArgs

e)事件实现。该事件在lbTime控件中显示当前时间，它的程序代码如下：

protected void Page_Load(object

sender,EventArgs e)

{ ///显示当前时间

lbTime.Text

= DateTime.Now.ToString();

}

3．AjaxAnimation.aspx页面事件设计

单击AjaxAnimation.aspx页面中的【单击演示动画】按钮(btnCommit控件)触发其Click事件：btnCommit_Click(object

sender,System.EventArgs

e)。该事件实现实现延时5秒钟来模拟提交服务器的操作，然后，在lbTime控件中显示当前时间。btnCommit_Click(object

sender,System.EventArgs e)事件的程序代码如下：

protected void

btnCommit_Click(object sender,EventArgs e)

{ ///等待5秒钟

System.Threading.Thread.Sleep(5000);

///显示当前时间

lbTime.Text

= DateTime.Now.ToString();

}

把AjaxAnimation.aspx页面设置为Sample_21应用程序的起始页面，并运行该应用程序。AjaxAnimation.aspx页面的初始界面如图21-26所示。单击【单击演示动画】按钮(btnCommit控件)，AjaxAnimation.aspx页面显示lbTime控件更新显示时间的动画，如图21-27所示。

 

图21-26 AjaxAnimation.aspx页面的初始界面

图21-27 AjaxAnimation.aspx页面显示更新显示时间的动画