web-dev-qa-db-ja.com

ASP.NET WebFormsモーダルポップアップウィンドウ

ASP.NET WebFormsアプリケーションでモーダルポップアップウィンドウを表示する最良の方法を知りたいです。 2つのボタン（OK /キャンセル）でモーダルウィンドウを表示し、コードでボタンを押す必要があります。 AjaxControlToolkitのModalPopupExtender、bootstrap=モーダルポップアップまたはjQuery UIですか？便利になります。ありがとう！

c#jqueryasp.nettwitter-bootstrapwebforms
9
Denis_Sh

modalpopupextenderを使用してこのコードを確認してください。ただし、最初に、Nuget Package ManagerからAjaxControlToolKitをインストールし、次のように、ディレクティブとして.aspxページの上部にアセンブリ参照として追加する必要があります。

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

次に、modalpopupextenderのコードを示します。

     <asp:Button ID="btnOpenPopUp" runat="server" text="Open PopUp" />
     <asp:Label ID="lblHidden" runat="server" Text=""></asp:Label>
        <ajaxToolkit:ModalPopupExtender ID="mpePopUp" runat="server" TargetControlID="lblHidden" PopupControlID="divPopUp" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>

<div id="divPopUp" class="pnlBackGround">
     <div id="Header" class="header" >MyHeader</div>
     <div id="main" class="main">Main PopUp </div>
     <div id="buttons">
          <div id="DivbtnOK" class="buttonOK"><asp:Button id="btnOk" runat="server" text="Ok" /></div>
          <div id="Divbtncancel" class="buttonOK"><asp:Button id="btnCancel" runat="server" text="Cancel" /></div>
     </div>
</div>

次に、ポップアップを開くボタンのコードビハインドオンイベントから：

protected void btnOpenPopUp_Click(object sender, ImageClickEventArgs e)
{
    mpePopUp.Show();
}

Ok Buttonをクリックすると：

protected void btnOk_Click(object sender, ImageClickEventArgs e) {
    //Do Work

    mpePopUp.Hide(); }

[キャンセル]クリックボタン：

protected void btnCancel_Click(object sender, ImageClickEventArgs e)
{
    //Do Work

    mpePopUp.Hide();
}

ヒント：ajaxツールキットがない場合は、Nugetでインストールできます。

19
Ron