AJAX Framework四个框架:AJAX Control Toolkit,MagicAjax.NET,Anthem.NET,Ajax.NET Professional

from:

AJAX Control Toolkit http://ajaxcontroltoolkit.codeplex.com/

MagicAjax.NET http://sourceforge.net/projects/magicajax/

Anthem.NET http://sourceforge.net/projects/anthem-dot-net/  http://anthemnxt.codeplex.com/

Ajax.NET Professional http://www.ajaxpro.info/  http://ajaxpro.codeplex.com/ 

 Ajax.NET Professional Starter Kit  http://www.codeplex.com/wikipage?ProjectName=AjaxProStarterKit

 

这是一个Apress出版的一本《Pro Ajax and the NET2.0 Platform》作者：Daniel Woolston (原代码下载:Apress.com)的一个Anthem.net代码示例.SQL2005示例数据库,本人只是初步了解,希望有高人指教.

只需引用Anthem.DLL文件,不需Web.Config文件配置,Ajax.NET需要配置

 

客户端代码

  1  < script type = " text/javascript " >
  2  function ShowDiv(divid)
  3  {
  4      if  (document.layers) 
  5     {document.layers[divid].visibility = " show " ;}
  6      else  
  7     {document.getElementById(divid).style.visibility = " visible " ;}
  8  }
  9 
 10  function HideDiv(divid)
 11  {
 12      if  (document.layers) 
 13     {document.layers[divid].visibility = " hide " ;}
 14      else  
 15     {document.getElementById(divid).style.visibility = " hidden " ;}
 16  }
 17 
 18  function BodyLoad()
 19  {
 20      HideDiv( " searchresults " );
 21       //  set focus to the input box
 22      document.form1.keyword.focus();
 23 
 24  }
 25 
 26  function ClearResults()
 27  {   
 28       //  remove existing rows in results table
 29      var resultsdiv  =  document.getElementById( " searchresults " );
 30      var counter  =  resultsdiv.childNodes.length;
 31       for  (var i  =  counter  - 1 ; i  >=   0 ; i -- )
 32      {
 33          resultsdiv.removeChild(resultsdiv.childNodes[i]);
 34      }
 35  }
 36 
 37  function LoadResults(searchterm)
 38  {
 39       if  (searchterm.length  ==   0 )
 40      {
 41           //  if the input box is empty let's dump all the rows from the results table
 42          ClearResults();
 43          HideDiv( " searchresults " );
 44           return ;
 45      }
 46      
 47       //  fetch results from server side
 48       //  this is our actual ajax call
 49      Anthem_InvokePageMethod( ' RetrieveRows ' ,[searchterm] , LoadResultsCallback);
 50 
 51 
 52  }
 53  function LoadResultsCallback(result)
 54  {
 55       //  the xmlhttprequest will return to this function.
 56 
 57      ShowDiv( " searchresults " );
 58      ClearResults();
 59      
 60       //  callback results from Ajax call
 61       //  we'll assign the inbound DataTable
 62       //  to the items variable
 63      var items  =  result.value;
 64      
 65      var count  =  items.Tables.stores.Rows.length;
 66      
 67       //  we'll create a table object in the DOM
 68      var divResults  =  document.getElementById( " searchresults " );
 69      var tblTable  =  document.createElement( " table " );
 70      var tablebody  =  document.createElement( " tbody " );
 71      var tablerow, tablecell, tablenode;
 72      
 73       //  loop through each of the rows in the DataTable
 74       for  (var i  =   0 ; i  <  count; i ++ )
 75      {
 76          var currenttext  =  items.Tables.stores.Rows[i].Name;
 77          
 78           //  we'll create each table row and append it to the
 79           //  table body
 80          tablerow  =  document.createElement( " tr " );
 81          tablecell  =  document.createElement( " td " );
 82               //  build the cell attributes and functions
 83              tablecell.onmouseover  =  function(){ this .className = ' mouseOver ' ;};
 84              tablecell.onmouseout  =  function(){ this .className = ' mouseOut ' ;};
 85              tablecell.setAttribute( " border " ,  " 0 " );
 86              tablecell.onclick  =  function(){ReplaceInput( this );};
 87          tablenode  =  document.createTextNode(currenttext);
 88          tablecell.appendChild(tablenode);
 89          tablerow.appendChild(tablecell);
 90          tablebody.appendChild(tablerow);
 91      }
 92      
 93       //  add the table body to the table
 94      tblTable.appendChild(tablebody);
 95       //  add the table to the div tag
 96      divResults.appendChild(tblTable);
 97  }
 98 
 99  function ReplaceInput(tablecell)
100  {
101       //  swap Input box value with the value selected by
102       //  the users mouse click
103      var inputbox  =  document.getElementById( " keyword " );
104      inputbox.value  =  tablecell.firstChild.nodeValue;
105      ClearResults();
106      HideDiv( " searchresults " );
107  }
108 
109           </ script >
110       </ head >
111       < body onload = " BodyLoad(); " >
112           < form id = " form1 "  method = " post "  runat = " server " >
113               < p >< strong style = " FONT-SIZE: 24pt " > AJAX.NET </ strong >< br  />
114                   < strong > Google Suggest Demo: </ strong ></ p >
115               < input name = " keyword "  onkeyup = " LoadResults(this.value) "  style = " WIDTH:500px "  autocomplete = " off "   />
116               < div align = " left "   class = " box "  id = " searchresults "  style = " WIDTH:500px;BACKGROUND-COLOR:#ccccff " >
117               </ div >
118           </ form >
119       </ body >
120  </ html >

 

 

服务器端代码

 1  using  System;
 2  using  System.Data;
 3  using  System.Configuration;
 4  using  System.Collections;
 5  using  System.Web;
 6  using  System.Web.Security;
 7  using  System.Web.UI;
 8  using  System.Web.UI.WebControls;
 9  using  System.Web.UI.WebControls.WebParts;
10  using  System.Web.UI.HtmlControls;
11  using  System.Data.SqlClient;
12 
13 
14  public   partial   class  SearchPage_DataSets : System.Web.UI.Page
15  {
16       protected   void  Page_Load( object  sender, EventArgs e)
17      {
18           //  We need to register this page with Ajax class, so that it is
19           //  Ajax.Net Aware.
20          Anthem.Manager.Register( this );
21 
22      }
23 
24 
25      [Anthem.Method]
26       public  DataSet RetrieveRows( string  searchterm)
27      {
28           // SQL 2005
29 
30          SqlConnection conn  =   new  SqlConnection(
31               " Data Source=B2FC96ADD7DC472\\GEOVINDU;Initial Catalog=AdventureWorks;Integrated Security=SSPI " );
32          DataTable dtReturn  =   new  DataTable();
33 
34          conn.Open();
35           //  Go get the top 10 store names from AdventureWorks that are like users search criteria
36          SqlCommand cmd  =   new  SqlCommand( " Select Top 10 Name from sales.store where Name like @searchterm Order By Name " , conn);
37          SqlParameter param  =   new  SqlParameter();
38          param.ParameterName  =   " @searchterm " ;
39          searchterm.Trim().Replace( " ' " ,  " '' " );
40          searchterm  +=   " % " ;
41          param.Value  =  searchterm;
42          cmd.Parameters.Add(param);
43          SqlDataAdapter adpt  =   new  SqlDataAdapter(cmd);
44          DataSet dsCustomers  =   new  DataSet();
45          adpt.Fill(dsCustomers,  " stores " );
46 
47          conn.Close();
48 
49 
50           //  send the DataTable back to the CallBack function
51           return  dsCustomers;
52      }
53 
54  }