调整按钮的宽度以匹配另一个自动调整大小的按钮

Question

我有一个带有两个按钮 btnConfirm 和 btnAbort 的 ASP.NET 页面。 btnConfirm 的宽度未设置，因此它会自动调整大小以适应。
我想让btnAbort 的宽度与btnConfirm 相同。

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

有一些解决方案，但据我所知，它们通常适用于始终可见的控件。我找到/尝试过的解决方案是

为两个按钮设置固定宽度
我不希望这样，因为我不能确定字体会有多大。

在后面的代码中设置宽度
我尝试在代码隐藏中设置btnAbort 的宽度。我在Page_Load 和Button_Click 处理程序中尝试过，显示面板

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

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

通过 JavaScript 设置宽度
我在页面开头添加了一个脚本

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

但是，从浏览器中的调试来看，Abortbtn 和 Confirmbtn 似乎始终为零（我认为是不可见的），并且当 UpdatePanel 更新以显示面板时，脚本不会再次执行。

绑定宽度属性
我更改了btnAbort 标记以将Width 属性绑定到另一个按钮

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

我在Page_Load 中调用了Page.DataBind()。这似乎没有改变任何东西（可能是因为 btnConfirm 的 Width 属性一开始就没有设置）。

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

Answer 1

您需要在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>

使用上面的代码，每次UpdatePanel 开始更新时都会调用BeginRequestHandler 函数，而每次UpdatePanel 更新时都会调用EndRequestHandler 函数。

由于任何UpdatePanel 更新都会触发这些处理程序，因此您可能需要进行一些检查以避免可能的错误。