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

Question

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

的宽度相同

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

有解决方案，但据我所知，它们通常适用于始终可见的控件。我 found/tried 的解决方案是

为两个按钮设置固定宽度
我不想要那个，因为我不能确定字体会有多大。

在代码隐藏中设置宽度
我尝试在代码隐藏中设置 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 的宽度属性一开始就没有设置）。

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

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 更新都会触发这些处理程序，因此您可能需要进行一些检查以避免可能的错误。

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

Adjust Width of Button to match another, autosized one

javascript

asp.net

webforms

updatepanel