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.DataBind()中致电Page_Load。这似乎没有改变任何东西（可能，因为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>

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

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

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

1 个答案: