少说话多做事,我们还是直奔主题吧!先看看今天的扩展性文章涉及到的东东.
1.建立ASP.NET AJAX网站项目
2.建立MSSQL数据库test,并建立UserInfo表
3.建立与UserInfo表对应的实体类UserInfo,并定义好成员属性(get,set)
4.建立UserInfoCompontent组件类,封装数据的查询功能
5.建立Web Service调用UserInfoCompontent类的方法(因为Web Service才是与JavaScript交互的组件层)
6.建立ASPX页面,掉用UserInfoCompontent把数据库的数据显示出来.
7.在上一步建立的ASPX页面里定义与Web Service交互的JavaScript方法,处理发送请求和响应请求的相关操作.
一、二：第一、二步就不多说了吧，这两步要是就有问题的话我建议你可以转行干别的工作去了。下面是建立表的脚本：
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[UserInfo]') and OBJECTPROPERTY (id, N'IsUserTable') = 1) drop table [dbo].[UserInfo] GO CREATE TABLE [dbo].[UserInfo] ( [userId] [int] IDENTITY (1, 1) NOT NULL , [userName] [char] (10) COLLATE Chinese_PRC_CI_AS NULL , [userSex] [char] (10) COLLATE Chinese_PRC_CI_AS NULL , [userAge] [char] (10) COLLATE Chinese_PRC_CI_AS NULL , [userTelephone] [varchar] (11) COLLATE Chinese_PRC_CI_AS NULL , [userAddress] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ) ON [PRIMARY] GO三：建立UserInfo类并定义其成员与UserInfo表对应，设置其属性(get,set),UserInfo类的定义如下：
public class UserInfo
{
public UserInfo(int id,string name,string sex,string age,string telephone,string address)
{
this.UserId = id; this.UserName = name; this.UserSex = sex; this.UserAge = age; this.UserTelephone = telephone; this.UserAddress = address;
} private int _userId; public int UserId { get { return _userId; } set { _userId = value; } } private string _userName; public string UserName { get { return _userName; } set { _userName = value; } } private string _userSex; public string UserSex { get { return _userSex; } set { _userSex = value; } } private string _userAge; public string UserAge { get { return _userAge; } set { _userAge = value; } } private string _userTelephone; public string UserTelephone { get { return _userTelephone; } set { _userTelephone = value; } } private string _userAddress; public string UserAddress { get { return _userAddress; } set { _userAddress = value; } }
}四：建立UserInfoCompontent，封装数据的查询功能，详细定义如下所示：
public class UserInfoComponent{ private string _strCon; public string StrCon { get { return _strCon; } set { _strCon = value; } } public UserInfoComponent() { this.StrCon = ConfigurationManager.AppSettings["ConnectionString"]; } public DataSet QueryAll() { string commandText = "Select * from UserInfo"; return QueryUserInfo(commandText); } public UserInfo Query(int userId) { string commandText = "Select * from UserInfo where userId=" + userId; DataTable dt = QueryUserInfo(commandText).Tables[0]; UserInfo user = new UserInfo(int.Parse(dt.Rows[0][0].ToString()), dt.Rows[0][1].ToString(), dt.Rows[0][2].ToString(), dt.Rows[0][3].ToString(), dt.Rows[0][4].ToString(), dt.Rows[0][5].ToString()); return user; } public DataSet QueryUserInfo(string commandText) { using (SqlConnection conn = new SqlConnection(StrCon)) { using (SqlDataAdapter sda = new SqlDataAdapter(commandText, conn)) { using (DataSet ds = new DataSet()) { sda.Fill(ds); return ds; } } } }}五：建立Web Service调用UserInfoCompontent类的方法(因为Web Service才是与JavaScript交互的组件层)
[ScriptService]public class UserInfoWebService : System.Web.Services.WebService { UserInfoComponent user = new UserInfoComponent(); public UserInfoWebService () { //如果使用设计的组件，请取消注释以下行 //InitializeComponent(); } [WebMethod] public UserInfo GetUserInfo(int id) { return user.Query(id); }}六：建立ASPX页面Default.aspx并在页面上拽一个GridView控件,调用UserInfoCompontent把数据库的数据显示出来.
UserInfoComponent user = new UserInfoComponent(); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { DataBindGridView(); } } private void DataBindGridView() { this.GridView1.DataSource = user.QueryAll(); this.GridView1.DataBind(); }同上一篇文章一样，需要在页面上放置一个ScriptManager控件，应该他是ASP.NET AJAX的核心。每一个ASP.NET AJAX程序的页面上都必须要有一个ScriptManager控件。并指向先前我门定义好的Web Service。如下：
<asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="UserInfoWebService.asmx" InlineScript="true" /> </Services> </asp:ScriptManager>下面我们来下实现通信和处理请求及处理响应的客户端JavaScript方法；
在定义方法前我门先在页面上写一个文本框和一个按扭。文本框提供数据输入，按扭执行向服务端方法请求查询数据库操作。html代码如下：
请输入ID：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><input id="Button1" type="button" value="查询" onclick="showUserInfo()" />现在该是写JavaScript方法的时候了。
<script language="javascript" type="text/javascript">function showUserInfo(){ var id=document.getElementById("TextBox1").value; UserInfoWebService.GetUserInfo(id,onGetUserInfoSuccess);} function onGetUserInfoSuccess(user){ document.getElementById("id").innerText=user.UserId; document.getElementById("name").innerText=user.UserName; document.getElementById("sex").innerText=user.UserSex; document.getElementById("age").innerText=user.UserAge; document.getElementById("tele").innerText=user.UserTelephone; document.getElementById("address").innerText=user.UserAddress;}</script>这里也许会有人会问到，你上面的onGetUserInfoSuccess()方法里所用到的id,name,sex....这些是那里来的呢？先好象没定义啊。是啊，我先前没定义他门呢，他是处理所查询到的数据库的数据的显示操作的，这到最后来，说来就来吧，在html里下一个表格或是从工具箱里拽一个表格控件出来。适当的调整下宽度，如下：
<table style=" 540px" border="1" bordercolor="#663333" cellpadding="1" cellspacing="0"><tr> <td style="text-align: center; 38px;">编号</td> <td style="text-align: center; 38px;">姓名</td> <td style="text-align: center; 45px;">性别</td> <td style="text-align: center; 35px;">年龄</td> <td style="text-align: center; 82px;">电话</td> <td style="text-align: center; 79px;">地址</td> </tr> <tr> <td id="id"></td> <td id="name"></td> <td id="sex"></td> <td id="age"></td> <td id="tele"></td> <td id="address"></td> </tr></table>