[转]关于ASP.NET(C#)程序中TEXTBOX下动态DIV跟随[AJAX应用]
2013-07-09 17:58
525 查看
本文转自: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作为参数传进来。
相关文章推荐
- 一个简单的AJAX实现,基于C#的ASP.Net,包括服务器端的程序代码
- [ASP.NET] 事务(Transaction)是并发使用及C#上程序应用
- 集成Ajax的调试ASP语句的小程序(内嵌可移动+可滚动跟随+可隐藏、显示的输入小窗口,可输入asp语句动态运行可)
- 一个简单的AJAX实现,基于C#的ASP.Net,包括服务器端的程序代码
- [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果
- asp.net ajax 与Ext2框架在.net程序中的应用
- ASP.NET中AjaxTextBox.dll的简单应用
- 关于 Ajax 在ASP.NET 中应用的小例子
- ASP.net 关于TextBox的TextMode=“PassWord”时的动态赋值
- Asp.net关于动态输出服务器控件的应用(转)
- asp.net ajax 与Ext2框架在.net程序中的应用(链接)
- 关于asp.net ajax中的accordion动态加载数据
- 关于Asp.net mvc 2 Ajax thiskbox应用
- sql server 关于表中只增标识问题 C# 实现自动化打开和关闭可执行文件(或 关闭停止与系统交互的可执行文件) ajaxfileupload插件上传图片功能,用MVC和aspx做后台各写了一个案例 将小写阿拉伯数字转换成大写的汉字, C# WinForm 中英文实现, 国际化实现的简单方法 ASP.NET Core 2 学习笔记(六)ASP.NET Core 2 学习笔记(三)
- ASP.net 关于TextBox的TextMode=“PassWord”时的动态赋值
- Asp.net关于动态输出服务器控件的应用
- C# B/S程序中出现“异常详细信息: System.Data.SqlClient.SqlException: 用户 'XXX/ASPNET' 登录失败。”的处理方法
- 利用ASP.NET AJAX实现表格更新程序
- 关于asp.net页面同时使用ajax控件和Freetextbox控件的问题!
- asp.net(c#) MS AJAX的安装