今天是  80酷酷网已完成全部制作,并坚持每天更新,欢迎提供好的意见或建议!

Ajax在.NET中与Server控件的交互

来源:80酷酷网  更新时间:2010-07-05  点击:123

  ajax|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  DataSetds = 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 >

<form id="Form1" method="post" runat="server">

<INPUT type="text" id="AddTextBox" maxlength="10">
<INPUT type="button" value="添加" 


<table>

<tr>

 <td id="UCtd"></td>

</tr>

 </table>

</form>

</body>

</HTML>

这样,就能使用datagrid来输出表格了。总体思路其实还是比较简单的。



上一篇:AJAX:开发者新的技术天地介绍     下一篇:Ajax并不神秘:揭下各种Ajax控件和类库的小裤衩

相关文章
最新评论     查看全部评论
发表评论
  不能超过500字节,请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论,否则后果自负。