How can we display ASCX control in SharePoint pages?

 Posted by ArticlesMaint on 9/24/2009 | Category: SharePoint Interview questions | Views: 23717

Custom controls in ASP.NET provide huge level of reusability in ASP.NET. They are normally simple controls with ASCX extensions which can be reused in different ASPX pages. We will not be getting in to details of what an ASCX control is. In case you are not familiar with the basics please do read any ASP.NET basic book and we are sure it’s not a rocket science.

To load an ASCX control in SharePoint environment is a simple five step process.

Step1:- We need to create an ASCX. So below is a simple ASCX file which has a label ‘lblDisplay’. There are two functions ‘setText’ and ‘ClearText’ one which sets the label to value and the other clear the label. Both these methods ‘setText’ and ‘clearText’ are called by event click of two buttons ‘cmdSet’ and ‘cmdClear’ respectively.

<%@ Control Language="C#" %>

<script runat="server">
protected void SetText(object sender, EventArgs e)
lblDisplay.Text = "This is a user control";
protected void ClearText(object sender, EventArgs e)
lblDisplay.Text = "";
<asp:Button ID="cmdSet" runat="server" Text="Click Me" OnClick="SetText" />
<asp:Button ID="cmdSetClear" runat="server" Text="Click to clear text" OnClick="ClearText" />
<asp:Label ID="lblDisplay" runat="server" Text="" />

Step 2:- We need to refer this ASCX file in a ASPX page using the register attribute and refer the same using the ‘TagPrefix’ and ‘TagName’. Below is the code snippet in which we have highlighted the same in bold.

<%@ Assembly Name="Microsoft.SharePoint,Version=, Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>

<%@ Page Language="C#" MasterPageFile="~/_layouts/application.master" Inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase" %>

<%@ Register TagPrefix="MyUserControlPrefix" TagName="MyUserControlName" src="~/_controltemplates/MyUserControl/MyUserControl.ascx" %>

<%@ Import Namespace="Microsoft.SharePoint" %>

<asp:Content ID="Content3" ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
This page displays Custom Control in Action

<asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderMain" runat="server">
<MyUserControlPrefix:MyUserControlName ID="id2" runat="server" />

<asp:Content ID="Content2" ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
We never knew custom control is so easy to display.

Below figure shows the overall view , interaction and explanation of ‘MyUserControl.ascx’ and ‘PageUsingCustomControl.aspx’.


Step 3:- We need to copy the ASCX control in the ‘C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES’ directory. For this sample we have created a simple directory called as ‘MyUserControl’ and uploaded ‘MyUserControl.ascx’ in the same. If you remember we had referred the ASCX file using the virtual path sign ‘~’ with the ‘MyUserControl’ folder.

<%@ Register TagPrefix="MyUserControlPrefix" TagName="MyUserControlName" src="~/_controltemplates/MyUserControl/MyUserControl.ascx" %>

Step 4:- We also need to paste the ASP.NET page ‘PageUsingCustomControl.aspx’ in the layouts folder located at ‘C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS’.

Step 5:- This is the easiest step we need to the run the ASPX page and enjoy the how user control runs under the SharePoint environment. Below is how the user controls looks. If you click the button ‘Click me’ the label is set with a text ‘This is a user control’. If you click on ‘Click to clear text’ it will just clear the values of the label.

Note: - If you are using behind code you need to register the behind code in to GAC and refer the same in the ASCX. In this example we have just used in-line code for simplicity.

Asked In: Many Interviews | Alert Moderator 

Comments or Responses

Login to post response