User Control in Asp.Net

User Control in Asp.Net


Hi Friendz,
           In this post i will show you how to use user control.

First you have to know what is user control.

In addition to using Web server controls in your ASP.NET Web pages, you can create your own custom, reusable controls using the same techniques you use for creating ASP.NET Web pages. These controls are called user controls.

A user control is a kind of composite control that works much like an ASP.NET Web page—you can add existing Web server controls and markup to a user control, and define properties and methods for the control. You can then embed them in ASP.NET Web pages, where they act as a unit.

Now we will see how to create a user control and use it.

Step 1: Right Click on your Project and add new item a popup will appear. Select  Web User Control and Name it Registration.

Step 2: Open Registration.ascx and paste below code.

<div id="RegUserControl">

    <div id="RegUserControl_header">

        <h1 style="color: Black;">

            Free Registration Form!</h1>

    </div>

    <hr style="margin-top: 0px; margin-left: 1px; width: 223px;" />

    <br />

    <asp:Table ID="Table1" runat="server" Style="margin-left: 5px; color: Black;">

        <asp:TableRow>

            <asp:TableCell>

                    <input type="text" id="txtFirstName" placeholder="First Name" style="width: 94px;font-size:10px;" />

            </asp:TableCell>

            <asp:TableCell>

                    <input type="text" id="txtLastName" placeholder="Last Name" style="width: 94px;font-size:10px;" />

            </asp:TableCell>

        </asp:TableRow>

        <asp:TableRow>

            <asp:TableCell>

                    <select id="ddSelectProfile" style="width: 99px;font-size:10px;">

                        <option value="-1">Select Profile</option>

                        <option value="Trader">Trader</option>

                        <option value="Investor">Investor</option>

                        <option value="Employed">Employed</option>

                    </select>

            </asp:TableCell>

            <asp:TableCell>

                    <select id="ddSelectCity" style="width: 99px;font-size:10px;">

                        <option value="-1">Select City</option>

                        <option value="saab">Las Vegas</option>

                        <option value="mercedes">New York</option>

                        <option value="audi">London</option>

                    </select>

            </asp:TableCell>

        </asp:TableRow>

        <asp:TableRow>

            <asp:TableCell>

                    <input type="text" id="txtMobPrfix" value="+91" disabled="disabled" style="width: 24px;font-size:10px;" />

                    <input type="text" id="txtMobNo" style="width: 59px;font-size:10px;" placeholder="Phone" />

            </asp:TableCell>

            <asp:TableCell>

                    <input type="text" id="txtEmail" placeholder="Email" style="width: 93px;font-size:10px;" />

            </asp:TableCell>

        </asp:TableRow>

        <asp:TableRow>

            <asp:TableCell ColumnSpan="2">

                    <textarea id="txtRequirments" style="width: 198px; height: 35px;font-size:10px;font-family:Arial; resize: none;" placeholder="Please describe Your Requirments."></textarea>

            </asp:TableCell>

        </asp:TableRow>

        <asp:TableRow>

            <asp:TableCell ColumnSpan="2">

                    <div style="width: 200px; font-size: 10px;font-family: Arial;">

                        <input type="checkbox" id="chkT&C" />I agree to all terms & conditions.<span style="color: red;">*</span></div>

            </asp:TableCell>

        </asp:TableRow>

        <asp:TableRow>

            <asp:TableCell ColumnSpan="2">

                    <div style="width: 200px; font-size: 10px;">

                        <input type="submit" style="background-color:#11B5E7;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;color:White;" 

                        id="btnSubmit" value="Submit" /></div>

            </asp:TableCell>

        </asp:TableRow>

    </asp:Table>

</div>

Step 3: Open the page where you want to add user control.After the page tag paste the below code as shown in the image.

<%@ Register TagPrefix="sam" TagName="Label" Src="~/Registration.ascx" %>

Step 4: Now Paste the below code in your MainContent 

 <sam:Label runat="server" ID="Reg_usercontrol" Title="Regestration" />

Now run the project you will see the user control 

Now any where in the project you want this user control just follow Step 3 & Step 4.

You can download sample code from below link:-

User Control Example

Please leave your feedback and comments below..!