Extract User Control Feature Using VS 2012

Introduction

Today, in this article let's play around with one of the interesting and most useful concepts in SharePoint 2010.

Question: What is extract to user control?

In simple terms "It enables wrap up and keeps the block of code as independent into the user control. Whereby the created user control can be used across multiple pages".

Step 1: The complete code of webform1.aspx looks like this:
 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ExtractUCApp.WebForm1" %>

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <center>

            <table>

                <tr>

                    <th>

                        S.No

                    </th>

                    <th>

                        First Name

                    </th>

                    <th>

                        Last Name

                    </th>

                    <th>

                        Age

                    </th>

                </tr>

                <tr>

                    <td>

                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

                    </td>

                    <td>

                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

                    </td>

                    <td>

                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

                    </td>

                    <td>

                        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

                    </td>

                </tr>

            </table>

        </center>

    </div>

    </form>

</body>

</html>

 

Step 2: The screen of extracting to user control output looks like this:

 

Extract-User-Control-Feature-using-VS-2012.jpg
 

Step 3: Provide the unique name for the user control:

 

save-Extract-User-Control-Feature-using-VS-2012.jpg

Step 4: The complete code after user control creation for webform1.aspx looks like this:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ExtractUCApp.WebForm1" %>

 

<%@ Register Src="~/UserControl1.ascx" TagPrefix="uc1" TagName="UserControl1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <uc1:usercontrol1 runat="server" id="UserControl1" /></div>

    </form>

</body>

</html>

 

Step 5: The complete code of usercontrol1.ascx looks like this:

 

<%@  Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl1.ascx.cs"

    Inherits="ExtractUCApp.UserControl1" %>

<center>

    <table>

        <tr>

            <th>

                S.No

            </th>

            <th>

                First Name

            </th>

            <th>

                Last Name

            </th>

            <th>

                Age

            </th>

        </tr>

        <tr>

            <td>

                <asp:textbox id="TextBox1" runat="server"></asp:textbox>

            </td>

            <td>

                <asp:textbox id="TextBox2" runat="server"></asp:textbox>

            </td>

            <td>

                <asp:textbox id="TextBox3" runat="server"></asp:textbox>

            </td>

            <td>

                <asp:textbox id="TextBox4" runat="server"></asp:textbox>

            </td>

        </tr>

    </table>

</center>

 

Step 6: The output of the application looks like this:

 

output-Extract-User-Control-Feature-using-VS-2012.jpg  
I hope this article is useful for you.

Up Next
    Ebook Download
    View all
    Learn
    View all
    MVC Corporation is consulting and IT services based company.