Atlas快速体验一（笔记）

范例一　建立基本的ASP.NET Atlas 网页程序

如果你按照微软英文 Hands-On Lab文件练习，有可能不能很好的理解。因为范例步骤说明过于零碎，所以我们将范例稍加整理较为易懂，但是由于原始范例功能太过简化，并且有两个小缺点：
1. 有Button Click动作。
2. 只回传系统时间不够贴切。
因此对于初次接触AJAX或Atlas Framework的朋友可能会分不清参数这样的东西到底干嘛的？跟原来Postback技术好象差异不大，为了让各位了解两者之间的真正差异，我们将范例稍做修改：
1. 在Client端加入每秒钟自动呼叫后端的Web Service的JavaScript指令,以TextBox中输入的姓名当做参数传给Web Service
2. 后端 Web Service 通过ADO.NET 查询 Northwind 北风数据库，传回相符的使用者个人详细信息
3. 最后索性将Button 按钮都放弃了，让您更能体会什么是AJAX非同步技术。

本范例是用传统的JavaScript以非同步的方式呼Web Service,而这个Web Service 会以ADO.Net 查询北风数据库中的Employees员工表，并且将符合条件的员工详细信息回传给 Client 端页面显示。

既然简化来让只是在做 Client 端与 Server 端两部分，但总共分为三个步骤，以下是说明（建议全程一复制并贴上程序代码的方式来进行，纯粹体验Atlas威力）

第一步：建立 Master Page
这个 Master Page将会被前四个范例所使用到，Default.master 其程序代码如下：

<%@ Master Language="C#" %>

<!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" xml:lang="en" lang="en">
<head id="Head1" runat="server">
    <asp:contentplaceholder runat="server" ID="ScriptIncludes">
      <atlas:script id="Script1" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Mozilla" />
      <atlas:script id="Script2" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Firefox" />
      <atlas:script id="Script3" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="AppleMAC-Safari" />
      <atlas:script id="Script4" runat="server" Path="~/ScriptLibrary/AtlasCore.js" />
      <atlas:script id="Script5" runat="server" Path="~/ScriptLibrary/AtlasCompat2.js" Browser="AppleMAC-Safari" />
    </asp:ContentPlaceHolder>
    <link rel="stylesheet" type="text/css" href="site.css" />
    <asp:contentplaceholder runat="server" ID="Head" />
</head>
<body>
    <asp:contentplaceholder id="Main" runat="server">
    </asp:contentplaceholder>
</body>
</html>

程序说明：
(1) 各位可以看到 Master Page 里面引入了一堆 <Atlas:Script>，其目的是为了达到浏览器（跨平台）相容性，不必为了不同浏览器而必須撰写数套网页程序，请回想第一期文章曾谈到：「Libraries 程序库会自动处理不同浏览器的相容性问题，免除了撰写特定浏览器的 Scripts 的必要性。」因此从这点就可以察知 Atlas Framework 不是随便说说的简单的封装，确实是依据当初所规划的蓝图在进行。

(2) 而 ScriptLibrary 則是改良过的 JavaScript 程序库，支持继承、封装、介面等诸多面向对象的特征，是 Atlas Framework 程序运行非常重要的一部分

(3) Master Page 並非是必要的，只不过是借用 Master Page 机制而达成加入 Atlas Script 及布景主題的目的。

第二步：建立 Lab1.aspx 內容页面程序
建立使立使用 Master Page 的 Lab1.aspx 內容页面，里面主要有 Text 輸入框，外加三个 JavaScript Function，同时调用了 EmployeeService.asmx 网络服务，程序如下：

<%@ Page Language="C#" MasterPageFile="Default.master" Title="Atlas HOL 1" %>

<asp:Content ID="Content3" ContentPlaceHolderID="Main" Runat="Server">

  <form action="">
    <div>
      員工姓名：
      <input id="inputName" type="text" />
    </div>
  </form>
  <hr style="width: 300px" />
  <div>
    <span id="Results"></span>
  </div>
  <script type="text/JavaScript" src="EmployeeService.asmx/js">
  </script>
  
  <script type="text/JavaScript">
    function DoSearch()
    {
      var SrchElem = document.getElementById("inputName");
      Samples.AspNet.EmployeeService.Employee(SrchElem.value, OnRequestComplete);
    }

    function OnRequestComplete(result) 
    {
      var RsltElem = document.getElementById("Results");
      RsltElem.innerHTML = result;
    }
    
    setInterval('DoSearch()',1000);
  </script>
</asp:Content>

一定要将这两项从本页中去掉，不然它会报错

<asp:Content ID="Content1" ContentPlaceHolderID="ScriptIncludes" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Head" Runat="Server">
</asp:Content>

程序说明：
原先的范例中有 Button 按钮，但为了让各位更真实体验到什么是 AJAX 非同步技术，刻意将 Button 按钮拿掉。

Step 3：建立 EmployeeService.asmx 网络服务
本程式作用是将员工基本信息回传给前台，前台收到后台会自动进行页面更新，而程序內是通过 ADO.NET 来查询北风数据库中 Employees 的 Web Service。

        [WebMethod]
        public string Employee(String txtFirstName)
        {
            SqlConnection conn = new SqlConnection("data source=.;initial catalog=Northwind;user id=sa;password=");
            conn.Open();

            SqlCommand cmd = new SqlCommand("select EmployeeID,FirstName,City,Address from Employees where FirstName=@FirstName", conn);
            cmd.Parameters.Add("@FirstName", SqlDbType.NVarChar, 10).Value = txtFirstName;
            SqlDataReader dr = cmd.ExecuteReader();

string txtMsg = "";

            if (dr.Read())
            {
                txtMsg = "员工ID：" + dr["EmployeeID"] + " ,";
                txtMsg += "姓名：" + dr["FirstName"] + " ,";
                txtMsg += "居住城市：" + dr["City"] + " ,";
                txtMsg += "地址：" + dr["Address"] + " ,";
            }
            else
            {
                if (String.IsNullOrEmpty(txtFirstName))
                {
                    txtMsg = "<Font Color='Blue'>请输入入姓名</Font>";
                }
                else
                {
                    txtMsg = "<Font Color='Red'>查无此人！</Font>";
                }
            }

            cmd.Dispose();
            dr.Dispose();
            conn.Dispose();

return txtMsg; //回发使用者详细信息
}

并添加引用和命名空间

using System.Data.SqlClient;

namespace Samples.AspNet {}

程序说明：
（1）以上是一个典型的ADO.NET数据库程序，以TextBox所输入的FirstName当做参数向数据库查询，并将相符的结果回传给前台。
（2）数据库帐号密码请自己修改成您的练习环境的数据库帐号密码。
北风数据库里Employees 表的数据

所以各位可以随便输入 Nancy、Steven 或 Robert 等员工 FirstName 姓名测试一下，页面自动就会将员工基本信息回传。

图 7　Lab1 员工基本信息查询結果

Lab1 是建立基本的 ASP.NET Atlas 網頁應用程序，基本上是在做二件事：

建立 Client 端展現的 ASP.NET 網頁（使用 Master Page）。
建立 Server 端的 Web Service。

各位大致看一下筆者整理的UML圖就會明白其中運作的原理了，有的人可能會心想 Lab1.aspx 明明就是屬於 Server 端的東西，怎麼被筆者硬抝劃分到 Client 端？各位不要忘了，不管是 ASP.NET、PHP 或 JSP 最終都會被 Render 成前端瀏覽器可以呈現的 HTML 格式，且頁面也是透過前端 JavaScript 來做非同步觸發動作，所以圖並沒有畫錯。

圖 8　Lab1 非同步模式運作關係圖

posted @ 2006-02-28 11:44 安安阅读(323) 评论(0) 收藏举报

刷新页面返回顶部