Try It Yourself: Create a User Control

Let’s develop a user control to upload pictures to a picture library created in a top level SharePoint site. Refer to the UserAndCustomControl project in the accompanying code samples for this hour for complete code listings for this example.

1. Create an Empty SharePoint Project in Visual Studio 2010, name it as UserAndCustomControl and configure it to be deployed as a farm solution.

2. Next add a new User Control item to the project, name it as ImageUploaderUserControl, and open it in designer mode.

3. Drag and drop the required control elements from the toolbox onto the designer surface, a File Upload control, a Button control, and a label in this case.

4. Rename the button and the label text so that your user control looks something similar to Figure 5.1.

Figure 5.1. Image Uploader user control

5. Once the user interface elements of the control are ready, double-click the Upload File button and add the following code to the button’s Click event:

protected void ButtonUpload_Click(object sender, EventArgs e)
{
    try
    {
        // Get root web reference
        SPWeb rootWeb = SPContext.Current.Site.RootWeb;

        // Get reference to MyPictureLibrary
        SPPictureLibrary myPictureLibrary =
rootWeb.GetList("MyPictureLibrary") as SPPictureLibrary;

        // Get the FileBytes from the File Upload Control
        byte[] fileBytes = this.FileUpload1.FileBytes;

        // Prepare destination Url and upload the file
        string fileName =
Path.GetFileName(this.FileUpload1.PostedFile.FileName);
        SPFile file =
        myPictureLibrary.RootFolder.Files.Add(
                                          fileName,
                                          fileBytes,
                                          true);
        file.Update();
        this.LabelUploadResult.Text = "Upload Successful!";
    }
    catch (Exception ex)
    {
        this.LabelUploadResult.Text = "Upload Failed:" + ex.Message;
    }
}

The preceding code gets a reference to the top level site in the current site collection and uploads the picture file selected by the user using the File Upload control to a picture library called MyPictureLibrary in the top-level site. The result of the file upload operation, whether success or failure, is displayed using the UploadResult label. Ensure that you have the picture library MyPictureLibrary already created. Later in the hour in the discussion related to web parts, you learn how the end user can configure the library name using the web browser itself.

6. To test this user control, add a new Application Page, called ControlDemo.aspx, to the project and add the following Register tag in the page to register the control:

<%@ Register TagPrefix="uc" TagName="FileUploader"
Src="~/_controltemplates/ImageUploaderUserControl/ ImageUploaderUserControl.ascx" %>

7. Once the control is registered on the page, you can use the following markup code to add the user control anywhere inside the page:

<uc:FileUploader ID="PictureUploader" runat="server" />

8. Build and deploy the solution using Visual Studio and browse to http://<<YouServerName>>/_layouts/ControlDemo/ControlDemo.aspx to see the control in action.

9. Select a file using the Browse button and then click the Upload button, to upload the file to MyPictureLibrary of the top level site.

10. Examine the MyPictureLibrary of the top level site in the current site collection to verify that your image file was uploaded successfully.

This example demonstrates how easy it can be to develop a user control, making use of Visual Studio’s design time support for developing user interface components.

Try It Yourself: Create a Custom Control

In this section we develop a custom control to display pictures uploaded using the ImageUploaderUserControl user control we developed earlier.

1. To create a custom control, insert an Empty Element item in the UserAndCustomControl project that we developed in the preceding section. Name this empty element item ImageViewerCustomControl.

2. Add a new class file and call it ImageViewerCustomControl.cs, under the ImageViewerCustomControl element. Your project should now have a user control named ImageUploaderUserControl, a custom control named ImageViewerCustomControl, and an application page to test these controls, as shown in Figure 5.2.

Figure 5.2. Developing an Image Viewer custom control

3. As a first step, modify the definition of the ImageViewerCustomControl class and change it to inherit from the System.Web.UI.Control class. All the custom controls that you create should inherit from this class. In fact the user controls also derive ultimately from the System.Web.UI.Control class (the UserControl class inherits from the TemplateControl class, which ultimately extends the System.Web.UI.Control control class).

The System.Web.UI.Control class provides a number of methods that you can override to develop your user controls. Out of these the most commonly overridden method is the CreateChildControls method, which, as the name suggests, is used to insert the custom control’s child controls into its controls collection.

4. Override the CreateChildControls method to loop through the picture library and add as many ASP.NET image controls to the custom control’s control collection to render the images in the picture library. Also add the ASP.NET Panel to the controls collection of the custom control to serve as a container for these image controls. One image control is added for every picture in the picture library, as illustrated in the following code snippet:

protected override void CreateChildControls() {
    try
    {
        // Get root web reference
        SPWeb rootWeb = SPContext.Current.Site.RootWeb;

        // Get reference to MyPictureLibrary
        SPPictureLibrary myPictureLibrary =
        rootWeb.GetList("MyPictureLibrary")
        as SPPictureLibrary;

        // Add a Panel to controls collection
        Panel panel = new Panel();
        panel.Width = 353;
        panel.BorderColor = System.Drawing.Color.Gray;
        panel.BorderStyle = BorderStyle.Solid;
        panel.BorderWidth = 1;
        this.Controls.Add(panel);

        foreach (SPListItem item in myPictureLibrary.Items)
        {
            // Create a new image control and set its
            // image url to point to the Picture
            Image image=new Image();
            image.ImageUrl =Path.Combine(rootWeb.Url,item.Url);

            // Add image control to the Panel's Controls Collection
            panel.Controls.Add(image);
        }
    }
    catch (Exception ex)
    {
        // Display any exceptions
        this.Controls.Add(new LiteralControl(ex.Message));
    }
}

5. Add the following Register tag in the application page (ControlDemo.aspx) to register the control on the page:

<%@ Register TagPrefix="cc"
Assembly="$SharePoint.Project.AssemblyFullName$"
Namespace="UserAndCustomControl.CustomControl" %>

6. Once registered, add the following markup code (below the user control’s section) on the page to insert the custom control in the page:

<cc:ImageViewerCustomControl ID="ImageViewer" runat="server" />

7. Build and deploy the solution using Visual Studio and navigate to the ControlsDemo.aspx application page, which should now look something like Figure 5.3.

Figure 5.3. Image Viewer Custom Control in Action

8. Test the control by uploading an image (“Hello World” in our case) using the Image Uploader user control, and verify that the same image gets displayed in the Image Viewer custom control as well. As you upload more images, additional Image controls are added to the Image Viewer custom control to render all those images on the page.