A user control is a file we create that contains a set of other ASP.NET controls and code grouped
together to provide common functionality. The user control can then be used on different pages
within a website. Ex: In our website there is more than one registration pages for different purpose but the addresses like country, state,city,plot number, street and pin code etc are common in each registration page so at that time it is required.
Here I am taking a message box which will display whenever I required
Step: 1
After create a new website right click on the website and add a new folder as 'User Control'.This folder will contain all user control if more than one required.
Right click on the folder and add new item as 'WebUserControl.ascx' and rename as 'Popup.ascx'. Here I have taken AJAX and some image file of my choice.
Add the following code in design page
Source Code :-
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PopUp.ascx.cs" Inherits="Website.App_WebControls.App_UserControls.PopUp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Button runat="server" ID="BtnMessage" Style="display: none" />
<asp:ModalPopupExtender ID="modalMessage" runat="server" TargetControlID="BtnMessage"
PopupControlID="PnlMessage" OkControlID="Okbtn" CancelControlID="imgClose" BackgroundCssClass="ModalBackgroundCSS">
</asp:ModalPopupExtender>
<asp:Panel runat="Server" ID="PnlMessage" DefaultButton="Okbtn" Style="border: solid 2px #BBBBBB;
font-family: Arial; width: 325px; height: 150px">
<table style="width: 100%; border: 0px none;border-collapse:collapse; " cellspacing="-1" cellpadding="-1" >
<tr style="background-color:Teal; height: 30px; color: White; font-size: 15px;">
<td colspan="2">
<table style="width: 100%;">
<tr>
<td style="width: 95%">
Message from My Project
</td>
<td>
<asp:Image ID="imgClose" runat="server" ImageUrl="../../images/quite.png" />
</td>
</tr>
</table>
</td>
</tr>
<tr style="background-color: White; height: 90px">
<td align="right">
<asp:Image ID="imgError" runat="server" ImageUrl="~/images/error.jpg" />
</td>
<td>
<div style="margin-left: 2%; width: 90%; font-size: 13px;">
<asp:Label ID="LblModalMessage" runat="server" Text=""></asp:Label></div>
</td>
</tr>
<tr style="height: 30px; background-color: Teal">
<td colspan="2" align="right">
<asp:Button ID="Okbtn" runat="server" Text="OK" Width="90px" Font-Size="13px" CausesValidation="false" />
</td>
</tr>
</table>
</asp:Panel>
Design View :-
N.B : No need of writing code in PopUp.ascx.cs page
Step: 2
After creating this user control right click on the website and add a new folder as 'My Project'.This folder will contain all aspx pages if more than one required.
Right click on the folder and add new item as 'Default.aspx' and rename as 'MyPage1.aspx'. Then register the user control page in this page as
<%@ Register Src="~/UserControl/PopUp.ascx" TagName="Pop" TagPrefix="popup" %>
then add this control anywhere in the page as
<popup:Pop ID="MessagePop" runat="server" Visible="false" />
Step: 3
After finished the design create a user defined method as
void Message(string msg)
{
ContentPlaceHolder cp = (ContentPlaceHolder)this.Master.FindControl("ContentPlaceHolder1");
UserControl uc = (UserControl)cp.FindControl("MessagePop");
if (uc != null)
{
Label lb = (Label)uc.FindControl("LblModalMessage");
lb.Text = msg;
MessagePop.Visible = true;
AjaxControlToolkit.ModalPopupExtender modal = (AjaxControlToolkit.ModalPopupExtender)uc.FindControl("modalMessage");
modal.Show();
}
}
In button click event or whenever the message required just call
Message("Data Insereted Successfully !");
No comments:
Post a Comment