8 条评论

• 
  pwalai 2008.05.22

  差点忘了 最关键的在pageload()注册 protected void Page_Load(object sender, EventArgs e) { Anthem.Manager.Register(this); } 实际上就是托管了。net工作，避免页面刷新。

• 
  pwalai 2008.05.22

  protected override void OnInit(EventArgs e) { base.OnInit(e); string jcode = "<script language=/"javascript/" type=/"text/javascript/">ClientID = '" + this.ClientID + "_" + "';BodyLoad();</script>"; Page.ClientScript.RegisterStartupScript(typeof(Page), "suggest_control", jcode); } } 这个很关键 ，先继承原来的OnInit() 然后被调用时生成一个前缀名，如前面的myuc_,用js保存在ClientID变量中。

• 
  pwalai 2008.05.22

  下面是1.ascx.cs 代码 [Anthem.Method] public DataTable RetrieveRows(string searchterm) { SqlConnection conn = new SqlConnection("Data Source=(local);Initial Catalog=kmyz2006;Integrated Security=SSPI"); DataTable dtReturn = new DataTable(); conn.Open(); // Go get the top 10 store names that are like users search criteria SqlCommand cmd = new SqlCommand("Select Top 10 ntitle,ntime from v_news where ntitle like @searchterm Order By ntime desc", conn); SqlParameter param = new SqlParameter(); param.ParameterName = "@searchterm"; searchterm.Trim().Replace("'", "''"); searchterm = "%" + searchterm + "%"; param.Value = searchterm; cmd.Parameters.Add(param); SqlDataAdapter adpt = new SqlDataAdapter(cmd); adpt.Fill(dtReturn); conn.Close(); // send the DataTable back to the CallBack function return dtReturn; } 回调服务器代码

• 
  pwalai 2008.05.22

  Anthem_InvokeControlMethod( "<%= ClientID %>", 'RetrieveRows', [searchterm], LoadResultsCallback); } 这个是异步调用关键 <div align="left" class="box" id="searchresults" runat="server" style=" position:absolute; WIDTH:216px;BACKGROUND-COLOR:#cad4a2; left: 755px; top: 325px;"> position:absolute; 使用绝对位置

• 
  pwalai 2008.05.22

  ClearResults(); HideDiv(ClientID + "searchresults"); } &lt;/script&gt; &lt;table width="220" border="0" cellspacing="0" cellpadding="0"&gt; &lt;tr&gt; &lt;td height="45" align="left" valign="top"&gt;&lt;img src="img/search.gif" width="136" height="37" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="30" align="left"&gt; &lt;asp:TextBox ID="keyword" Onkeyup="LoadResults(this.value)" cssclass="search_input" runat="server"&gt;&lt;/asp:TextBox&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="30" align="left"&gt; 请选择范围：&lt;asp:DropDownList ID="DropDownList1" runat="server"&gt; &lt;/asp:DropDownList&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td height="40" align="right" style="padding-right:20px"&gt;<a href="#"> &lt;asp:ImageButton ID="ImageButton1" runat="server" width="77" height="31" ImageUrl="img/search_push.gif" OnClick="ImageButton1_Click" /&gt;</a>&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;div align="left" class="box" id="searchresults" runat="server" style=" position:absolute; WIDTH:216px;BACKGROUND-COLOR:#cad4a2; left: 755px; top: 325px;"&gt; &lt;/div&gt;

• 
  pwalai 2008.05.22

  if(oString.length&gt;=16) { currenttext=oString.substring(0,16); } else { currenttext=oString.toString(); } // we'll create each table row and append it to the // table body tablerow = document.createElement("tr"); tablecell = document.createElement("td"); // build the cell attributes and functions tablecell.onmouseover = function(){this.className='mouseOver';}; tablecell.onmouseout = function(){this.className='mouseOut';}; tablecell.setAttribute("border", "0"); tablecell.onclick = function(){ReplaceInput(this);}; tablenode = document.createTextNode(currenttext); tablecell.appendChild(tablenode); tablerow.appendChild(tablecell); tablebody.appendChild(tablerow); } // add the table body to the table tblTable.appendChild(tablebody); // add the table to the div tag divResults.appendChild(tblTable); /// //var inputbox = document.getElementById(ClientID + "keyword"); //divResults.style.left=inputbox.style.left+10; //divResults.style.top=inputbox.style.top-100; } function ReplaceInput(tablecell) { // swap Input box value with the value selected by // the users mouse click var inputbox = document.getElementById(ClientID + "keyword"); inputbox.value = tablecell.firstChild.nodeValue; ClearResults(

• 
  pwalai 2008.05.22

  function LoadResults(searchterm) { if (searchterm.length == 0) { // if the input box is empty let's dump all the rows from the results table ClearResults(); HideDiv(ClientID + "searchresults"); return; } // fetch results from server side // this is our actual ajax call Anthem_InvokeControlMethod( "&lt;%= ClientID %&gt;", 'RetrieveRows', [searchterm], LoadResultsCallback); } function LoadResultsCallback(result) { // the xmlhttprequest will return to this function. ShowDiv(ClientID + "searchresults"); ClearResults(); // callback results from Ajax call // we'll assign the inbound DataTable // to the items variable var items = result.value; var count = items.Rows.length; // we'll create a table object in the DOM var divResults = document.getElementById(ClientID + "searchresults"); var tblTable = document.createElement("table"); var tablebody = document.createElement("tbody"); var tablerow, tablecell, tablenode; // loop through each of the rows in the DataTable for (var i = 0; i &lt; count; i++) { //var currenttext = items.Rows[i].ntitle; var currenttext; var oString=new String(items.Rows[i].ntitle); if(oString.length&gt;=16) { currenttext=oString.substring(0,

• 
  pwalai 2008.05.22

  1.ascx ========= &lt;%@ Control Language="C#" AutoEventWireup="true" CodeFile="1.ascx.cs" Inherits="1" %&gt; &lt;style type="text/css"&gt; .mouseOut{ background: #cad4a2; color: #0000000; } .mouseOver{ background: #FFFAFA; color: #0000000; } &lt;/style&gt; &lt;script type="text/javascript"&gt; var ClientID; function ShowDiv(divid) { if (document.layers) document.layers[divid].visibility="show"; else document.getElementById(divid).style.visibility="visible"; } function HideDiv(divid) { if (document.layers) document.layers[divid].visibility="hide"; else document.getElementById(divid).style.visibility="hidden"; } function BodyLoad() { HideDiv(ClientID + "searchresults"); // set focus to the input box var findtextbox = document.getElementById(ClientID + "keyword"); findtextbox.focus(); } function ClearResults() { // remove existing rows in results table var resultsdiv = document.getElementById(ClientID + "searchresults"); var counter = resultsdiv.childNodes.length; for (var i = counter -1; i &gt;= 0; i--) { resultsdiv.removeChild(resultsdiv.childNodes[i]); } } function LoadResults(searchterm) { if (searchterm.length == 0) { // if the input box is empty let's dump all the rows from t