Monday, May 28, 2012

Working with user control in asp.net



       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