web-dev-qa-db-fra.com

Fenêtre contextuelle modale ASP.NET WebForms

Je veux savoir quelle est la meilleure façon d'afficher les fenêtres contextuelles modales dans l'application ASP.NET WebForms. Je dois afficher la fenêtre modale avec 2 boutons (OK/Annuler) et appuyer sur le bouton dans mon code. Que dois-je utiliser pour l'implémenter - ModalPopupExtender de AjaxControlToolkit, bootstrap popup modal ou jQuery UI? Je suis un débutant total dans ASP.NET WebForms, donc un exemple de code source ou un tutoriel serait utile, merci!

c#jqueryasp.nettwitter-bootstrapwebforms
9
Denis_Sh

Hé, vérifiez ce code en utilisant modalpopupextender. Mais d'abord, vous devrez installer AjaxControlToolKit à partir du gestionnaire de packages Nuget et l'ajouter en tant que référence d'assembly en haut de votre page .aspx en tant que directive, comme ceci:

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

Alors voici le code du 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>

puis à partir de Code derrière l'événement On Click du bouton Ouvrir PopUp:

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

puis en cliquant sur Ok Button:

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

    mpePopUp.Hide(); }

Sur Annuler, cliquez sur le bouton:

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

    mpePopUp.Hide();
}

Astuce: Si vous n'avez pas la boîte à outils ajax, elle peut être installée avec Nuget.

19
Ron