There are three ways to show a popup message in ASP.NET webpages. Each of them could be used depending on which function we need. I found these solutions while having an internship at SunTseu - Paris.
The first and the most simple way is using javascript. That means, we add a script to the web control. Here, I write a method that can be called as we need:
private void ShowPopUpMsg(string psmsg)
{
StringBuilder sb = new StringBuilder();
sb.Append("alert('");
sb.Append(psmsg.Replace("\n", "\\n").Replace("\r", "").Replace("'", "\\'"));
sb.Append("');");
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "showalert", sb.ToString(), true);
}
Why I have to put in that method? Because: In some case, we need to show the message with special characters, or show the system's error that we don't know what is its content.
The second aproach is using an ajax control. For example, we want to show a confirm button when deleting a record in a gridview. The useful way is using ConfirmButtonExtender:
<asp:ImageButton ID="ImageButton2" runat="server" CausesValidation="False" CommandName="Delete"
ImageUrl="~/App_Themes/delete.gif" Text="Supprimer" />
<ajaxtoolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="Voulez-vous vraiment supprimer cette compétence?"
TargetControlID="ImageButton2">
</ajaxtoolkit:ConfirmButtonExtender>
Note that we must have AjaxControl toolkit dll in our application.
The third aproach, the most powerfull way to do anything we want, is using ModalPopupExtender - an ajaxt control. This control help we show a popup and manipulate with it as the panel, the iframe,... The problem is it has TargetControlID, (for example a button) we click on it and the popup will show. Can we call the popup dynamically in our program? yes. We need to set TargetControlID of the ModalPopupExtender to the hiden control:
<asp:Button ID="btnModalPopup" runat="server" CausesValidation="False" Style="display: none" />
<ajaxtoolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="ModalPopupBG"
TargetControlID="btnModalPopup" PopupControlID="Panel1" Drag="true" CancelControlID="btnCancel">
</ajaxtoolkit:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="ModalPopup">
<table runat="server" id="definition" width="100%">
<tr>
<td>
<asp:Label ID="Label7" runat="server" Text="Voulez-vous ajouter la définition de nouveau champs: "></asp:Label>
<br /><br />
<asp:Panel ID="pnlDomaine" runat="server" Visible="false">
<asp:Label ID="lblDomaine" runat="server"></asp:Label>
<table style="width: 100%;">
<tr>
<td align="justify" style="width: 50px">
</td>
<td>
<asp:TextBox ID="txtDomaineDef" runat="server" TextMode="MultiLine" Height="50px"
Width="100%"></asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="pnlMetier" runat="server" Visible="false">
<asp:Label ID="lblMetier" runat="server"></asp:Label>
<table style="width: 100%;">
<tr>
<td align="justify" style="width: 50px">
</td>
<td>
<asp:TextBox ID="txtMetierDef" runat="server" TextMode="MultiLine" Height="50px"
Width="100%"></asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="pnlCompetence" runat="server" Visible="false">
<asp:Label ID="lblCompetence" runat="server"></asp:Label>
<table style="width: 100%;">
<tr>
<td align="justify" style="width: 50px">
</td>
<td>
<asp:TextBox ID="txtCompetenceDef" runat="server" TextMode="MultiLine" Height="50px"
Width="100%"></asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>
<br />
<div id="pnl" runat="server" align="center">
<asp:Button ID="btnOk" runat="server" Text="Valider" OnClick="btnOk_Click" />
<asp:Button ID="btnCancel" runat="server" Text="Annuler" />
</div>
</td>
</tr>
</table>
<ajaxtoolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="definition"
Radius="10" Corners="All" Color="AliceBlue">
</ajaxtoolkit:RoundedCornersExtender>
</asp:Panel>
Attention:
- Attribute Style="display: none" is very important because if we set Visible="false" the control will not render to webpage.
- All our code must be in an UpdatePanel.
- When we want to show the popup, simply call the folowing instruction in code behind: ModalPopupExtender1.Show();
- After show the popup, our code will run nomally
For more information, read:
Happy coding!!!