随笔-7  评论-146  文章-0  trackbacks-1
ajax.net中与server控件的交互使用（一）

前两天在网上下了个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串里的）

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

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

4.新建一个类DemoMethods，这个类里面提供了更新数据库和输出列表的方法。其实主要思想就是获得控件运行后生成的html，然后输出。
 1        [Ajax.AjaxMethod]
 2        public int AddAjaxTable(string name)
 3        {
 4            //输入一个字符串，然后更新
 5            SqlConnection conn = new SqlConnection( System.Configuration.ConfigurationSettings.AppSettings["connectionString"] );
 6            SqlCommand cmd = new SqlCommand("insert into ajaxTable(name) values('"+name+"')", conn);
 7            cmd.Connection.Open();
 8            int result = cmd.ExecuteNonQuery();
 9            conn.Dispose();
10            cmd.Dispose();
11            return result;
12        }
13
14        [Ajax.AjaxMethod]
15        public string GetAjaxTable()
16        {
17            //这个方法就是拿到datagrid生成出来的html
18            SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
19            SqlCommand cmd = new SqlCommand("select * from ajaxTable order by id", conn);
20            SqlDataAdapter ap = new SqlDataAdapter( cmd );
21            DataSet ds = new DataSet();
22            ap.SelectCommand.Connection.Open();
23            ap.Fill( ds, "db" );
24
25            conn.Dispose();
26            cmd.Dispose();
27
28            //实例化一个datagird类并设置好数据源
29            DataGrid dg = new DataGrid();
30            dg.DataSource = ds.Tables["db"];
31            dg.DataBind();
32
33            //实例化一个HtmlTextWriter的类
34            System.Text.StringBuilder strb = new System.Text.StringBuilder();
35            System.IO.StringWriter sw = new System.IO.StringWriter( strb );
36            System.Web.UI.HtmlTextWriter htw = new HtmlTextWriter( sw );
37
38            //执行控件的render并输出到HtmlTextWriter里
39            dg.RenderControl( htw );
40
41            string s = strb.ToString();
42
43            return s;//最后就是返回这个html啦
44        }

5.然后再建一个default.js文件，用作存放 js方法
function AddAjax(name)
{
 DemoMethods.AddAjaxTable(name);
 LoadGrid();
}

function LoadGrid()
{
 var cc=document.getElementById("UCtd");
 cc.innerHTML=DemoMethods.GetAjaxTable().value; 
}

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

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

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


这样，就能使用datagrid来输出表格了，呵呵。总体思路其实还是比较简单的，日后有兄弟做出更好的，请贴出来，而我也会继续努力的。谢谢....继续工作去....
posted on 2005-09-26 15:13 jasmineou 阅读(6149) 评论(54)  编辑 收藏 网摘

评论:
#1楼 2005-09-26 15:23 | 蓝牙[未注册用户]
厉害
  回复  引用    
#2楼 2005-09-26 16:01 | 第一控制.NET      
我到是更关心Atlas。
总的感觉这种无刷技术是以后的趋势。
  回复  引用  查看    
#3楼 2005-09-26 16:10 | jasmineou[未注册用户]
其实现在只是先赌为快罢了，真正用上还是要等微软的
  回复  引用    
#4楼 2005-09-26 16:22 | kwklover      
支持一下
  回复  引用  查看    
#5楼 2005-09-26 16:28 | 代码乱了，不知道该怎么办！      
不错！不过在Atlas中，是让不懂js的人也能用上Ajax,js的调用已经被封装起来，基本上不用用户去添加客户端js!

呵呵，你的例子不错！
  回复  引用  查看    
#6楼 2005-09-26 16:39 | jasmineou[未注册用户]
在这里谢谢 “代码乱了”
是他的post给了我灵感的
  回复  引用    
#7楼 2005-09-26 20:55 | David[未注册用户]
等Atlas咯。。
明年应该有了！！！
  回复  引用    
#8楼 2005-09-27 00:39 | 开心果乐园      
不错, 思路很好, 值得一睹
  回复  引用  查看    
#9楼 2005-09-27 16:09 | Leaphy[未注册用户]
吹毛求疵一下，这种方法一个问题就是只能解决数据绑定的问题，服务器端控件的事件应该是不可用了。
  回复  引用    
#10楼 2005-09-27 17:11 | jasmineou[未注册用户]
吹毛求疵一下，这种方法一个问题就是只能解决数据绑定的问题，服务器端控件的事件应该是不可用了。
----------------------------------------------------------

也是可以用的，只是用了服务器事件就用不了ajax而矣。
如果要对html进行编辑，可以作一个用户控件，然后将用户控件当成控件一样生成html即可
  回复  引用    
#11楼 2005-09-28 16:59 | shiqingfu[未注册用户]
我想是不是网站后台可以使用ajax前台尽量不要使用。否则对SEO怎么办？robots可不认js
  回复  引用    
#12楼 2005-10-11 14:38 | keith[未注册用户]
思路清楚，如果这个过程也能封装一下，靠，就太强了。
  回复  引用    
#13楼 2005-10-13 00:47 | 小叶[未注册用户]
请问一下各位前辈　。　我在按照这篇文章做。　在编辑项目时出现.

无法将文件“bin\Ajax.dll”复制到运行目录。进程无法访问文件，因为另一个程序正在使用此文件。

未能将临时文件复制到输出目录中。

请问怎么解决啊？　谢谢。　
  回复  引用    
#14楼 2005-10-13 01:06 | 小叶[未注册用户]
请问哪位有通过编译的源代码　。可以给我一份吗　？　Email : davisye@163.com MSN davis_ye@hotmail.com 谢谢。　


　我试了Ｎ次了。　还是问题多多　。　
  回复  引用    
#15楼[楼主] 2005-10-14 11:18 | jasmineou      
已经按你的要求发到以下邮箱：davis_ye@hotmail.com
  回复  引用  查看    
#16楼 2005-10-25 11:13 | workingbird[未注册用户]
# re: ajax在.net中与server控件的交互 2005-09-28 16:59 | shiqingfu

我想是不是网站后台可以使用ajax前台尽量不要使用。否则对SEO怎么办？robots可不认js

----------------------

ajax就是对搜索引擎不敏感，所以我觉得使用ajax的地方主要应该是提高用户体验的模块，对搜索引擎屏蔽的地方，比如说邮箱系统，查询结果等。

如果要迎合搜索引擎，做一个非ajax的通道就可以了，同时也可以支持浏览器对javascript解析有故障的用户。
  回复  引用    
#17楼 2005-10-28 17:07 | chenhua[未注册用户]
我怎么测试不通过啊,给俺一份源码看看啊!chenhua1934@126.com
  回复  引用    
#18楼 2005-11-21 17:18 | qingdaoqn[未注册用户]
请问哪位有通过编译的源代码　。可以给我一份吗　？qingdaoqn@126.com
  回复  引用    
#19楼 2005-11-25 01:07 | A1any[未注册用户]
能否给我也发一份吗？我用你的这个试了一下，出现了一些问题， 这一句话DemoMethods.AddAjaxTable(name);出现了对象不支持些属性和方法，不知道是什么原因。
我的邮箱是a1any@126.com
  回复  引用    
#20楼 2005-12-10 15:39 | 田敏[未注册用户]
通过ajax在前台显示datagrid以及数据，如果我需要选定datagrid中的数据行并alert出来，应该怎么操作，希望各位大侠给予帮助！！！！！！我的邮箱是teamming@163.com
  回复  引用    
#21楼 2005-12-18 19:53 | cool kid[未注册用户]
太强汗了! 读数据库之快!!! 无页面刷新!
不过我还是觉得有点不好的地方. 他的扩张性不是很好.....
  回复  引用    
#22楼 2005-12-23 18:15 | Konimeter      
我转到VB上用，
在Default.aspx的Page_Load里，下面这句出错。

Ajax.Utility.RegisterTypeForAjax(typeof(AjaxTestPrjLib.DemoMethods))

说AjaxTestPrjLib未定义，

去掉AjaxTestPrjLib也出错，使用我自己起的Project名字，AJAX也出错。
请问是什么原因？

还是请求发一份源码方便。。。汗。。。
koni@21cn.com，谢谢。
  回复  引用  查看    
#23楼 2005-12-28 15:34 | linf[未注册用户]
DATAGRID 的内容显示不出来！请求发一份源码给我研究研究！
  回复  引用    
#24楼 2005-12-28 15:34 | linf[未注册用户]
DATAGRID 的内容显示不出来！请求发一份源码给我研究研究！
lin_q_f@163.com谢谢！
  回复  引用    
#25楼 2005-12-28 17:50 | 猪头      
准备抄袭下LZ的劳动成果.
  回复  引用  查看    
#26楼 2006-01-08 15:36 | seanYU[未注册用户]
请问各位谁有源代码，email给我一份sean_yu@sina.com，谢谢

  回复  引用    
#27楼 2006-01-11 11:36 | 蓝色风[未注册用户]
谢谢 给我也发一份
wdwbto@163.com
  回复  引用    
#28楼 2006-01-15 19:02 | 透明人[未注册用户]
谢谢 给我也发一份
zhangdefeng2008@163.com
  回复  引用    
#29楼 2006-01-17 19:29 | damofengbo[未注册用户]
damofengbo@163.com

在vb.net中应怎么改
  回复  引用    
#30楼 2006-01-19 10:04 | 晓峰[未注册用户]
楼主,为什么报错呢~~?是什么没有配好吗?　郁闷死了，email　一份源码吧～～

dl_wangfeng0530@163.com
  回复  引用    
#31楼 2006-01-24 09:14 | 蓝天[未注册用户]
看了上面的说明后,对ajax兴趣及佳,望大虾能给我一份源码,谢谢了
yanghuaizhi1982@gmail.com
再次感谢
  回复  引用    
#32楼 2006-01-27 01:36 | Allen      
其实这几行代码最关键。
//实例化一个HtmlTextWriter的类
System.Text.StringBuilder strb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter( strb );
System.Web.UI.HtmlTextWriter htw = new HtmlTextWriter( sw );

//执行控件的render并输出到HtmlTextWriter里
dg.RenderControl( htw );

其余的都是ajax.net最基本的代码。
  回复  引用  查看    
#33楼 2006-02-08 13:56 | fxb248[未注册用户]
楼主,请告诉我你的MSN好吗?
  回复  引用    
#34楼 2006-02-09 16:28 | 张海斌[未注册用户]
不错不错 交换个地址http://zhanghaibin.blog.sohu.com
  回复  引用    
#35楼 2006-02-17 09:31 | 橙子      
问一句，如果要在这个DataGrid上要求ItemDataBind应该怎么实现呢？
  回复  引用  查看    
#36楼 2006-02-20 00:49 | eric仔[未注册用户]
出色的方法，解決了datagrid在ajax.net使用的問題
但我有一個可能很多人也想問的問題，data grid原本最有用的就是自動分頁
但現在用了htmltextwrite rendering，allow paging設為true也令自動分頁
失效了，有沒有辦法解決？若果有就實在太好了！
  回复  引用    
#37楼 2006-02-21 15:36 | seanYU[未注册用户]
如果在AddAjaxTable或者GetAjaxTable中增加一个大循环，点击“添加”按钮 整个 网页都会没有响应，我把default.js中的js改写了一下，就不会出现刚才的情况了。
function AddAjax(name)

{
DemoMethods.AddAjaxTable(name, callback_AddAjax);

}

function callback_AddAjax(response)
{
if (response.error != null){
alert(response.error);
return;
}
DemoMethods.GetAjaxTable(callback_LoadGrid);
}

function callback_LoadGrid(response)
{
if (response.error != null){
alert(response.error);
return;
}
var cc=document.getElementById("UCtd");
cc.innerHTML=response.value;
}

  回复  引用    
#38楼 2006-03-07 21:25 | kevin_mo[未注册用户]
给我一份源码，谢谢拉 mxx_811029@hotmail.com
  回复  引用    
#39楼 2006-03-08 12:51 | kevinmo[未注册用户]
[Ajax.AjaxMethod]
public string GetAjaxTable()
{
float total=0;
ArrayList ArrCar;
car Car=new car();
DataTable dt=new DataTable("dt");
DataColumn dc=new DataColumn("name",typeof(string));
DataColumn dc1=new DataColumn("num",typeof(float));
DataColumn dc2=new DataColumn("pro",typeof(string));
DataColumn dc3=new DataColumn("servicecode",typeof(int));
DataColumn dc4=new DataColumn("serviceway",typeof(string));
DataColumn dc5=new DataColumn("serviceprice",typeof(float));
DataColumn dc6=new DataColumn("color",typeof(string));
DataColumn dc7=new DataColumn("bz",typeof(string));
dt.Columns.Add(dc3);//服务编码
dt.Columns.Add(dc);//服务名称
dt.Columns.Add(dc4);//服务方式
dt.Columns.Add(dc6);//服务颜色
dt.Columns.Add(dc5);//房屋价格
dt.Columns.Add(dc1);//服务数量
dt.Columns.Add(dc2);//服务问题
dt.Columns.Add(dc7);//备注

if(Session["ar"]!=null)
{
ArrCar=(ArrayList)Session["ar"];

}
else
{
ArrCar=new ArrayList();
}
Car.SetName(Convert.ToString(stype.Text));
Car.SetNum(Convert.ToSingle(count.Text));
Car.SetPrice(Convert.ToSingle(price.Text));
Car.SetCode(Convert.ToInt32(TextBox1.Text));
Car.SetColor(Convert.ToString(color.SelectedItem.Value.ToString()));
Car.SetWay(wtype.Text);
Car.Setpro(Convert.ToString(pro.Text));
Car.SetBz(Convert.ToString(bz.Text));
ArrCar.Add(Car);
Session["ar"]=ArrCar;
/*for(int i=0;i<ArrCar.Count;i++)
{
car Car1=(car)ArrCar[i];
DataRow dr=dt.NewRow();
dr["name"]=Car1.GetName();
dr["num"]=Car1.GetNum();
//string sqlstr="insert table ()values()";
//dbfw db=new dbfw();
//db.Cmd(sqlstr);
//string temp=dr["name"].ToString();
dt.Rows.Add(dr);
}*/
foreach(car Car1 in ArrCar)
{
DataRow dr=dt.NewRow();
dr["name"]=Car1.GetName();
dr["num"]=Car1.GetNum();
dr["serviceprice"]=Car1.GetPrice();
dr["pro"]=Car1.GetPro();
dr["serviceway"]=Car1.GetWay();
dr["bz"]=Car1.GetBz();
dr["servicecode"]=Car1.GetCode();
dr["color"]=Car1.GetColor();
dt.Rows.Add(dr);
total+=Car1.GetNum()*Car1.GetPrice();
}
totalprice.Value=total.ToString();
// Response.Write("<script>window.document.form1.totalprice.value='"+total+"'</script>");
DataGrid dg=new DataGrid();
dg.DataSource=dt.DefaultView;
dg.DataBind();
//DataGrid1.DataSource=dt.DefaultView;
//DataGrid1.DataBind();
pro.Text="";
Button2.Enabled=true;
//增加ajax的操作
System.Text.StringBuilder strb = new System.Text.StringBuilder();
System.IO.StringWriter sw = new System.IO.StringWriter( strb );
System.Web.UI.HtmlTextWriter htw = new HtmlTextWriter( sw );
dg.RenderControl(htw);
string s = strb.ToString();
return s;
}
  回复  引用    
#40楼 2006-03-08 17:49 | kevinmo[未注册用户]
哪个大哥看看是怎么回事情啊？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
  回复  引用    
#41楼 2006-03-29 11:10 | phisun[未注册用户]
@kevinmo
ArrCar=(ArrayList)Session["ar"];

后台取Session 有问题
  回复  引用    
#42楼 2006-04-13 14:31 | 小程序员[未注册用户]
我按照你说的进行试验，怎么显示有javascript错误啊？
另：你的qq什么时候上啊？我已经请求了若干次了，我的qq是11216225


如果方便的话，给我一份源码吧。sunlei800301@163.com，谢谢了。
  回复  引用    
#43楼 2006-04-16 01:18 | quitchat[未注册用户]
根据Michael的说法，这样做其实不是asynchronous的
function LoadGrid()
{
var cc=document.getElementById("UCtd");
cc.innerHTML=DemoMethods.GetAjaxTable().value;
}

如果要asynchronous,需要
function call()
{
class.method(callback);
}
function callback(res)
{
alert("Result is " + res.value);
}
  回复  引用    
#44楼 2006-04-18 11:03 | xmpb[未注册用户]
回复楼上的，这样算不？
function LoadGrid()
{
DemoMethods.GetAjaxTable(LoadGrid_callback);
}

function LoadGrid_callback(res)
{
document.getElementById("UCtd").innerHTML = res.value;
}
  回复  引用    
#45楼 2006-05-25 14:23 | stu_acer      
文章写的挺好的,是一个不错的例子.
强烈建议园主提供文章源码的下载链接,一来方便大家的学习,二来楼主也省事,一个一个通过邮件发送源码,费时费力.
  回复  引用  查看    
#46楼 2006-05-25 15:52 | huaishu[未注册用户]
StringBuilder类的字符有限制,还是传的字符长度有限制,长度错误
  回复  引用    
#47楼 2006-06-12 14:42 | 帆[未注册用户]
无法将文件“bin\Ajax.dll”复制到运行目录。进程无法访问文件，因为另一个程序正在使用此文件。是什么原因呢？
我以前是用xmlhttp来解决此类问题，但效率不敢恭维
楼主也给我一份源码gxh9@163.com
谢谢！
  回复  引用    
#48楼 2006-06-12 22:31 | dk[未注册用户]
请问各位谁有源代码，email给我一份的d2k3@163.com，谢谢

  回复  引用    
#49楼 2006-07-05 19:26 | dreamalong[未注册用户]
关键是我在客户端增加了DataGrid的行数据，在服务器端无法接收到啊，
  回复  引用    
#50楼 2006-07-25 10:22 | 田世伟[未注册用户]
它这个有问题。这种交互不是动态的交互，如果我先在页面上放一个datagrid控件呢。这时该如何进行通信呢。
  回复  引用    
#51楼 2006-11-26 22:46 | zhangheng[未注册用户]
谢谢你!
  回复  引用    
#52楼 2007-02-14 15:55 | l[未注册用户]
无法将文件“bin\Ajax.dll”复制到运行目录。进程无法访问文件，因为另一个程序正在使用此文件。是什么原因呢？

  回复  引用    
#53楼 2007-05-30 16:46 | fp i[未注册用户]
不错
  回复  引用    
#54楼 2007-09-21 15:24 | 不错[未注册用户]
Thank you for your contrubution
  回复  引用    



发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 244312




相关文章:

相关链接:

Powered by: 博客园 模板提供：沪江博客 Copyright ©2009 jasmineou