Creating Visual Web Parts by Using SharePoint 2010 Controls

Getting Started with Web Development in SharePoint 2010:  Learn how to create a visual Web Part by using SharePoint and ASP.NET controls.

Applies to: Office 2010 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio 2010

Published:  June 2010

Provided by:   Frank Rice, Microsoft Corporation

In this exercise, you create a Microsoft SharePoint 2010 visual Web Part in Microsoft Visual Studio 2010 and then add a SharePoint ListViewByQuery control, an ASP.NET Label control, and a SharePoint DateTime control to it. The Web Part filters items in a list of projects that are based on a date. To complete this task, you must do the following:

• Create a SharePoint Visual Web Part Project

• Create a Projects Listing Web Part

• Test the Solution

Create a SharePoint Visual Web Part Project

In this task, you create a Visual Web Part SharePoint 2010 project in Microsoft Visual Studio 2010.

To create the project

1. Start Visual Studio 2010.

2. On the File menu, point to New, and then click Project.

3. In the New Project dialog window, in the Installed Templates section, click Visual C#, click SharePoint, and then click 2010.

4. From the project items, click Visual Web Part.

5. In the Name box, type ProjectsListWebPart and then click OK.

6. In the SharePoint Customization Wizard, type the URL of the local website that you want to use for this exercise (such as https://localhost/SampleWebSite).

7. For the trust level, select Deploy as a farm solution and then click Finish.

Create a Projects Listing Web Part

In this task, you add SharePoint and ASP.NET controls to the Web Part. Then you add code to query the Projects list and return those items that are less than or equal to a specified date.

To customize the Web Part

1. In Solution Explorer, double-click VisualWebPart1.webpart.

2. Change the Title property in the VisualWebPart1.webpart file to Projects List Web Part.

3. Add the following code to the end of existing code in VisualWebPart1UserControl.ascx. This code adds a SharePoint ListViewByQuery control, an ASP.NET Label control, and a SharePoint DateTime control. You can achieve the same thing by dragging the controls from the toolbox onto the VisualWebPart1UserControl.ascx file screen. Make sure that the ID attribute values match the values in the following code.

   <SharePoint:ListViewByQuery runat="server" ID="ProjectsListView" />
   <br />
   <asp:Label ID="Label1" runat="server" Text="Items due by:" />
   <SharePoint:DateTimeControl ID="DueDate" AutoPostBack="true" OnDateChanged="OnDate_Changed"
       DateOnly="true" runat="server">
   </SharePoint:DateTimeControl>
   

4. In Solution Explorer, right-click VisualWebPart1UserControl.ascx and then click View Code.

5. Add the following using statements.

   using Microsoft.SharePoint;
   using Microsoft.SharePoint.Utilities;
   using System.Web;
   

6. Add the following code to the body of the Page_Load method.

   DateTime dueDate = DateTime.Now;
   
   if (!string.IsNullOrEmpty(Request.QueryString["date"]))
   {
       dueDate = DateTime.Parse(Request.QueryString["date"]);
   }
   DueDate.SelectedDate = dueDate;
   
   SPWeb home = SPContext.Current.Web;
   ProjectsListView.List = home.Lists["Projects"];
   
   SPQuery query = new SPQuery(ProjectsListView.List.DefaultView);
   query.ViewFields = "<FieldRef Name=\"Title\" /><FieldRef Name=\"Due_x0020_Date\" />";
   query.Query = string.Format(
       "<Where><Leq><FieldRef Name=\"Due_x0020_Date\" /><Value Type=\"DateTime\">{0}</Value></Leq></Where>"
       , dueDate.ToString("s"));
   
   ProjectsListView.DisableFilter = true;
   ProjectsListView.DisableSort = true;
   ProjectsListView.Query = query;
   

7. Add the following code after the Page_Load method.

   protected void OnDate_Changed(object sender, EventArgs e)
   {
       SPUtility.Redirect(SPContext.Current.ListItem.Name
            , SPRedirectFlags.Default
            , HttpContext.Current
            , string.Format("date={0}", DueDate.SelectedDate.ToString("d")));
   }
   

8. In Solution Explorer, right-click ProjectsListWebPart and then click Deploy.

   When the project deploys successfully, go to the next section.

Test the Solution

In this task, you test the solution by adding the Web Part to the Home page of the website specified previously.

To add test the solution

1. Open the website.

2. On the Home page, at the top of the page, click Edit.

3. On the ribbon, under Editing Tools, click the Insert tab.

4. Click Web Part and then under Categories, select Custom as shown in Figure 1. The Projects List Web Part appears in the list of Web Parts.

   Figure 1. Web part insert screen

   

5. On the ribbon, click Save & Close. Click Yes if the Save Changes dialog screen appears.

   You now have your new Web Part listing projects as shown in Figure 2.

   Figure 2. Web part listing projects

   

6. Click the DateTime list and scroll back to 12/1/2009. The number of items displayed should decrease by one.

Next Steps

• Quick Note Scenario: Getting Started with Web Development in SharePoint 2010

• Next Steps

• ff630939(v=office.14).md