(1) 有 Button Click 動作；
(2) 只回傳系統時間不夠明了。
因此對於初次接觸 AJAX 或 Atlas Framework 的朋友可能會分不清這樣的東西到底能幹嘛？跟原來 Postback 技術好像差異不大，為了讓各位瞭解二者之間的真正差異，我將範例稍做改寫：
(1)在 Client 端的“input”控制項中加入了“onkeyup”事件，以便在鍵盤釋放後呼叫後端 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 威力）：
Step 1：建立 Master Page
這個 Master Page 將會被前四個範例所使用到，MasterPage.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 及布景主題的目的。
Step 2：建立 default.aspx 內容頁程式
建立使立使用 Master Page 的 default.aspx 內容頁，裡面主要有 Text 輸入與資訊顯示，外加兩個 JavaScript Function，以便調用 EmployeeService.asmx WEB服務，程式如下：
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="教書育人毀人不倦之atlas範例一" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
<form action="">
<div>
請輸入員工姓名：
<input id="inputName" type="text" onkeyup="DoSearch()"/>
</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;
}
</script>
</asp:Content>
程式說明：
原先的範例中有 Button 按鈕，但筆者為了讓各位更真實體驗到什麼是 AJAX 非同步技術，刻意將 Button 按鈕拿掉，但在input控制項中加入了onkeyup事件：
<input id="inputName" type="text" onkeyup="DoSearch()"/>
以便在鍵盤釋放可以使用javascript調用服務。
Step 3：建立 EmployeeService.asmx WEB服務
本程式作用是將員工基本資料回傳給前端，前端收到後會自動進行畫面更新，而程式內是透過 ADO.NET 來查詢北風資料庫中 Employees 資料表的 Web Service。
<%@ WebService Language="C#" Class="Samples.AspNet.EmployeeService" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
namespace Samples.AspNet {
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class EmployeeService : System.Web.Services.WebService
{
[WebMethod]
public string Employee(String txtFirstName)
{
SqlConnection conn = new SqlConnection("data source=.;initial catalog=Northwind;user id=sa;password=89690");
conn.Open();
SqlCommand cmd = new SqlCommand("select EmployeeID,FirstName,City,Address from Employees where FirstName like '" + txtFirstName + "%'", conn);
cmd.Parameters.Add("@FirstName", SqlDbType.NVarChar, 10).Value = txtFirstName;
SqlDataReader dr = cmd.ExecuteReader();
string txtMsg = "";
if (String.IsNullOrEmpty(txtFirstName))
{
txtMsg = "<Font Color='Blue'>請輸入姓名</Font>";
}
else
{
txtMsg = "<Font Color='Red'>查無此人！</Font>";
}
int i = 0;
while (dr.Read())
{
if (i == 0)
{
txtMsg = "";
}
txtMsg += "員工代號：" + dr["EmployeeID"] + " ,";
txtMsg += "姓名：" + dr["FirstName"] + " ,";
txtMsg += "居住城市：" + dr["City"] + " ,";
txtMsg += "地址：" + dr["Address"] + " ,";
txtMsg += "<br>";
i++;
}
cmd.Dispose();
dr.Dispose();
conn.Dispose();
return txtMsg; //回傳使用者詳細資料
}
}
}
程式說明：
(1) 以上是一個典型的 ADO.NET 資料庫程式，以 TextBox 所輸入的 FirstName 當作參數向資料庫查詢，並將相符的結果回傳給前端。
(2) 資料庫帳號密碼請自行修改成您練習環境的資料庫帳號密碼。
故各位可以隨意輸入 Nancy、Steven 或 Robert 等員工 FirstName 姓名測試一下，畫面自動就會將員工基本資料回傳。
圖 2 default 員工基本資料查詢結果
default 是建立基本的 ASP.NET Atlas 網頁應用程式，基本上是在做兩件事：
· 建立 Client 端展現的 ASP.NET 網頁（使用 Master Page）。
· 建立 Server 端的 Web Service。
以上程式參考了微軟atlas的相關資料。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
