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

 

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

     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 ]
    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();
    }

七：在上一步建立的ASPX页面里定义与Web Service交互的JavaScript方法,处理发送请求和响应请求的相关操作.这一步就是关键了。实现了在客户断通过JavaScript于Web Servie通信，查询数据库并返回查询结果到页面上。
    同上一篇文章一样，需要在页面上放置一个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 ="width: 540px"  border ="1"  bordercolor ="#663333"  cellpadding ="1"  cellspacing ="0" >
< tr >
       < td  style ="text-align: center; width: 38px;" > 编号 </ td >
       < td  style ="text-align: center; width: 38px;" > 姓名 </ td >
       < td  style ="text-align: center; width: 45px;" > 性别 </ td >
       < td  style ="text-align: center; width: 35px;" > 年龄 </ td >
       < td  style ="text-align: center; width: 82px;" > 电话 </ td >
       < td  style ="text-align: center; width: 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 >