Using ASP.NET Controls in SharePoint

ASP.NET controls

We can view the controls that are available by opening up the Toolbox task pane and maximizing the ASP.NET Controls option. Within this option, there are six categories of controls. Of these, we can ignore the WebParts option because that is simply a link to the Web Parts task pane.

It should be noted that it is not possible to use ASP.NET WebParts in SharePoint 2007 sites. It is, however, possible for developers to create their new user controls as SmartParts (see to allow them to be included within WSS and MOSS sites.

The five remaining categories are:

Standard controls

This contains a large number of controls. Most of these are simple, for example:

  • The Image control, which displays a picture.
  • The Label control, which displays text.
  • The Hyperlink control, which we will use to link from our homepage shortly.

In addition, we have standard controls that are somewhat more exciting:

  • The FileUpload control allows files to be uploaded to the server from the user's computer.
  • The Wizard control allows a multi-step form to be added to our site. At each step of the wizard, the user is asked for different information.
  • The Xml control allows data from an XML document to be displayed on our page (although you may find it easier to use a Data View to display the contents of your XML file).
  • The Calendar control, which we will also add to our site later in this article.

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

Data controls

The data controls allow us to connect to various different data sources, display the results on our page, and update the data in the source.

Because SharePoint already provides us with access to data sources in the Data Source Library task pane, we can safely ignore these controls.

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

Validation controls

The validation controls allow us to validate information input by the user. We will see this in practice towards the end of the article, when we add validation to a form.

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

Navigation controls

The navigation controls provide us with three different methods of helping users navigate our site. The Menu and TreeView controls would allow users to browse to a particular page, while the SiteMapPath control displays breadcrumbs that show their position within the page hierarchy. We will see an example of the Menu control later in this article.

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

Login controls

The login controls allow us to take advantage of ASP.NET's extensive membership provider system. The benefit of this is that we no longer need to manually create all the elements required by a login system (i.e. registration, login, password reminder, etc.). We will also look at this in detail in this article.

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

Further information about virtually all of the ASP.NET server controls, including examples and code snippets, is available in the ASP.NET Control Reference in the .NET Framework SDK, which is available at.

Adding a simple control

In this article, we will be using various server controls in our pages.

We will start by adding one of the simplest controls to our homepage:

  1. Open the share site in SharePoint Designer.
  2. Open the default.aspx page in Design view.
  3. Make sure that the Standard controls are visible in the Toolbox task pane.
  4. Click on the HyperLink control and drag it onto our page.
  5. Right-click on the control that we have just placed and select Properties from the shortcut menu. This will open the Tag Properties task pane to the left of our design window.
  6. Type View Orders Graph into the Text field in the Tag Properties task pane.
  7. Click on the ellipsis to the right of the NavigateUrl field and select orders.aspx from the list of pages.
  8. Finally, save the page.

The following image shows the Properties shortcut menu that we see as we work through this process:

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

Now, when we open http://olmec/share/ in our browser, we see that the default page links to the Order Graphs.

The Menu control

One of the most popular controls at our disposal is the Menu control. This allows us to add a navigation menu to the pages of our site to allow users to move from one page to another.

The Menu control is particularly useful because it can be populated by a data source. In this way, we could automatically display all the wines in our product range (we could even have a red wine menu button with all the red wines as a submenu and likewise with the white wines).

For our example, we will stay with the default.aspx page and add a menu control beneath our link to the graph page:

  1. Drag a Menu control from the Navigation group in the Standard controls in the Toolbox onto the default.aspx page beneath the existing link.
  2. The Common Menu Tasks options will automatically open for us. We will click on Edit Menu Items.
  3. This brings up the Menu Item Editor, which allows us to add our links to the menu.
  4. We will add our first link by clicking on the Add a root item button (which is the first one on the small menu bar).
  5. We can then set the properties for the link. We will do this by specifying default.aspx as our NavigateUrl and Home as our Text.
  6. We can add more root menu items by repeating steps 4 and 5 as often as we wish. We will add a further root item with products.aspx as our NavigateUrl and Products as our Text.
  7. Before we close our Menu Item Editor, we will add a couple of external links as child items of another root item. We will begin this by adding a third root item and giving it the Text External Links. There is no need to add a NavigateUrl this time.
  8. With the External Links node selected, we will then click on the Add a child item button (the second one on the small menu bar) and give this new item as our NavigateUrl and 2F3 Internet as our Text.
  9. Taking care to select the External Links node again, we will add another child item with as our NavigateUrl and Packt Publishing as our Text.
  10. Finally, we will click OK and then save our page.

This image shows the Menu Item Editor that we use to add our menu items:

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

When we view the homepage of our site, we will see the new menu items available to the user. Note that the External Links link has an arrow beside it to notify the user that it contains child links. It should also be noted that this control would usually be placed on every page of the site rather than just one page.

The Calendar control

One of the nicest controls that SharePoint provides us with is the Calendar control. This control makes it easy for users to add a date into a form field. You will no doubt have seen these controls in use when booking a flight or a hotel room online. They are especially useful in helping to prevent confusion that can arise from the different way that North America and Europe treat dates (i.e. month/day/year as opposed to day/month/year).

We will add a Calendar control to a new page and use it to populate a text field:

  1. Create a new ASPX page and call it birthday.aspx.
  2. Type My birthday is: into the form on the page.
  3. Drag a TextBox control from the Standard controls in the Toolbox onto the page to the right of the text we have just added.
  4. Right-click on the TextBox control and select Properties from the shortcut menu.
  5. Change the ID of the TextBox from TextBox1 to txtBirthday.
  6. Next, we will drag a Calendar control from the Standard controls in the Toolbox onto the page.
  7. Right-click on the Calendar control and select Properties from the shortcut menu.
  8. Change the ID of the Calendar from Calendar1 to calBirthday.

Now that we have added the controls to our page, we must make the Calendar control interact with the TextBox. The following code will place the date into the text box when the calendar is used. We will put it at the top of our page in Code view:

<%@ Page Language="C#" %>
<script Language="C#" runat="server">
private void calBirthday_SelectionChanged (object sender,
System.EventArgs e) {
txtBirthday.Text = calBirthday.SelectedDate.ToShortDateString();

We must also edit the Calendar control so that it fires that event:

<asp:Calendar runat="server" id="calBirthday" 

We can now view the page in our browser (e.g. http://olmec/share/birthday.aspx). Notice that when we save our page, SharePoint will give us the following error message:

An error occurred during the processing of /share/birthday.aspx. Code blocks are not allowed in this file.

This is because SharePoint is protective about what code it allows us to run. By default, it disables server-side scripts. This is not a problem though, because we can override the prohibition. To do so, we require a small lesson in editing the web.config file.

Editing the web.config file

The web.config file specifies the settings not just for the share site but also for other sites sharing the same port (port 80) on our SharePoint server. It should be noted that any mistakes we make could stop SharePoint from working. Even if you are working using administrator permissions, it is recommended that you check with your server administrator that it is OK for you to edit this file. It is always a good idea to do this before you edit it, rather than after you have edited it and the sites have crashed!

By default, we will find the file in C:InetpubwwwrootwssVirtualDirectories80 (where 80 is the port number of our SharePoint site) on our server. Before we begin tinkering with this file, it is a good idea to make a backup of it (e.g. web.config.bak).

You may find using Remote Desktop the easiest way to access your server to edit this file.

We will change the following lines of code in our web.config file:



<PageParserPath VirtualPath="/share/birthday.aspx"
CompilationMode="Always" AllowServerSideScript="true" />

We could have left the VirtualPath blank so that server-side scripts are allowed in all SharePoint sites, but limiting it in this way ensures that only our birthday page has script access.

Once this change to the configuration file has been saved, the calendar on our birthday page will operate correctly. When we click on one of the dates, it will be pasted into the txtBirthday field.

While we are tinkering with the web.config file, you may find it useful to change the following line:

<customErrors mode="On" />


<customErrors mode="Off" />

Making this change will provide us with additional information in the run-time error messages, which will help us troubleshoot our code. For security reasons, this should be returned to the On mode when our site is ready to go live.

Validating our forms

We can add validation controls to our form that will check the information input by the user. If they input an incorrect value, then an error message will be displayed.

There are several different types of validation controls. Each performs a specific type of validation when the form is updated.

We will add a RangeValidator to our form to check that the birthday we have selected is credible:

  1. Click and drag a RangeValidator control onto our form.
  2. Right-click on the validation control and select Properties from the shortcut menu.
  3. Set the ControlToValidate to txtBirthday.
  4. Change the Type from String to Date.
  5. Set the MinimumValue to 1/1/1880.
  6. Set the MaximumValue to 1/1/2009.
  7. Set the ErrorMessage to Please select a credible birthday.

If we return to our birthday page in our web browser, we see that if we enter a spurious date such as 1/1/1850 and then press Enter to cause a postback, the validation kicks in and we are greeted with an error message.

Creating a login feature

We know that SharePoint allows users to log in using Windows Authentication (i.e. their network login). What if we would like to provide a login to our site to allow users from outside the network to log in? This is a very common requirement, yet with SharePoint 2003, it proved highly problematic because there was no out-of-the-box alternative and the workarounds that programmers came up with had undesirable side effects.

The good news is that with SharePoint 2007, we can specify the Membership Provider that we would like our site to use. As you will see, implementing this functionality still requires a fair amount of configuring the various servers in our farm, but the solution we end up with is more elegant than it was with SharePoint 2003.

We are going to use the AspNetSqlMembershipProvider in conjunction with the ready-made ASP.NET Login controls to allow our users to create and use a username and password. This login will be stored in our SQL Server database as a new user account in the ASP.NET 2.0 membership system.

Let's go ahead and create a new ASPX page, which we will call register.aspx. We then click and drag the CreateUserWizard control from the Login category of our ASP.NET controls and drop it in the form on our new page. SharePoint Designer automatically creates a fairly ubiquitous registration form for us:

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

As with our WebParts, we can open the list of Common Tasks by clicking on the form and then clicking on the right-hand arrow that appears in the top right-hand corner of the control. This allows us to control our CreateUserWizard control.

It should be noted that the registration process is highly configurable, allowing us to specify exactly which pieces of information are required from the registrant. It is also possible to add as many stages to the registration process as we wish.

If you agree that this form looks uninspiring, then go ahead and give it a pre-defined formatting scheme by clicking on the AutoFormat… link and taking your pick from the five different schemes. I have chosen the Classic scheme for my example.

If you save this page, then view it in your browser (e.g. http://olmec/share/register.aspx), you will get a SharePoint error when you try to submit the form. The error occurs because we have not specified where SharePoint should store the user data. Let's go ahead and set up our data store.

Configuring SQL Server

To provide a home for the user data, we will need to set up specific tables in our SQL Server. Thankfully, Microsoft has provided us with a tool that will do this for us. You will find this aspnet_regsql.exe program in the relevant .NET Framework folder on your server (e.g. C:WINDOWSMicrosoft.NETFrameworkv2.0.50727). Running through the wizard steps in this tool is simple:

  1. Click Next >.
  2. Select Configure SQL Server for application services.
  3. Click Next >.
  4. Type in the name of your server into the Server box. Note that this may be more than just the name of the server that your database is stored on and should also include the instance name (e.g. OLMEC/OFFICESERVERS or .SQLEXPRESS).
  5. Select your database from the drop-down list. In my example, it is called SHARE.
  6. Click Next >.
  7. Click Next > on the summary screen and Finish on the confirmation screen.

Note that SQL Server must be configured to allow remote connections.

If we peek inside our database, we will see that the following tables were created by the wizard:

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

The aspnet_Users table holds information about users (e.g. UserID and UserName), while the aspnet_Membership table holds additional information about the user (such as Password, Email, PasswordQuestion).

The next thing that we need to do is to set up the authentication so we can connect to our SQL database:

  1. Open SQL Server Management Studio.
  2. Right-click on your chosen database server in Object Explorer.
  3. Select Properties from the shortcut menu.
  4. Select the Security option in the left-hand pane of the Server Properties dialog.
  5. Change the Server authentication to SQL Server and Windows Authentication mode.
  6. Click OK.
  7. Open the Security, then the Logins folders in the Object Explorer.
  8. Right-click on the sa user.
  9. Select Properties from the shortcut menu.
  10. Choose a new password that conforms to your password policy (e.g. Bunnyrabb1t) and type it into the Password and Confirm Password fields.
  11. Click OK.
  12. Right-click on the chosen database server in Object Explorer again.
  13. Select Restart from the shortcut menu.
  14. Click Yes.

Adding our first user

In order to access our application, we will add a new user to our tables. Unfortunately, this is not as straightforward as one would hope.

The easiest way to do this would be to drop the Login control onto our register.aspx page and then select Administer Website from the Common Login Tasks list. This should in turn launch the Web Site Administration Tool (WAT), which would allow us to add our user. Unfortunately, the WAT is only available in Visual Studio 2005 (which also uses this control).

In order to use the WAT to add our new user, we must download Microsoft Visual Web Developer 2005 Express Edition from and install it on our workstation.

Once we have installed Visual Studio, we come across another issue that we must overcome. We cannot simply add a new site to our SharePoint server because the default site is already being used for SharePoint sites. We must set up a new virtual site in Internet Information Server (IIS) and connect Visual Studio to that site using a different port number.

Adding a New Virtual Server

As we have mentioned, it will not be possible to use Visual Studio to set up a new site because SharePoint is already using port 80. We will need to manually set up a new site on our SharePoint server that uses a different port number:

  1. Go to Start | All Programs | Administrative Tools | Internet Information Services (IIS) Manager.
  2. Expand the server tag (e.g. Olmec).
  3. Right-click on Web Sites and select New | Web Site… from the shortcut menu.
  4. Click Next >.
  5. Give our site a description (e.g. adduser).
  6. Click Next >.
  7. Set the TCP port number to 8080.
  8. Click Next >.
  9. Click Browse and select the location in which we would like to create a new site (e.g. c:inetpubwwwroot), then create a new folder called adduser.
  10. Click OK.
  11. Click Next >.
  12. Check Run Scripts (such as ASP).
  13. Click Next >.
  14. Click Finish.

Adding a host header

Visual Studio will not recognize an address with a port number in it as a valid virtual path (see for more information), so before we can connect to our new site with Visual Studio, we must set up a host header using IIS:

  1. Right-click on our adduser site and select Properties.
  2. With the Web Site tab selected, click on the Advanced button.
  3. Click Add….
  4. Type 8080 into the TCP port.
  5. Type in a Host Header value (e.g. adduser.olmec.malbet.local).

Adding an A record

In order for traffic to find the correct server, we must add an (A) name to our DNS server. We will do the following on the server that looks after our network's DNS:

  1. Go to Start | All Programs | Administrative Tools | DNS.
  2. Expand the host name server.
  3. Expand the Forward Lookup Zones.
  4. Right-click on the zone you would like to administer (e.g. malbet.local).
  5. Select New Host (A)….
  6. Type adduser.olmec in the Name field.
  7. Type the IP address of your SharePoint server into the IP address box.
  8. Click Add Host.

It will take a short while (e.g. 10 minutes) for the DNS changes to propagate through the network.

Extending the virtual server

We will be connecting to our new virtual server with Visual Studio over HTTP. For this to work, FrontPage Server extensions must be installed and enabled on our server.

If FrontPage Extensions are not installed on the server, this can be done by going into Control Panel | Add or Remove Programs | Add/Remove Windows Components | Application Server | Details | Internet Information Services | Details | FrontPage 2002 Server Extensions.

You may have thought that having done this would allow the FrontPage extensions to work, but there is one more step we must perform before they will work. We must extend our virtual server. To do this, right-click on our new virtual server in the IIS server tree and select All Tasks | Configure Server Extensions 2002:

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

This brings up a simple form that allows us to extend the server with the FrontPage extensions. Simply click Submit and watch the very funky cogwheel graphic while we wait.

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

If we are not logged into our workstation with the username that we specified in the extend form, then we must add our username in the Manage users section of the administration site.

Using Visual Studio's Web Site Administration Tool

It is now possible to use Visual Studio to set up a new site on our new website:

  1. Go to File | New Web Site.
  2. Select ASP.NET Web Site.
  3. Set Location to HTTP.
  4. Specify http://adduser.olmec.malbet.local/ as the location.
  5. Click OK.

Your new blank website will be set up on the server for you. Notice that you can also view the new blank page by pointing your web browser at http://olmec:8080/.

Now that we have our new website set up, we can access the WAT by selecting Website | ASP.NET Configuration.

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

Once you have the WAT open, you will want to click on the Security tab:

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

Once in the security page, you will be able to go to Select authentication type and change the authentication type from the local network (i.e. Windows authentication) to the internet (i.e. Forms authentication):

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

Now that you have set up the authentication type, you can click on the Create User link on the Security page and create your user:

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

Thankfully, setting up a new user in the membership provider will be far easier in Windows Server 2008, which will allow the "Add User" feature in IIS7 to be used.

Changing the Authentication Provider

The next thing that we need to do is specify that our site should use forms authentication:

  1. Open the SharePoint Central Administration Website (SCAW) in our browser (e.g. http://olmec:44936/).
  2. Click on Application Management.
  3. Under the Application Security heading, click the Authentication Providers link.
  4. Click on the Web Application drop-down list and select Change Web Application.
  5. Click on the site we would like to change (e.g. SharePoint – 80).
  6. Click on our zone (e.g. Default).
  7. Change the Authentication Type from Windows to Forms.
  8. We will also check the Enable anonymous access box for now, so that we are not left with the Catch 22 situation of not being able to log in to register because we do not have a login yet.
  9. Type AspNetSqlMembershipProvider into the Membership provider name field.
  10. Click Save.

You should now see the sites on port 80 (the default port) correctly configured to use SQL Server as our membership provider:

Preparing Your Forms Conversion Using Oracle Application Express (APEX)

It is important to note that changing the authentication type of our sites in this way means that SharePoint Designer will no longer be able to connect to them. When we need to edit the site in SharePoint Designer, we will need to switch the authentication type back to Windows authentication.

Return to the Application Management screen in your SCAW and select Policy for Web Application.

  1. Click the Add Users link.
  2. Select the zone our site is in (Default).
  3. Click Next >.
  4. We are then able to select the user(s) from our user database and the permissions we would like to grant them.
  5. Once we have finished, click Finish.

Return to the web.config file

The next thing that we need to do is add the following code to the <configuration> section of the web.config file.

Note that the <connectionStrings> section cannot be placed before the <configSections> section.

This will allow our SharePoint site to connect to our user database:

<remove name="LocalSqlServer" />
<add name="LocalSqlServer" connectionString="data
source=OLMEC/OFFICESERVERS; initial catalog=aspnetdb;
user id=sa; password=Bunnyrabb1t;"/>

or if you prefer to use integrated security, you can use this:

<remove name="LocalSqlServer" />
<add name="LocalSqlServer" connectionString="data source=
OLMEC/OFFICESERVERS;Integrated Security=SSPI; AttachDBFilename=
|DataDirectory|aspnetdb.mdf; User Instance=true"

Once these changes have been made, it is a good idea to restart the SharePoint Server (or stop and start the site in IIS).

Additional configuration tweaks

The following can also be added to the <system.web> section to specify the strength of the password policy used (by default, it is 7 characters, including one non-alphanumeric character, so we are allowing it to be a bit weaker):

<membership defaultProvider="SHAREProvider">
<add name="SHAREProvider" type="System.Web.
Security.SqlMembershipProvider" connectionStringName=
"ConnectionString" minRequiredPasswordLength="5"

While we are on the topic of the Create User control, you might be interested to know that it is possible to automatically send a welcome email to the user by adding a MailDefinition tag between the existing asp:CreateUserWizard tags in the code view:

<asp:CreateUserWizard id="CreateUserWizard1" runat="server">
Subject="Welcome to the site!"/>

For the email to be relayed, you will need to specify the SMTP server in the web.config file (and have the SMTP service enabled on the server):

<authentication mode="Forms"/>
<smtpMail serverName="Localhost"/>


In this article, we have learned what ASP.NET controls are and which ones are available to us. We also saw how to implement simple controls, menu controls, calendar controls, validation controls, and login controls into our pages.

You've been reading an excerpt of:

SharePoint Designer Tutorial: Working with SharePoint Websites

Explore Title