调整按钮的宽度，以匹配另一个，自动化的一个

我有一个ASP.NET页面，有两个按钮btnConfirm和btnAbort。 btnConfirm的宽度未设置，所以它自动调整以适合。
我希望btnAbort的宽度与btnConfirm的宽度相同。调整按钮的宽度，以匹配另一个，自动化的一个

问题：两个按钮都在最初不可见的panel中，通过更新面板中的按钮单击显示。这意味着，最初这些按钮不存在于页面上。

有解决方案，但它们通常适用于总是可见的控件，据我所知。我发现解决方案/试过是

设置固定宽度的两个按钮
我不想说，因为我不能肯定大字体将如何定。在代码

设置宽度背后
我尝试设置的btnAbort宽度在代码隐藏。我试图在Page_Load以及在Button_Click处理器，显示面板

pnlConfirm.Visible = true; 
btnAbort.Width = btnConfirm.Width;

然而，btnConfirm.Width仍然是空的，即使它是可见的。

通过JavaScript设置宽度
我看来，Abortbtn和Confirmbtn始终为零（由于是在浏览器中添加脚本到页面的开始

<script type="text/javascript"> 
    var Abortbtn = document.getElementById("<%= btnAbort.ClientID %>"); 
    var Confirmbtn = document.getElementById("<%= btnConfirm.ClientID %>"); 
    Abortbtn.style.width = Confirmbtn.style.width; 
</script>

然而，从调试不可见，我假设），并且当更新UpdatePanel以显示面板时，脚本不会再次执行。

绑定width属性
我改变了btnAbort标记到Width属性绑定到另一个按钮

<asp:Button runat="server" Width="<%# btnConfirm.Width %>" ID="btnAbort" Text="Abort" OnClick="Abort_Clicked" />

我在Page_Load称为Page.DataBind()。这似乎没有改变任何东西（可能，因为btnConfirm的宽度属性从未设置在第一位）。

现在我没有想法。可以这样做以保持控件的尺寸是动态的，还是应该将它们设置为固定宽度并使用它来完成？

来源

2016-12-17 Jens

您需要在UpdatePanel更新后运行您的JavaScript代码。您可以使用下面的代码：

<script type="text/javascript"> 
    function BeginRequestHandler(sender, args) { 
     //code that runs when an UpdatePanel starts refreshing 
    } 

    function EndRequestHandler(sender, args) { 
     //code that runs when an UpdatePanel has finished refreshing. 
     var Abortbtn = document.getElementById("<%= btnAbort.ClientID %>"); 
     var Confirmbtn = document.getElementById("<%= btnConfirm.ClientID %>"); 

     // If this is true, both buttons exist in DOM 
     if(Abortbtn != null && Confirmbtn != null) { 
      Abortbtn.style.width = Confirmbtn.offsetWidth+"px"; 
     } 
    } 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_beginRequest(BeginRequestHandler); 
    prm.add_endRequest(EndRequestHandler); 
</script>

与上面的代码的BeginRequestHandler函数被调用每一次当UpdatePanel开始更新和EndRequestHandler函数被调用每次当UpdatePanel已经更新时间。

由于这些处理程序将被触发，所以UpdatePanel得到更新后，您可能需要进行一些检查以避免可能的错误。

来源

2016-12-17 12:40:25

好戏。这让我走上了正轨。然而'Confirmbtn.style.width'实际上并没有给我再次的宽度，我不得不使用'Abortbtn.style.width = Confirmbtn.offsetWidth +“px”;'来代替。如果你可以改变这个细节以在网站上有一个工作解决方案，那将是非常好的。 – Jens

更新了我的答案。 –

调整按钮的宽度，以匹配另一个，自动化的一个

回答

相关问题