JavaScript与Web Service组合实现无刷新交互(扩展)查询数据库

     JavaScript与Web Service组合实现无刷新交互这篇文章我已经写得比较清楚了.客户端的 JavaScript怎么与服务端的Web Service进行通信达到无刷新的AJAX功能.今天我将接着这里给大家写一篇扩展性文章.希望对大家有所帮助.

     少说话多做事,我们还是直奔主题吧!先看看今天的扩展性文章涉及到的东东.
   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]

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]

三：建立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();

}

七：在上一步建立的ASPX页面里定义与Web Service交互的JavaScript方法,处理发送请求和响应请求的相关操作.这一步就是关键了。实现了在客户断通过JavaScript于Web Servie通信，查询数据库并返回查询结果到页面上。
同上一篇文章一样，需要在页面上放置一个ScriptManager控件，应该他是ASP.NET AJAX的核心。每一个ASP.NET AJAX程序的页面上都必须要有一个ScriptManager控件。并指向先前我门定义好的Web Service。如下：

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

<asp:ServiceReference Path="UserInfoWebService.asmx" InlineScript="true" />

</Services>

</asp:ScriptManager>

下面我们来下实现通信和处理请求及处理响应的客户端JavaScript方法；
在定义方法前我门先在页面上写一个文本框和一个按扭。文本框提供数据输入，按扭执行向服务端方法请求查询数据库操作。html代码如下：

请输入ID：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

现在该是写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里下一个表格或是从工具箱里拽一个表格控件出来。适当的调整下宽度，如下：

<tr>

</tr>

<tr>

</tr>

</table>

本文示例源码下载