warensoft 我是科学家

Warensoft 我是科学家
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Asp.NET 4.0 ajax实例--DataView 模板编程1

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

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()" />

 

 

添加一个JS函数Button1_onclick()，代码如下：

 

function Button1_onclick() {

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

            MyService.GetUsers(CustomerIDPattern,GetUserCallback);

            }

 

 

点击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>

 

 

 今天就聊到这儿，如何大家需要技术支援，请给我发Email：warensoft@foxmail.com

posted on 2010-03-23 00:57  王宇 warensoft  阅读(4480)  评论(6)  编辑  收藏  举报