[转]关于ASP.NET(C#)程序中TEXTBOX下动态DIV跟随[AJAX应用]

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文转自：http://blog.csdn.net/lolenboy/article/details/1665814

说明：

环境：ASPNET（c#），SQL2K

事例：TEXTBOX下跟随DIV，在TEXTBOX中输入内容，DIV上就显示出相应的查询结果[AJAX]，类似于股票输入查询。

 页面：一个显示页面（FilialeList）；一个后台处理中间文件，一个数据库操作文件，JS操作文件。

显示页面FilialeList：

关键代码 ：

调用JS文件

<script language="javascript" src="../JScript/PubJSFunction.js" type="text/javascript"></script>

//当DIV显示后，点击页面其他地方，DIV隐藏。

<body style="margin: 0px" onclick="f_blur()">

//输入的代码框和相应的DIV的HTML，注意中间文件（PubGetTxtCode.aspx'）路径

<td>
  编码：<asp:TextBox ID="txt_Code" runat="server" Width="110px" CssClass="input1" onkeyup="f_KeyUp('txt_Code','filiale','../Pub/PubGetTxtCode.aspx')"></asp:TextBox>
                                            <div id="divOrders" class="div_Code" style="display: none;">
                                            </div>
</td>

//隐藏对象记录要隐藏哪个DIV的ID（假如页面有好几个输入框和好几个对应的DIV，本例子是页面只有1个输入框和1个DIV）

<input id="hid_DivID" type="hidden" />

中间文件（PubGetTxtCode.aspx）：

protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dtNew = new DataTable();
        Common.PubGetTxtCode valueObj = new Common.PubGetTxtCode();
        int li_Return = 0;
        string ls_ErrText = "";
        string mystr = "";
        string funName = "";
        if (!this.IsPostBack)
        {

            string Type = Request["Type"].Trim().ToString();
            string Code = Request["ls_Code"].Trim().ToString();
            # region Swithch(type)
            switch (Type)
            {
                #region 基础资料
                case "filiale":
                    mystr = "编码" + "||||" + "名称";
                    li_Return = valueObj.GetFiliales(Code, dtNew, ref ls_ErrText);
                    break;

            ....

            }

if(li_Return>0)

{

 for (int i = 0; i < dtNew.Rows.Count; i++)
                    {
                        mystr += ",,,," + dtNew.Rows[i][0].ToString() + "||||" + dtNew.Rows[i][1].ToString();
                    }

}

   this.Response.Write(mystr);
        this.Response.End();

}

//数据库操作文件：（获取10条记录）

 public int GetFiliales(string Code, DataTable dt, ref string ErrText)
        {
            string ls_Sql;
            int ErrCode;
            try
            {
                ls_Sql = "select Top 10 FilialeID,FilialeName from Filiales where FilialeID LIKE '" + Code + "%' AND Status='1'";
                ErrCode = _cmd.GetData(ls_Sql, dt);
                ErrText = "";
            }
            catch (System.Exception e)
            {
                ErrCode = -1900110;
                ErrText = e.Message.ToString();
            }
            return ErrCode;
        }

//JS文件：

 //焦点控制
  function f_blur()
  { 
      var divID = document.all("hid_DivID").value; 
         if(document.all("hid_DivID").value!="")
         {
                document.getElementById(divID).style.display="none";
      }
   }
  
 //获取编码放到TextBox里
  function f_GetCode(txtID,value)
  {
      document.all(txtID).value = value; 
            document.getElementById("divOrders").style.display="none";
  }

//生成DIV内容的HTML

  function f_KeyUp(txtID,type,src)
  {
      document.all("hid_DivID").value="divOrders";
      document.all("divOrders").innerHTML = "";
            var ls_Code = document.all(txtID).value; 
            ls_Code=ls_Code.replace(/ +/, "");
         ls_Code=ls_Code.replace(/ +$/,""); 
   
            if(ls_Code == "")
            {
                document.getElementById("divOrders").style.display="none";
                return;
            }
            else
            {
                var webFileUrl = src+"?s="+Math.random()+"&Type="+type+"&ls_Code="+ls_Code;  
          var result = "";
          var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
          xmlHttp.open("POST", webFileUrl, false); 
          xmlHttp.send(""); 
          result = xmlHttp.responseText;
          if(result != "")
          {
              document.getElementById("divOrders").style.display="";
           var piArray = result.split(",,,,");
              if(piArray.length==1)
              {
                  document.all("divOrders").style.display="none";
                  return;
              }
              
       var html ="<Table  border='0' width='100%' align='center' cellpadding='2' cellspacing='2'>";         

           for(var i=0;i<piArray.length;i++)
           {
            var ary1 = piArray[i].toString().split("||||");
            if (i==0)
            {
                            html+="<Tr style=/"background-color:#CDD0D3 ;/">";
                        }
                        else
                        {
                            html+="<Tr style=/"background-color:#CDD0D3 ;/" onmouseover=/"c=this.style.backgroundColor;this.style.backgroundColor='#A7A9AC';/" onmouseout=/"this.style.backgroundColor=c;/" onclick=/"f_GetCode('"+txtID+"','"+ary1[0]+"')/">";
                        }
                        if(i==0)
                        {
                            html+="<td width=/"40%/">";
                            html+=ary1[0];
                            html+="</td>";
                            html+="<td width=/"60%/">";
                            html+=ary1[1];
                            html+="</td>";
                            html+="</Tr>"; 
                        }
                        else
                        {
                            html+="<td>";
                            html+=ary1[0];
                            html+="</td>";
                            html+="<td>";                
                            html+=ary1[1];
                            html+="</td>"; 
                            html+="</Tr>"; 
                        }
                    }
           
        html+="</Table>";
        html+="<iframe src=/"javascript:false/" style=/"Z-INDEX:-1;POSITION:absolute; FILTER:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); VISIBILITY:inherit;TOP:0px;WIDTH:100%;HEIGHT:100%;/"></iframe>"
           document.all("divOrders").innerHTML= html;
           ShowDiv("divOrders",txtID); 
       } 
       else
       {
                  document.all("divOrders").style.display="none";
       }
      } 
     }

function ShowDiv(divID,txtID)
{
 document.all(divID).style.display = "";
 //SelectOrder 是要显示的层的ID
 var drp = document.all(divID);
 var obj = document.all(txtID);
 //btnOrderIn　是要显示在的目标控件的ID
 if(drp)
 {
  var objs = obj;
  var t = obj.offsetTop,  h = obj.clientHeight, l = obj.offsetLeft, p = obj.type;
  while (obj = obj.offsetParent){t += obj.offsetTop; l += obj.offsetLeft;}
   var cw = drp.clientWidth, ch = drp.clientHeight;
  var dw = document.body.clientWidth, dl = document.body.scrollLeft, dt = document.body.scrollTop;
   if (document.body.clientHeight + dt - t - h >= ch) 
       drp.style.top = (p=='image')? t + h : t + h + 6;
   else 
       drp.style.top  = (t - dt < ch) ? ((p=='image')? t + h : t + h + 6) : t - ch;
   if (dw + dl - l >= cw) 
       drp.style.left = l; 
   else 
       drp.style.left = (dw >= cw) ? dw - cw + dl : dl;
  drp.style.visibility = 'visible';
 }
}

 

//假如页面有几个TEXTBOX和几个相应的DIV的时候，可以把divID作为参数传进来。