DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax在.NET中與Server控件的交互
Ajax在.NET中與Server控件的交互
編輯:AJAX詳解     

利用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來輸出表格了。總體思路其實還是比較簡單的。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved