ASP.NET4.0 Ajax 实例--DataView模板编程1
 

2010-04-21 作者:warensoft 来源:warensoft的blog

 

ASP.NET4.0中从本质上来讲变化最大的就要算是ASP.NET Ajax技术,这两年来MS一直在不断提高和完善ASP.NET Ajax的功能,变化最大的就是从UpdatePanel模式演化到客户端JS编码模式。在ASP.NET4.0中集成的Ajax框架,基本上可以让程序脱离第三方的Ajax组件,来实现较为完美的RIA应用程序。

在ASP.NET4.0中集成的Ajax功能大体上包括以下几点:

  • 集成JQUERY
  • 客户端数据库操作
  • 客户端模板(客户端的网格)
  • 更为丰富的Ajax控件

客户端的数据读写,基本上就是利用WCF实现,开发人员可以直接从JS中调用WCF再利用C#来实现,或者利用JS调用ADO.NET Data Service直接操作数据库。这些功能已经在前面的Blog中进行了说明,感兴趣的读者可以参考:

本文重点为大家说明如何使用Template技术实现客户端DataView。

使用过ASP.NET的程序员一定对GridView十分有感觉,这个控件可以很快的实现在其他网页技术中较为麻烦的网格操作,再加上UpdatePanel,简直就是无敌了。但是这种DataView+UpdatePanel的MS Ajax模式也存在不少缺点:

  1. 布局模式比较死板
  2. 虽然页面不刷新,但是每一次更新的时候,即使改变一个字母,仍然要将整个GridView的Table从服务器上返回到Client的浏览器中,这是一点很显然违背了Ajax的基本思想---哪儿变了,就更新哪儿.

在ASP.NET4.0中我们可以使用客户端的DataView来代替GridView,利用JS和HTML来精确控制数据的更新,以此来提高系统运行速度和用户体验。模板编程的主要功能包括:

  1. 用户客户端代码代替GridView
  2. 利用客户端代码实现主-从模式功能
  3. 数据的双向绑定

下面,我们对这三点进行说明:

系统要求:

  1. VS2010
  2. ASP.NET Ajax Client Library,可以去CodePlex上下载最新版本,网址:http://ajax.codeplex.com/releases/view/35895,也可以通过CDN方式进行远程引用,本文能过CDN方式引用。

利用客户端代码代替GridView

我们来实现一个用户数据查找的功能

1.1在网站中添加一个Ajax Enabled WCF Service:

1.2修改WCF的代码MyService.cs,代码如下所示:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Data.SqlClient;
using System.Data;

[DataContract]
public class CustomerInfo
{
[DataMember]
public string CustomerID
{
get;
set;
}
[DataMember]
public string CompanyName
{
get;
set;
}
[DataMember]
public string ContactName
{
get;
set;
}
}
[ServiceContract(Namespace
= "")]
[AspNetCompatibilityRequirements(RequirementsMode
= AspNetCompatibilityRequirementsMode.Allowed)]
public class MyService
{
[OperationContract]
public List<CustomerInfo> GetUsers(string CustomerIDPattern)
{
List
<CustomerInfo> result = new List<CustomerInfo>();
using (SqlConnection con=new SqlConnection ("server=.;database=northwind;uid=sa;pwd=sa"))
{
con.Open();
var cmd
= con.CreateCommand();
if (CustomerIDPattern != "")
{
cmd.CommandText
= "select CustomerID,CompanyName,ContactName from Customers where"
+ " CustomerID like '%'+@CustomerIDPattern+'%'";
cmd.Parameters.Add(
"@CustomerIDPattern", SqlDbType.NChar, 5).Value = CustomerIDPattern;
}
else
{
cmd.CommandText
= "select CustomerID,CompanyName,ContactName from Customers where"
+ " CustomerID like '%'";
}
var reader
= cmd.ExecuteReader();
while (reader .Read ())
{
result.Add(
new CustomerInfo()
{
CustomerID
=reader ["CustomerID"].ToString (),
CompanyName
=reader["CompanyName"].ToString (),
ContactName
=reader ["ContactName"].ToString ()
});
}
reader.Close();
}
return result;
}
}

注意这里的返回值是一个List< CustomerInfo >的表,其中CustomerInfo是数据协议,是用来封装每一个Customer信息的数据结构。另外,规定,当传入的参数为空串时,返回所有的数据。

1.3修改Default.ASPX,首先添加一个ScriptManager,并添加WCF服务的引用,代码如下:

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Services>

<asp:ServiceReference Path="~/MyService.svc" />

</Services>

</asp:ScriptManager>

添加WCF引用的目的是在运行的时候可以生成JS代理类。

1.4添加几个必要的CSS样式,代码如下所示:

<style type="text/css">

.sys-template

{

display
:none;

}

.column

{

float
: left;

padding-top
: 2px;

width
: 188px;

height
: 20px;

color
: Red;

border-width
: 1px;

border-color
: black;

border-style
: solid;

overflow-y
: hidden;

}

</style>

1.5添加DataView以及用于输入用户名的文本框,HTML代码如下所示:

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Services>

<asp:ServiceReference Path="~/MyService.svc" />

</Services>

</asp:ScriptManager>

用户名:
<input id="Text1" type="text" /><input id="Button1" type="button" value="查询"/>

<div id="dvUsers" class="sys-template" style="width: 575px;">

<div class="column" id="colCustomerID">

{binding CustomerID}

</div>

<div class="column" id="colCompanyName">

{binding CompanyName}

</div>

<div class="column" id="colContactName">

{binding ContactName}

</div>

</div>

</form>

</body>

上面代码中,名为“dvUsers”的DIV就是我们要的DataView,实际上客户端的DataView并没有什么固定的标签,使用任何的HTML标签都可以,并且我们要做的是利用HTML编写好网格中的一行(一个模板),在运行的时候Ajax框会自动利用服务器取回来的内容将这个DataView填充,并且自动重复。

?另外ID为colCustomerID的DIV绑定到了CustomerID字段上,{binding CustomerID}就是用来绑定的,当然这里使用的是双向绑定。在后面的Blog中会对绑定方式作进一步说明。

1.6修改ScriptManager,添加最新版本Ajax Client Library的CDN引用。代码如下:

<asp:ScriptManager ID="ScriptManager1" runat="server" >

<Services>

<asp:ServiceReference Path="~/MyService.svc" />

</Services>

<Scripts>

<asp:ScriptReference Path="http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjax.js"

Name
="MicrosoftAjax.js" />

<asp:ScriptReference Path="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js" />

</Scripts>

</asp:ScriptManager>

这里请注意所引用的MicrosoftAjax.js,在其后面一定要标记Name属性值为MicrosoftAjax.js,目的是使用新版本的JS文件覆盖原有集成的文件。

1.7添加加载时的是JS代码,如下所示:

var view = null;

window.onload
= function () {

Sys.require(Sys.components.dataView,
function (result) {

view
= Sys.create.dataView($get("dvUsers"));

MyService.GetUsers(
"", GetUserCallback);

});

}

function GetUserCallback(result) {

dataview.set_data(result);

}

代码说明:

    1. 上面代码中的view是我们需要的DataView对象。
    2. window.onload说明这些操作一定要在页面加载完毕之后才可以执行,如果这些代码在window.onload之前执行,会因为ScriptManager还未来得急加载相关的JS文件而报错。
    3. Sys.require方法是利用上面所引用的start.debug.js来获取使用DataView时所需要的JS文件,当然你也可以通过直接引用MicrosoftAjaxTemplates.js来获取DataView,但是MS推荐使用Sys.require来获取。该函数第一个参数是一个数组变量,用来表示你所需要的组件,本例中只是获取了一个对象,如果想要获取多个对象,可以使用以下形式:Sys.require([Sys.components.dataView,Sys.components.adoNetDataContext],…)
    4. ?Sys.require的第二个参数是获取指定对象相关JS文件成功后的回调函数,一般会在这里做初始化控件的操作,在代码中,我们利用Sys.create.dataView函数给view对象初始化。
    5. 初始化DataView完毕后,就可以调用WCF服务获取数据了,这里要注意调用WCF服务都这种异步方式的,GetUserCallback函数是该WCF Service调用成功后的回调函数,返回值就是GetUserCallback函数中的参数。
    6. 在GetUserCallback函数中利用view的set_data函数就可以设置DataView的数据源了,基本操作方法和服务器端的GridView控件差不多。

1.8?现在就可以运行网页了,页面加载的时候会把所有用户的数据都显示出来。

1.9为网页中的Button添加一个JS的Click事件,修改Button的HTML代码,如下所示:

<input id="Button1" type="button" value="查询" onclick="return Button1_onclick()" />

点击Button1时就从Text1中将用户名取出,然后将这个用户当作参数进行查询。

1.10完整的HTML代码如下所示:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style type="text/css">

.sys-template

{

display
: none;

}

.column

{

float
: left;

padding-top
: 2px;

width
: 188px;

height
: 20px;

color
: Red;

border-width
: 1px;

border-color
: black;

border-style
: solid;

overflow-y
: hidden;

}

</style>

<script language="javascript" type="text/javascript">

// <![CDATA[



function Button1_onclick() {



}

var dataview = null;

window.onload
= function () {

Sys.require(Sys.components.dataView,
function (result) {

dataview
= Sys.create.dataView($get("dvUsers"));

MyService.GetUsers(
"", GetUserCallback);

});

}

function GetUserCallback(result) {

dataview.set_data(result);

}

function Button1_onclick() {

var CustomerIDPattern = $get("Text1").value;

MyService.GetUsers(CustomerIDPattern,GetUserCallback);

}



// ]]>

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableCdn="True" >

<Services>

<asp:ServiceReference Path="~/MyService.svc" />

</Services>

<Scripts>

<asp:ScriptReference Path="http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjax.js"

Name
="MicrosoftAjax.js" />

<asp:ScriptReference Path="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js" />

</Scripts>

</asp:ScriptManager>

用户名:
<input id="Text1" type="text" /><input id="Button1" type="button" value="查询" onclick="return Button1_onclick()" />

<div id="dvUsers" class="sys-template" style="width: 575px;">

<div class="column" id="colCustomerID">

{binding CustomerID}

</div>

<div class="column" id="colCompanyName">

{binding CompanyName}

</div>

<div class="column" id="colContactName">

{binding ContactName}

</div>

</div>

</div>



</form>

</body>

</html>



使用decj简化Web前端开发
Web开发框架形成之旅
更有效率的使用Visual Studio
MVP+WCF+三层结构搭建框架
ASP.NET运行机制浅析【图解】
编写更好的C#代码
10个Visual Studio开发调试技巧
更多...   


.NET框架与分布式应用架构设计
.NET & WPF & WCF应用开发
UML&.Net架构设计
COM组件开发
.Net应用开发
InstallShield


日照港 .NET Framework & WCF应用开发
神华信息 .NET单元测试
北京 .Net应用软件系统架构
台达电子 .NET程序设计与开发
赛门铁克 C#与.NET架构设计
广东核电 .Net应用系统架构
更多...   
 
 
 
 
 

组织简介 | 联系我们 |   Copyright 2002 ®  UML软件工程组织 京ICP备10020922号

京公海网安备110108001071号