자동 크기 조정 된 다른 단추와 일치하도록 단추 너비 조정

Question

두 개의 단추 btnConfirm 및 btnAbort이있는 ASP.NET 페이지가 있습니다. btnConfirm의 너비가 설정되지 않았으므로 자동으로 크기가 맞춰집니다.
btnAbort의 너비는 btnConfirm과 같아야합니다.

문제점 : 두 단추 모두 처음에는 보이지 않는 panel에 있으며, 이는 업데이트 패널의 단추 클릭으로 표시됩니다. 즉, 처음에는 버튼이 페이지에 존재하지 않는다는 의미입니다.

솔루션이 있지만 대개 보이는 컨트롤을 볼 때까지 항상 적용됩니다. 내가 큰 글꼴이 될 방법 확신 할 수 없기 때문에 시도 내가 찾은 솔루션/
내가 원하지 않는다 두 버튼을

설정 고정 폭이다.
뒤에 코드에서

설정 폭은 내가 코드 숨김에서 btnAbort의 폭을 설정했습니다. 내가 Page_Load에서뿐만 아니라 Button_Click 핸들러에서 그것을 시도, 그것은 그러나, btnConfirm.Width 그것을 볼 경우에도 여전히 비어 패널

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

을 보여줍니다.

내가 그것을 Abortbtn 및 Confirmbtn 인해 것에 (항상 0 것 같다 브라우저에서 디버깅에서

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

그러나 페이지의 시작 부분에 스크립트를 추가
자바 스크립트를 통해 폭을 설정 invisible 나는 추정한다.) 그리고 UpdatePanel이 패널을 보여주기 위해 업데이트 될 때 스크립트는 다시 실행되지 않는다. width 속성
바인딩

은 내가 Page_Load에 Page.DataBind()라는 다른 버튼

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

에 Width 속성을 바인딩 btnAbort 마크 업을 변경했습니다. 이것은 아무 것도 변경하지 않는 것 같습니다 (아마도 btnConfirm의 Width 속성은 절대로 설정되지 않았기 때문일 수 있습니다).

지금은 아이디어가 없습니다. 컨트롤의 크기를 동적으로 유지하려면이 작업을 수행 할 수 있습니까? 아니면 고정 폭으로 설정하고 끝내야합니까?

Answer 1

UpdatePanel 업데이트 후 JavaScript 코드를 실행해야합니다. UpdatePanel가 업데이트 시작하고 EndRequestHandler 함수가 UpdatePanel가 업데이트 된 때마다 호출 될 때 BeginRequestHandler 기능을 할 때마다 호출되는 위의 코드와 함께

<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이 업데이트되면 이러한 핸들러가 트리거되므로 가능한 오류가 발생하지 않도록 약간의 점검이 필요할 것입니다.