ajax.net中与server控件的交互使用(一)

本文介绍如何使用Ajax组件实现与服务器控件交互,并详细演示了如何与Datagrid进行数据更新及展示的过程。

前两天在网上下了个ajax组件体验了一下,感觉很不错。但后来开始想怎样能让它跟server控件交互呢,例如我上输出一个列表,就只有用js一条一条html的输出吗?不!!现在我说说怎样与 datagrid交互。
注:ajax.net的组件可以到此网下载,我用的是for .net 1.1版本的。http://ajax.schwarz-interactive.de/

1. 在引用中添加引用Ajax.dll。(这个很废话)

2.在web.config中建立HttpHandler(这个当然是在system.web串里的)

None.gif < httpHandlers >
None.gif    
< add  verb ="POST,GET"  path ="ajax/*.ashx"  type ="Ajax.PageHandlerFactory, Ajax"   />
None.gif
</ httpHandlers >   

3.在Global的Application_Start里加上个设置
None.gif          protected   void  Application_Start(Object sender, EventArgs e)
ExpandedBlockStart.gifContractedBlock.gif       
{
InBlock.gif            Ajax.Utility.HandlerPath 
= "ajax";
ExpandedBlockEnd.gif        }

4.新建一个类DemoMethods,这个类里面提供了更新数据库和输出列表的方法。其实主要思想就是获得控件运行后生成的html,然后输出。
 1 None.gif         [Ajax.AjaxMethod]
 2 None.gif         public   int  AddAjaxTable( string  name)
 3 ExpandedBlockStart.gifContractedBlock.gif         {
 4InBlock.gif            //输入一个字符串,然后更新
 5InBlock.gif            SqlConnection conn = new SqlConnection( System.Configuration.ConfigurationSettings.AppSettings["connectionString"] );
 6InBlock.gif            SqlCommand cmd = new SqlCommand("insert into ajaxTable(name) values('"+name+"')", conn);
 7InBlock.gif            cmd.Connection.Open();
 8InBlock.gif            int result = cmd.ExecuteNonQuery();
 9InBlock.gif            conn.Dispose();
10InBlock.gif            cmd.Dispose();
11InBlock.gif            return result;
12ExpandedBlockEnd.gif        }

13 None.gif
14 None.gif        [Ajax.AjaxMethod]
15 None.gif         public   string  GetAjaxTable()
16 ExpandedBlockStart.gifContractedBlock.gif         {
17InBlock.gif            //这个方法就是拿到datagrid生成出来的html
18InBlock.gif            SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
19InBlock.gif            SqlCommand cmd = new SqlCommand("select * from ajaxTable order by id", conn);
20InBlock.gif            SqlDataAdapter ap = new SqlDataAdapter( cmd );
21InBlock.gif            DataSet ds = new DataSet();
22InBlock.gif            ap.SelectCommand.Connection.Open();
23InBlock.gif            ap.Fill( ds, "db" );
24InBlock.gif
25InBlock.gif            conn.Dispose();
26InBlock.gif            cmd.Dispose();
27InBlock.gif
28InBlock.gif            //实例化一个datagird类并设置好数据源
29InBlock.gif            DataGrid dg = new DataGrid();
30InBlock.gif            dg.DataSource = ds.Tables["db"];
31InBlock.gif            dg.DataBind();
32InBlock.gif
33InBlock.gif            //实例化一个HtmlTextWriter的类
34InBlock.gif            System.Text.StringBuilder strb = new System.Text.StringBuilder();
35InBlock.gif            System.IO.StringWriter sw = new System.IO.StringWriter( strb );
36InBlock.gif            System.Web.UI.HtmlTextWriter htw = new HtmlTextWriter( sw );
37InBlock.gif
38InBlock.gif            //执行控件的render并输出到HtmlTextWriter里
39InBlock.gif            dg.RenderControl( htw );
40InBlock.gif
41InBlock.gif            string s = strb.ToString();
42InBlock.gif
43InBlock.gif            return s;//最后就是返回这个html啦
44ExpandedBlockEnd.gif        }

5.然后再建一个default.js文件,用作存放 js方法
None.gif function  AddAjax(name)
ExpandedBlockStart.gifContractedBlock.gif
{
InBlock.gif DemoMethods.AddAjaxTable(name);
InBlock.gif LoadGrid();
ExpandedBlockEnd.gif}

None.gif
None.gif
function  LoadGrid()
ExpandedBlockStart.gifContractedBlock.gif
{
InBlock.gif 
var cc=document.getElementById("UCtd");
InBlock.gif cc.innerHTML
=DemoMethods.GetAjaxTable().value; 
ExpandedBlockEnd.gif}

6.建一个default.aspx,在pageload事件里面加个注册的东西
None.gif          private   void  Page_Load( object  sender, System.EventArgs e)
ExpandedBlockStart.gifContractedBlock.gif        
dot.gif {
InBlock.gif            Ajax.Utility.RegisterTypeForAjax(
typeof(AjaxTestPrjLib.DemoMethods));
ExpandedBlockEnd.gif        }

7.最后就是default.aspx的html和js了,呵呵

ExpandedBlockStart.gif ContractedBlock.gif <% dot.gif @ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="AjaxTextPrjWeb._default"  %>
None.gif
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
None.gif
< HTML >
None.gif    
< HEAD >
None.gif        
< title > default </ title >
None.gif        
< meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
None.gif        
< meta  name ="CODE_LANGUAGE"  Content ="C#" >
None.gif        
< meta  name ="vs_defaultClientScript"  content ="JavaScript" >
None.gif        
< meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
None.gif        
< script  language ="javascript"  src ="default.js" ></ script >
None.gif    
</ HEAD >
None.gif    
< body  onload ="LoadGrid()" >
None.gif        
< form  id ="Form1"  method ="post"  runat ="server" >
None.gif            
< INPUT  type ="text"  id ="AddTextBox"  maxlength ="10" >< INPUT  type ="button"  value ="添加"  onclick ="javascript:AddAjax(form.AddTextBox.value);" >
None.gif            
< table >
None.gif                
< tr >
None.gif                    
< td  id ="UCtd" ></ td >
None.gif                
</ tr >
None.gif            
</ table >
None.gif        
</ form >
None.gif    
</ body >
None.gif
</ HTML >

转载于:https://www.cnblogs.com/yzxchoice/archive/2006/08/07/469695.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值