ASP.NET 中文本框的客户端缩放窗口

引言

文本框服务器控件旁边的图像按钮会启动一个 div 窗口，显示 textbox 的内容。该窗口还允许用户编辑内容并将其粘贴回 textbox。所有这些操作都在客户端进行，无需回发。

背景

许多 Web 开发人员喜欢将他们的 ASP.NET 服务器文本框控件包装到用户控件中，这些控件包括验证、标签、常见问题解答说明等。用户要求的一个功能是，通过一个大尺寸的可滚动弹出窗口查看 textbox 的内容，并能够在客户端编辑和提交内容。在某些情况下，多行 textbox 可能不够用。

Using the Code

首先在 aspx 代码中添加你的 textbox 和图像按钮，并将它们紧挨着放置

<div style="float:left"><asp:TextBox ID="txt" runat="server" Width="200px" /></div>
<div style="float:left">
<img alt="zoom text" id="imgZoom" runat="server" style="cursor:pointer;" /></div>	

接下来，将 DIV 弹出窗口添加到 aspx 页面。默认情况下，此窗口保持隐藏状态。这个 DIV 包含一个多行 textbox 来保存内容，一个提交按钮将更改发布回父 textbox，一个取消按钮用于在不进行任何更改的情况下关闭弹出窗口，以及一个隐藏的输入框来保存父 textbox 的 ID。

<div id="divZoom" style="z-index:1000;" style="font-size:smaller;
	font-family:Arial;position:absolute;top:0; left:8;visibility:hidden;
	background-color:#C0C0C0;padding:3px 3px 3px 3px;border:solid 1px black;">
    <asp:TextBox runat="server" ID="txtZoom" TextMode="MultiLine" Wrap="false" 
	Width="400px" Height="300px"></asp:TextBox><br />
    <button id="btnZoomSubmit" onclick="HideZoom(true);return false;" 
	style="cursor:hand;">Submit</button>&nbsp;<button id="btnZoomCancel" 
	onclick="HideZoom(false);return false;" style="cursor:hand;">Cancel</button>    
    <input type="hidden" id="txtid" name="txtname" value="txtvalue" />
</div>   

在页面预渲染方法中，根据 textbox 的启用/只读状态，将 JavaScript 调用添加到 imagebutton。以下是我使用的两个图像 - 一个用于启用状态，另一个用于禁用状态的 textbox。

启用状态的 textbox，显示此图像：

禁用状态的 textbox，显示此图像：

 private void Page_PreRender(object sender, System.EventArgs e)
 {      
        if (txt.Enabled && !txt.ReadOnly)
        {   //add onclick call
            imgZoom.Attributes.Add("onclick", "ShowZoomPopup('" + txt.ClientID + "');");
            imgZoom.Src = "../images/txtzoom.png";
        }
        else
        {   //remove onclick call
            imgZoom.Attributes.Add("onclick", ""); 
            imgZoom.Src = "../images/txtzoomdisabled.png";     
        }
}		 

这部分代码放在 aspx 的 JavaScript 部分

<script language="JavaScript" type="text/javascript" >   

        function ShowZoomPopup(txtboxid) {
            
            //GET THE TEXTBOX VALUE
            var txtbox = document.getElementById(txtboxid);
            var strTextBoxValue = document.getElementById(txtboxid).value;
            
            //SET THE ZOOM PANEL
            var hp = document.getElementById("divZoom");
            hp.style.visibility = "Visible";
            hp.style.top = getAbsoluteTop(txtbox) + 'px';
            hp.style.left = (getAbsoluteLeft(txtbox) + 2) + 'px';
            txtZoom = document.getElementById('ctl00_txtZoom');
            txtZoom.value = strTextBoxValue;
            
            //SET THE HIDDEN FIELD WITH TXT ID
            document.getElementById('txtid').value = txtboxid;
        }
	function HideZoomPopup(status) {
	    //IF TRUE (SUBMIT BUTTON WAS CLICKED i.e. COPY DATA TO TEXTBOX)
	    //FALSE MEANS CANCEL BUTTON WAS CLICKED.
            if (status) {
		//GET HIDDEN CONTROLS DATA
                var txtboxid = document.getElementById('txtid').value;
                document.getElementById(txtboxid).value = 
		document.getElementById('ctl00_txtZoom').value;     
            }
            //SET THE ZOOM PANEL
            var hp = document.getElementById("divZoom");
            hp.style.visibility = "Hidden";
        }
        function getAbsoluteLeft(objectId) {
            o = objectId; 
            var objwidth = o.offsetWidth;
            oLeft = o.offsetLeft;           
            while (o.offsetParent != null) {   
                oParent = o.offsetParent;    
                oLeft += oParent.offsetLeft;
                o = oParent;
            }

            return oLeft;
        }

        function getAbsoluteTop(objectId) {
	        o = objectId;
	        oTop = o.offsetTop  ;          
	        while(o.offsetParent!=null) { 
		        oParent = o.offsetParent;  
		        oTop += oParent.offsetTop; 
		        o = oParent;
	        }

	        return oTop;
        } 
</script> 

就是这样！

历史

• 2010 年 9 月 23 日：初始发布