programing

ASP.NET: ModalPopupExtender는 버튼 클릭 이벤트가 발생하지 않도록 방지합니다.

codeshow 2023. 8. 26. 00:06
반응형

ASP.NET: ModalPopupExtender는 버튼 클릭 이벤트가 발생하지 않도록 방지합니다.

제가 하려는 것은 다음과 같습니다. 제 페이지의 단추를 클릭하면 (2) 일이 발생합니다.

  1. 사용자가 단추를 누르거나 값을 변경할 수 없도록 하는 모드 팝업 표시
  2. 완료되면 Modal Popup을 숨기고 메서드 뒤에 있는 내 코드 호출

ASP 마크업은 다음과 같습니다.

<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
    UpdateMode="Always">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <asp:Panel ID="pnlHidden" runat="server" style="display: none;">
            <div>
            <h1>Saving...</h1>
            </div>
        </asp:Panel>
        <cc1:ModalPopupExtender ID="modalPopup"
            BackgroundCssClass="modalBackground" runat="server"
            TargetControlID="btnSaveData" PopupControlID="pnlHidden"
            BehaviorID="ShowModal">
        </cc1:ModalPopupExtender>
        <asp:Button ID="btnSaveData" runat="server" Text="Save Data"
            OnClick="btnSaveData_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

다음은 C# 코드 뒤에 있는 제 코드입니다.

protected void btnSaveData_Click(object sender, EventArgs e)
{
   UpdateUserData(GetLoggedInUser());
   modalPopup.Enabled = false;
}

왜 안 되는 거지?Modal Popup은 완벽하게 표시되지만 btnSaveData_Click 이벤트는 실행되지 않습니다.

업데이트: 첫 번째 제안은 저에게 효과가 없었습니다.저는 또한 당신의 두 번째 제안을 시도했습니다.제 입장에서 한 가지 사소한 차이점은 제 모달 패널에 버튼이 없다는 것입니다. (pnlHidden) 단지 메시지일 뿐입니다.저는 클라이언트 측에서 Javascript 이벤트를 사용해 보았습니다. 적어도 서버 측 이벤트와 동시에 발생했습니다.이것은 좋은 소식이었지만 Modal Popup Extender 또는 해당 동작에서 핸들을 찾거나 잡을 수 없는 것 같습니다.ID. 작동하지 않습니다.

function showOverlay() {
    var popup = $find('modalPopup');
    popup.show();
}

팝업은 항상 null과 같습니다.

최종 업데이트: 이 작업을 수행하기 위한 최종 솔루션입니다(OnClientClick AND OnClick 사용에 대해 구체적으로 메모).

<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
    <asp:Panel ID="pnlHidden" runat="server" style="display: none;">
        <div>
        <h1>Saving...</h1>
        </div>
    </asp:Panel>
    <cc1:ModalPopupExtender ID="modalPopup"
        BackgroundCssClass="modalBackground" runat="server"
        TargetControlID="hdnField" PopupControlID="pnlHidden"
        BehaviorID="ShowModal">
    <asp:HiddenField ID="hdnField" runat="server" />
    </cc1:ModalPopupExtender>
    <asp:Button ID="btnSaveData" runat="server" Text="Save Data"
        OnClientClick="showModal();" OnClick="btnSaveData_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

이 Javascript 함수 사용:

function showModal() { $find('ShowModal').show(); }

그리고 그 뒤에 있는 코드는:

protected void btnSaveData_Click(object sender, EventArgs e)
{
   UpdateUserData(GetLoggedInUser());
   modalPopup.hide();
}

이거 먹어봐요.

더미 숨김 필드 작성:

<asp:HiddenField ID="hdnField" runat="server" />

대상 컨트롤 설정Modal Popup 선언의 ID = "hdnField"입니다.

btnSaveData_Click 이벤트에서 다음을 수행합니다.

modalPopup.Show();

이거 먹어봐요.100% 작동합니다.

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
        <asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
        <asp:TextBox ID="TextBox1" runat="server">
        </asp:TextBox>
        <input type="button" value="Get" onclick="abc()" />
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
            PopupControlID="Panel1">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </asp:Panel>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

서버측코드

protected void Btnshow_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Show();
}
protected void BtnHide_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Hide();
}

첫 번째 시도:단추 설정 시도OKControl에 ID 입력ID 태그를 지정하고 다시 시도합니다.

OR

두 번째 시도: 자바스크립트를 통해 이벤트를 호출합니다. 클릭 이벤트에 문제가 있는 것 같습니다.

<div> 
    <cc1:ModalPopupExtender PopupControlID="Panel1"  
         ID="ModalPopupExtender1" 
         runat="server" TargetControlID="LinkButton1" OkControlID="Ok"  
         OnOkScript="__doPostBack('Ok','')"> 
    </cc1:ModalPopupExtender> 
    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>  
</div>         

<asp:Panel ID="Panel1" runat="server"> 
    <asp:Button ID="Ok" runat="server" Text="Ok" onclick="Ok_Click" />             
</asp:Panel>

이 예에서는 버튼을 클릭하면 패널이 즉시 표시되는 대신 조건에 따라 패널 표시를 쉽게 제어할 수 있습니다.

<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click"/>
<asp:HiddenField ID="hdnField" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" 
  TargetControlID="hdnField" 
  ID="btnAdd_ModalPopupExtender"
  PopupControlID="pnlPrintName">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPrintName" runat="server">
.
.
</asp:Panel>

//Server side code:
protected void btnAdd_Click(object sender, EventArgs e)
{
  if( dt.Rows.Count == 0 )
  {
     btnAdd_ModalPopupExtender.Show();
  }
  else
  {
     add();
  }
}

코드 뒤에서 다음을 수행할 수 있습니다.

if (true)
{
    var script = @"Sys.Application.add_load(function() { $find('behavoirIDModal').show(); });";
    ScriptManager.RegisterStartupScript(this, GetType(), "Show", script, true);
}

이 '동작 변경'ID Modal'

언급URL : https://stackoverflow.com/questions/2877551/asp-net-modalpopupextender-prevents-button-click-event-from-firing

반응형