How can I use ajax components to interact with the server control? For example, if I output a list, can I only use js to output an html one by one? Of course not. You can now interact with the datagrid.
Note: ajax. net components can be downloaded from this network. This document uses for. net 1.1. Http://ajax.schwarz-interactive.de/
1. Add the reference Ajax. dll to the reference. This is nonsense)
2. Create HttpHandler in web. config, which is of course in the system. web string)
<httpHandlers> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" /> </httpHandlers> |
3. Add a setting in Application_Start of Global.
protected void Application_Start(Object sender, EventArgs e) { Ajax.Utility.HandlerPath = "ajax"; } |
4. Create a new class DemoMethods, which provides the method to update the database and output list. In fact, the main idea is to get the html generated after the control is run and then output.
1 [Ajax. AjaxMethod] 2 public int AddAjaxTable (string name) 3 { 4 // enter a string and update it. 5 SqlConnection conn = new SqlConnection ( System. Configuration. ConfigurationSettings. etettings ["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 // This method obtains the html generated by the datagrid. 18 SqlConnection conn = new SqlConnection (System. Configuration. ConfigurationSettings. deleettings ["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 // instantiate an IRD class and set the data source 29 DataGrid dg = new DataGrid (); 30 dg. DataSource = ds. Tables ["db"]; 31 dg. DataBind (); 32 33 // instantiate an HtmlTextWriter class 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 // execute the render of the control and output it to HtmlTextWriter. 39 dg. RenderControl (htw ); 40 41 string s = strb. ToString (); 42 43 return s; // finally, this html is returned. 44} |
5. Create a default. js file to store the js method.
function AddAjax(name) { DemoMethods.AddAjaxTable(name); LoadGrid(); } function LoadGrid() { var cc=document.getElementById("UCtd"); cc.innerHTML=DemoMethods.GetAjaxTable().value; } |
6. Create a default. aspx and add a registered item to the pageload event.
private void Page_Load( object sender, System.EventArgs e) { Ajax.Utility.RegisterTypeForAjax(typeof(AjaxTestPrjLib.DemoMethods)); } |
7. Finally, it is the html and js of default. aspx.
<%@ 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 = "add" onclick="javascript:AddAjax(form.AddTextBox.value);"> <table> <tr> <td id="UCtd"></td> </tr> </table> </form> </body> </HTML> |
In this way, you can use the datagrid to output the table. The general idea is actually relatively simple.
(