Exercise 1: Create a Visual Web Part Sandboxed Solution

Task 1 – Creating the Visual Web Part

In this task, you will create a sandboxed solution compatible Visual Web Part project.

1. Start Visual Studio 2010.
2. Click File >> New >> Project.
3. In the New Project dialog, under Installed Templates, select Visual C# >> SharePoint >> 2010 and select Empty SharePoint Project as the template.
   Note:

   There is no project template for a sandboxed solution compatible Visual Web Part, so we started with the Empty SharePoint Project template.
4. In the Name: textbox, enter SandboxVWP.
5. In the Location: textbox, enter C:\%Office365TrainingKit%\2.1\Source\Before and click OK.
6. In the SharePoint Customization Wizard, enter the URL of the on-premises site you created for this session, e.g. https://intranet.contoso.com/Lab02.
7. Select Deploy as a sandboxed solution and click Finish.
8. In the Solution Explorer, right-click the SandboxVWP project and select Add >> New Item.
9. In the Add New Item – SandboxVWP dialog, select the Visual Web Part (Sandboxed) item and click Add.
   Note:

   A Visual Web Part is made up of an ASP.NET user control file (.ascx extension) and its code behind file. Like any other user control, you can use the Visual Studio design surface to drag and drop controls onto your user control. When the new user control opens in Visual Studio, you will be in “Source” view of the user control.

   The Visual Web Part (Sandboxed) project item is part of the Visual Studio 2010 SharePoint Power Tools to allow you to create a sandboxed-compatible Visual Web Part. A normal Visual Web Part cannot be sandboxed, as it needs to work outside the sandbox in order to load the underlying user control for the Visual Web Part.

Task 2 – Developing the Visual Web Part

In this task, you will add functionality to the Visual Web Part.

1. In the Solution Explorer, double-click to open the VisualWebPart1 project item.
2. Switch to Source view to edit the markup of the visual web part.

3. Add the following markup to the body of the page to add a label, drop down list, button, and a GridView control to the body of the visual web part.

   (Toolbox code snippet 2.1.1)

   HTML

   <p> Select List: <asp:DropDownList ID="ddlLists" runat="server" /> </p> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Populate Grid!" /> <p> <asp:GridView ID="gridListItems" runat="server" /> </p>

4. Click the Design button to toggle into design view. The visual web part should now look like:

5. Open the code behind of the visual web part by right-clicking anywhere on the design surface and selecting View Code.

6. Add the following using directives to the top of the code behind file to reference the proper LINQ namespaces.

   (Code Snippet 2.1.2)

   C#

   using System.Linq; using System.Collections.Generic;

7. Locate the Page_Load event handler of the visual web part and add the following code:

   (Code snippet 2.1.3)

   C#

   if (!Page.IsPostBack) { SPWeb web = SPContext.Current.Web; var ListNames = from SPList list in web.Lists where list.BaseTemplate != SPListTemplateType.DocumentLibrary select list.Title; ddlLists.DataSource = ListNames; ddlLists.DataBind(); }

   This code uses LINQ to get the list of Lists in the current SharePoint site and present them in the dropdown list by binding the results of the LINQ query to the dropdown list control.

8. Switch back to the Design view of the visual web part.
9. Double-click on the Populate Grid! button to create the event handler for the button’s click event.

10. Locate the Button1_Click event handler add the following code:

    (Code Snippet 2.1.4)

    C#

    SPList SourceList = SPContext.Current.Web.Lists.TryGetList(ddlLists.SelectedValue); SPQuery qry = new SPQuery(); qry.ViewFieldsOnly = true; qry.ViewFields = "<FieldRef Name='Title' /><FieldRef Name='Author' />"; qry.RowLimit = 20; gridListItems.DataSource = SourceList.GetItems(qry).GetDataTable(); gridListItems.EmptyDataText = string.Format( "The {0} list does not contain any items!", SourceList.Title); gridListItems.DataBind();

    This code will present a dropdown list of choices containing the name of each list in the site which is not a Document Library. When the user picks a list and clicks the button, the Author and Title values from 20 items from that list will be presented in the grid.

    This code takes the list that the user selects in the dropdown list and uses CAML to retrieve 20 items. It then converts the SPListItemCollection results from the SPQuery to a DataTable, and binds the results to the grid.

Task 3 – Testing the Visual Web Part

In this task, you will test the Visual Web Part sandboxed solution.

1. Hit F5 to deploy the package to your local SharePoint 2010 instance and debug the project.

   Visual Studio 2010 will compile and deploy the project, activate the feature and open the specified SharePoint site in a browser window.

2. Click the Edit icon at the top of the page to put the page in Edit mode:

3. Click the Insert tab in the Ribbon

4. Click the Web Part ribbon button to insert the web part.

5. Under Categories select Custom, and under Web Parts select VisualWebPart1 Title. Click Add to add the web part to the page.

   The web part is now added to the page and is ready to test.

6. Click the Save button to save the changes you made to the page.

7. To test the web part, select a list in the drop down list and click the Populate Grid! button.

   The grid should show the items from the list or a message that the list does not contain any items.

Task 4 – Test Sandboxed Solution Compile Time Checking

In this task, you will use the Visual Studio 2010 SharePoint Power Tools to perform sandboxed solution compatibility compile-time checking.

1. Close the browser and return to Visual Studio 2010.
2. In Solution Explorer, double-click the VisualWebPart1.ascx file to open it in Design view.

3. Add a Label and DateTimeControl to the user control from the toolbox:

4. Hit F5 to redeploy the solution and launch a browser to debug the solution.

   The compiler will throw an error because the SharePoint DateTimeControl is not available in the sandboxed solution subset object model.

5. Remove the Label and DateTimeControl controls that were added in the steps above.