In our previous post, we saw how to build a Page Layout for our Jet30 site. Today we will see how to build user controls. We will dissect some of the parts of the Home Page and build them as user controls.
So, for those who don’t remember our Home Page, below is a screenshot:
And weeks back, we also had our initial discussion on dissecting the page into various user controls.
Let us take the simplest of the controls – Latest News and New Services Overviews and turn them into user controls:
User Controls 101 For SharePoint
If you are an ASP.NET developer, you are already familiar with User Controls. They are nothing different in SharePoint except that they may consume SharePoint API and interact with SharePoint data. Let us initially forget that ‘SharePoint interaction’ and just try to build the user control with the static HTML data we already have. The user controls are going to built as assemblies (.dll) and deployed to GAC.
Where do user controls live?
User controls should be living somewhere so that we can load them in the code. So, where do we put our user controls?
The best and recommended place to put them is in the CONTROLTEMPLATES folder in the 12Hive. You can find many of the out-of-the box SharePoint user controls there:
Since our user controls are custom built (not out-of-the box), it is always better to put them in a separate folder inside the CONTROLTEMPLATES. So, for Jet30, our user controls will reside in a folder Jet30 inside the CONTROLTEMPLATES:
But we are not going to create the folder manually, rather deploy them as solutions (.wsp)
Jet30 User Control Solution
To keep things granular, I created a new SPVisualDev solution called Jet30.SharePoint.UserControls :
I then created the CONTROLTEMPLATESJet30 folder:
Added my two user controls (.ascx) to the CONTROLTEMPLATESJet30 folder:
You can easily add user controls using SPVisualDev item templates:
Adding the static HTML code to user controls
Now as we have our user controls ready, we are good enough to move the Latest News and New Services Overview sections to their respective user controls from the Home Page layout.
Browse the Home Page layout until you hit the two required sections:
Copy the code inside the news start & news end , services start & services end to the respective user controls.
Latest News user control:
New Services user control:
Referencing user controls in the Home Page
So, now the only task left is to reference and add these user controls in our Home Page layout.
First, register a tag Jet30 whose src tag match the location of our user controls:
Now, we can make use of the tag prefix and name and reference our user control in the page: