SharePoint 2010 and Azure: Azure Hosted …az12722.vo.msecnd.net/.../labs/spcloudapp1-0/Lab.docx · Web viewIn this lab you will learn how to create a SQL Azure database as well as

Hands-On LabSharePoint 2010 & Azure: Azure Hosted Application Design Pattern

Lab version: 1.0

Last updated: 5/24/2023

CONTENTS

SECTION 1: CREATING SQL AZURE DATABASE..................................................................................3Overview.................................................................................................................................................3

Exercise 1: Create/Configure a SQL Azure Database...............................................................................5

Task 1 – Creating a SQL Azure Database Server..................................................................................5

Task 2 – Configuring the SQL Azure Database Firewall........................................................................7

Task 3 – Configuring the SQL Azure Database.....................................................................................8

Exercise 2: Create a Database Schema....................................................................................................9

Task 1 – Connecting to the SQL Azure Database.................................................................................9

Task 2 – Creating Database Schema..................................................................................................11

Exercise 3: Load Sample Data into the SQL Azure Database..................................................................13

Task 1 – Connecting to the SQL Azure Database...............................................................................13

Task 2 – Inserting Sample Data into SQL Azure Database.................................................................15

Summary...............................................................................................................................................18

SECTION 2: CREATE WINDOWS AZURE WEB ROLE THAT WORKS WITH A SQL AZURE DATABASE............................................................................................................................................... 18

Overview...............................................................................................................................................18

Exercise 1: Create the Web Role............................................................................................................19

Task 1 – Creating The New Windows Azure Web Role Project..........................................................19

Exercise 2: Create Master Data List Page...............................................................................................20

Task 1 – Adding a GridView Control and DataSource to Display Contents of the SQL Azure Database...........................................................................................................................................................20

Task 2 – Updating the GridView Control Columns.............................................................................21

Exercise 3: Create Item Detail Page.......................................................................................................23

Task 1 – Creating the Details ASP.NET Page.......................................................................................23

Task 2 – Adding a Data Source to the Detail Page.............................................................................24

Task 3 – Updating the Detail Page’s Data Source to Show the Selected Item....................................24

Task 4 – Adding a Details View Control to View the Details of the Selected Item.............................25

Exercise 4: Deploy Web Role to Windows Azure...................................................................................26

Task 1 – Creating a Windows Azure Deployment Package................................................................26

Task 2 – Depoloying the Windows Azure Web Role to Windows Azure............................................26

Summary...............................................................................................................................................28

SECTION 3: CREATE SANDBOXED WEB PART TO SURFACE AZURE WEB ROLE.........................28Overview...............................................................................................................................................28

Exercise 1: Create Sandboxed Web Part................................................................................................29

Task 1 – Creating The New Workflow Project....................................................................................29

Task 2 – Creating a Web Part SharePoint Project Item......................................................................30

Exercise 2: Add Public Properties to Sandboxed Web Part....................................................................32

Task 1 – Adding a Configurable Windows Azure URL Destiation to the Web Part.............................32

Exercise 3: Deploy and Test Sandboxed Web Part.................................................................................33

Task 1 – Deploying the Sandboxed Web Part....................................................................................33

Task 2 – Configuring the Web Part to Load the Azure Web Role.......................................................34

Summary...............................................................................................................................................35

Section 1: Creating SQL Azure Database

Overview

In this lab you will create a new SQL Azure database or use an existing one and ensure it is configured correctly. This database will then be populated with a schema and sample data used throughout this lab.

Objectives

In this lab, you will:

Learn to create a SQL Azure database.

Learn to create a schema for a SQL Azure database.

Learn to create sample data for a SQL Azure database.

System Requirements

You must have the following items to complete this lab:

Windows Azure SDK and Windows Azure Tools for Microsoft Visual Studio 2010

Access to a Windows Azure account

http://www.microsoft.com/windowsazure/

http://www.microsoft.com/downloads/en/details.aspx?familyid=7a1089b6-4050-4307-86c4-9dadaa5ed018

Setup

The Windows Azure SDK (included in Windows Azure Tools for Visual Studio) installs a simulation environment on your development machine for testing Azure applications locally before deploying them to the cloud. The simulation environment consists of the development fabric to host web and worker roles, and the development storage which simulates cloud blob, table and queue storage locally.

Development storage uses SQL Server as its underlying storage mechanism, and by default the SDK will attempt to configure it to use SQL Server Express. If you do not have SQL Server Express installed before installing the SDK, or you wish to simply use an existing SQL Server instance to host the development storage database, you must run the dsinit command to select the SQL Server instance where the database will be created.

Please see instructions below for how to run dsinit.

Using dsinit to Configure Development Storage

1. Open a command prompt.

2. Edit the following command line as appropriate for your environment, where [AzureSDKInstallDrive] is the drive where you installed the Azure SDK (or Windows Azure Tools for Visual Studio), and [YourSqlInstance] is the SqlServer where you want to create the development storage database.

[AzureSDKInstallDrive]\ Program Files\Windows Azure SDK\v1.3\bin\devstore\dsinit.exe /sqlinstance:[YourSqlInstance]

Example Command Line:“C:\Program Files\Windows Azure SDK\v1.3\bin\devstore\dsinit.exe” /sqlinstance:.

3. Note that the sample command line above uses the value “.” for the sqlinstance argument, which specifies that the local default SQL instance will be used for development storage.

Exercises

This Hands-On Lab is comprised of the following exercises:

1. Create or configure a SQL Azure database

2. Create a database schema for the SQL Azure database

3. Load sample data into the SQL Azure database schema

Estimated Time to complete this lab: 30 minutes

Exercise 1: Create/Configure a SQL Azure Database

In this exercise, you will create a new SQL Azure database or use an existing one created in a previous lab. You will then modify the database firewall to ensure you can easily connect and interact with the data in the database.

Note: If you already created a SQL Azure database server in a previous lab, you can skip Task 1 and jump to Task 2 and simply reuse the existing database server from the previous lab.

Task 1 – Creating a SQL Azure Database Server

In this task you will create a SQL Azure database server. You will need the login details for a valid Windows Azure subscription to complete this task.

1. Login to the Windows Azure portal.

a. Navigate to the Windows Azure site and login by selecting the Sign in to the Management Portal link the top navigation.

b. Sign in using valid Windows Azure subscription credentials.

2. Create a new SQL Azure Database Server.

a. In the Windows Azure Platform management portal, click Database in the lower-left navigation:

Figure 1SQL Azure Database Navigation

b. The left pane contains a Subscriptions folder. If that folder is empty, create a new subscription using the New button in the top navigation. If it contains a subscription, proceed to the next step.

http://www.microsoft.com/windowsazure

c. Expand the Subscriptions navigation tree and select the existing subscription or the one created in the previous step.

Figure 2Windows Azure Subscription

d. Select the subscription and click the Create button in the Server group of the top navigation:

Figure 3Create new SQL Azure Database Server

i. When prompted, select either of the regions in the US and click Next.

ii. Enter the login credentials for an administrator account (this is like the sa account in SQL Server):

Administrator Login: SPAzureAdmin

Password: Pass@word1

Repeat Password: Pass@word1

Figure 4Create new SQL Azure Database Administrator Login

Task 2 – Configuring the SQL Azure Database Firewall

In this task, you ensure that the firewall configuration of the SQL Azure database is setup so that the custom application will be able to connect to it.

1. Add a single SQL Azure firewall rule by clicking Add.

2. Enter the IP of the workstation where you are doing this lab to grant this machine access to the SQL Azure server and click OK.

Figure 5Create new SQL Azure Database Administrator Login

a. Add a SQL Azure firewall rule by checking the box that grants Windows Azure services access to the database.

b. Check the box Allow other Windows Azure services to access this server.

c. Click Finish to create the SQL Azure server

Note: Write down the name of the new SQL Azure Database Server as you will need this later when creating a connection string.

Task 3 – Configuring the SQL Azure Database

In this task, you create a new SQL Azure database for use in the remainder of this lab.

Note: If you already created a SQL Azure database in a previous lab, you can skip Task 3 and simply reuse the existing database server from the previous lab.

1. Create new SQL Azure Database.

a. Expand the tree navigation on the left to show the new SQL Azure database server and master database.

b. Select the database server and click Create in the Database section of the top navigation:

Figure 6Create new SQL Azure Database

c. When prompted for the database details, use the following:

Database Name: SPAzureKitDb

Edition: Web

Maximum Size: 1GB

Note: Write down the name of the new SQL Azure Database as you will need this later when creating a connection string.

Exercise 2: Create a Database Schema

In this exercise, you will create a schema in your database that will store information about African Cichlids, a type of tropical fish.

Task 1 – Connecting to the SQL Azure Database

In this task, you will connect ot the SQL Azure Database




2. Connect to the SQL Azure Database.





c. Expand the Subscriptions navigation tree until you see the name of your database. Select this database.

Figure 8Windows SQL Azure Database

3. After selecting the database, in the top navigation click the Manage button to launch the database manager.

Figure 9Connect to Windows SQL Azure Database

4. When the Database Manager login prompt appears, enter the credentials you created in the previous lab to connect to the database.

Figure 10Connect to SQL Azure Database

Task 2 – Creating Database Schema

In this task, you will create a simple schema that will contain the data used in the reminder of this lab.

1. Click the New Query button in the top navigation.

Figure 11Creating a SQL Azure Datbase Query

2. Enter the following T-SQL script in and press the Execute button in the top navigation:

T-SQL

CREATE TABLE [dbo].[AfricanCichlids]( [ID] [int] IDENTITY(1,1) NOT NULL, [SpeciesName] [nvarchar](50) NOT NULL, [CommonName] [nvarchar](50) NULL, [OriginLake] [nvarchar](10) NOT NULL, [CichlidType] [nvarchar](25) NOT NULL, [Diet] [nvarchar](20) NULL, [Temperament] [nvarchar](50) NULL, [pH] [nvarchar](10) NULL, [Difficulty] [tinyint] NULL, CONSTRAINT [PrimaryKey_01] PRIMARY KEY CLUSTERED ([ID] ASC))GO

3. Verify the table was created the by clicking the Database tab at the top of the browser and click the Refresh button in the top navigation. You should see the new table in Tables selection of the left navigation.

Figure 12Refreshing the SQL Azure Database Management Tool

Exercise 3: Load Sample Data into the SQL Azure Database

In this exercise, create and load some sample data into the SQL Azure database that will be used within the application created in a later lab.

Task 1 – Connecting to the SQL Azure Database

In this task, you will connect ot the SQL Azure Database




2. Connect to the SQL Azure Database.




c. Expand the Subscriptions navigation tree until you see the name of your database. Select this database.


Figure 14Windows SQL Azure Database

3. After selecting the database, in the top navigation click the Manage button to launch the database manager.

Figure 15Connect to Windows SQL Azure Database

4. When the Database Manager login prompt appears, enter the credentials you created in the previous lab to connect to the database.

Figure 16Connect to SQL Azure Database

Task 2 – Inserting Sample Data into SQL Azure Database

In this task you will create the T-SQL script that will be used to create some sample data & execute it to add the data to the database.

1. Click the New Query button in the top navigation.

Figure 17Creating a SQL Azure Datbase Query

2. Enter the following T-SQL script in and press the Execute button in the top navigation:

T-SQL

INSERT INTO [AfricanCichlids] ([SpeciesName],[CommonName],[OriginLake],[CichlidType],[Diet],[Temperament],[pH],[Difficulty]) VALUES

('Metriaclima callainos','Cobalt Blue Zebra','Malawi','Mbuna','Herbivore','Mildly Aggressive','7.8-8.6',1)

INSERT INTO [AfricanCichlids] ([SpeciesName],[CommonName],[OriginLake],[CichlidType],[Diet],[Temperament],[pH],[Difficulty]) VALUES ('Aulonocara stuartgranti','Cobue','Malawi','Peacock','Carnivore','Peaceful','7.8-8.6',1)

INSERT INTO [AfricanCichlids] ([SpeciesName],[CommonName],[OriginLake],[CichlidType],[Diet],[Temperament],[pH],[Difficulty]) VALUES ('Aristochromis christyi','Malawi Hawk','Malawi','Haplochromines','Carnivore','Peaceful','7.8-8.6',2)

INSERT INTO [AfricanCichlids] ([SpeciesName],[CommonName],[OriginLake],[CichlidType],[Diet],[Temperament],[pH],[Difficulty]) VALUES ('Copadichromis azureus','Haplochromis chrysonotus','Malawi','Haplochromines','Carnivore','Mildly Aggressive','7.8-8.6',2)

INSERT INTO [AfricanCichlids] ([SpeciesName],[CommonName],[OriginLake],[CichlidType],[Diet],[Temperament],[pH],[Difficulty]) VALUES ('Placidochromis','Electra Blue','Malawi','Haplochromines','Carnivore','Peaceful','7.8-8.6',2) INSERT INTO [AfricanCichlids] ([SpeciesName],[CommonName],[OriginLake],[CichlidType],[Diet],[Temperament],[pH],[Difficulty]) VALUES ('Pseudotropheus','Acei','Malawi','Mbuna','Herbivore','Mildly Aggressive','7.8-8.6',1) INSERT INTO [AfricanCichlids] ([SpeciesName],[CommonName],[OriginLake],[CichlidType],[Diet],[Temperament],[pH],[Difficulty]) VALUES ('Labidochromis caeruleus','Yellow Lab','Malawi','Mbuna','Omnivore','Peaceful','7.8-8.6',1)

INSERT INTO [AfricanCichlids]

([SpeciesName],[CommonName],[OriginLake],[CichlidType],[Diet],[Temperament],[pH],[Difficulty]) VALUES ('Labeotropheus trewavasae','Likoma','Malawi','Mbuna','Herbivore','Aggressive','7.8-8.6',1) INSERT INTO [AfricanCichlids] ([SpeciesName],[CommonName],[OriginLake],[CichlidType],[Diet],[Temperament],[pH],[Difficulty]) VALUES ('Nimbochromis venustus','Giraffe Cichlid','Malawi','Haplochromines','Carnivore','Aggressive','7.8-8.6',2) INSERT INTO [AfricanCichlids] ([SpeciesName],[CommonName],[OriginLake],[CichlidType],[Diet],[Temperament],[pH],[Difficulty]) VALUES ('Cyphotilapia frontosa','7-Stripe Fontosa','Tanganyika','Frontosa','Carnivore','Mildly Aggressive','8.6',2)

3. Verify the data was created by selecting the table dbo.AfricanCichlids in the left-navigation, select it and then click the Data button in the top navigation. The main window will refresh to display the data from the database table.

Figure 18Viewing sample data

Summary

SQL Azure allows developers to create a hosted and scalabe database that can be asscess via HTTP or HTTPS from any application. Developers can configure the firewall settings for the database so only Windows Azure hosted applications can access the application or how other applications residing outside of Windows Azure can access the SQL Azure database. This lab demonstrated how to create a SQL Azure database as well as populate with a schema and some sample data.

Section 2: Create Windows Azure Web Role that Works with a SQL Azure Database

Overview

In this lab you will create a Windows Azure Web Role that will display information residing in a SQL Azure database. This application will eventually be surfaced in SharePoint using a SharePoint 2010 sandboxed Web Part.

Objectives


Learn to create a Windows Azure Web Role.

Learn to create a page the displays a list of all items in the database.

Learn to create a detail page that display all the properties of the item in the database.

System Requirements


Windows Azure SDK and Windows Azure Tools for Microsoft Visual Studio 2010.

Access to a Windows Azure account.

Access to the SQL Azure database created in the previous lab.

http://www.microsoft.com/windowsazure/

http://www.microsoft.com/downloads/en/details.aspx?familyid=7a1089b6-4050-4307-86c4-9dadaa5ed018

Exercises


1. Create the Windows Azure Web Role.

2. Create page displaying list of all items in the SQL Azure database.

3. Create page displaying details of a selected item.


Exercise 1: Create the Web Role

In this exercise, you will create a Web Role project and configure it to access the SQL Azure database created in a previous lab.

Task 1 – Creating The New Windows Azure Web Role Project

In this task, you will create the new Windows Azure web role project.

1. Start Visual Studio 2010.

2. Select File >> New >> Project.

3. Select the template Visual C# >> Cloud >> Windows Azure Project and give it a name of AzureWebRole.

a. In the New Windows Azure Project dialog that appears, select ASP.NET Web Role, click the > arrow and then click the OK button.

Figure 19Viewing sample data

Exercise 2: Create Master Data List Page

In this exercise, you will create a page that will display the content of the database on a simple page using a GridView control.

Task 1 – Adding a GridView Control and DataSource to Display Contents of the SQL Azure Database

In this task, you will create the master detail page that will display all data from the SQL Azure database.

1. Open the AzureWebRole project in Visual Studio 2010.

2. Right-click the Default.aspx page in the WebRole1 project in the Solution Explorer and select View Designer.

3. Using the Toolbox tool window in Visual Studio 2010, drag a GridView control onto the page:

Figure 20Adding a GridView to the page

4. In the GridView Tasks helper, select <New data source…> in the Choose Data Source selector:

Figure 21GridView Tasks Helper

5. Select the Database option and click OK.

6. Create a new database connection.

a. Click the New Connection button.

b. Select Microsoft SQL Server as the Data Source and click Continue.

Figure 22Choose Data Source Dialog

c. Fill out the server name, login and select the database in the Add Connection dialog. The server name is the name of the SQL Azure Database Server created in a previous step followed by .database.windows.net. You should have all this information from the previous lab.

d. Click Next.

e. When prompted to save the connection string in an application configuration file, check the option and click Next.

f. On the Configure the Select Statement dialog click Next.

g. On the Test Query page, click Finish.

Task 2 – Updating the GridView Control Columns

In this task, you will modify the GridView to not display all details on each record in the database.

1. In the GridView Tasks helper, select Edit Columns….

Figure 23GridView Tasks Helper

2. In the Selected fields: section of the Fields dialog, remove all fields except CommonName.

3. Select the field CommonName in the Selected Fields: section of the Fields dialog and change the HeaderText to Common Name.

4. Create a template hyperlink field:

a. In the Available fields: section, select a HyperLinkField and the Add button below the section in the Fields dialog.

b. Set the field’s HeaderText to Species Name.

c. Set the field’s DataNaviateUrlFields to ID.

d. Set the field’s DataNavigateUrlFormatString to Detail.aspx?id={0}.

e. Set the field’s DataTextField to SpeciesName.

f. Set the field’s DataTextFormatString to {0}.

5. Resort the Selected fields: by moving Species Name to the first one in the list.

Figure 24Modifying GridView Columns

6. Click OK.

7. Using the GridView Tasks helper, select AutoFormat and pick the Classic scheme.

8. Save all changes.

Exercise 3: Create Item Detail Page

In this exercise, you will create a new ASP.NET page that will be used to display the details of a selected item.

Task 1 – Creating the Details ASP.NET Page

In this task, you will create the page that will display the details of the item selected.


2. Add a new ASPX page to the web role project:

a. From the Solution Explorer tool window, right-click the WebRole1 project and select Add >> New Item.

b. Select the Web Form template from the Visual C# >> Web category.

c. Give the file a name of Detail.aspx.

d. Click Add.

Task 2 – Adding a Data Source to the Detail Page

In this task, you will copy and modify the datasource used on the master list page.

1. Go back to the Default.aspx page in the WebRole1 project and open it in source mode by right-clicking it in the Solution Explorer tool window and select View Markup.

2. Copy the entire server control for the data source that starts with <asp:SqlDataSource.

3. Go back to the markup view of the Detail.aspx page.

4. Paste the data source server control from the Default.aspx page to just before the closing </div> tag.

Task 3 – Updating the Detail Page’s Data Source to Show the Selected Item

In this task, you will configure the data source to show the selected item.

1. Open the Detail.aspx page in the Design mode.

2. Select the SqlDataSource on the design surface and from the SqlDataSource Tasks helper, select Configure Data Source….

3. On the Choose Your Data Connection dialog, select the connection string SpAzureKitDbConnectionString and click Next.

4. On the Configure Select Statement dialog do the following:

a. Check all the fields except the * and ID field.

Figure 25Modifying the data source select statement

b. Click the WHERE… button to apply a filter.

c. Use the following to modify the Add WHERE Clause dialog:

i. Column: ID

ii. Operator: =

iii. Source: QueryString

iv. QueryString field: ID

v. Default value: <blank>

d. Click Add and then OK.

5. Click Next and Finish to close the Configure Data Source dialog.

Task 4 – Adding a Details View Control to View the Details of the Selected Item

In this task, you will add a details view control to the detail page to see the details of the item selected.

1. Open the Detail.aspx page in the Design mode.

2. From the Toolbox tool window, select a DetailsView control and drag it onto the design surface.

3. Using the DetailsView Tasks helper, set the Data Source to SqlDataSource1.

Figure 26Adding a details view to the page

4. Using the DetailsView Tasks helper, select AutoFormat and pick the Classic scheme.

5. Save all changes.

Exercise 4: Deploy Web Role to Windows Azure

In this exercise, you will package the Azure Web Role project into a deployment package, deploy it and ensure that it is working correctly.

Task 1 – Creating a Windows Azure Deployment Package

In this task, you will create a Windows Azure deployment package.


2. In the Solution Explorer, right click the AzureWebRole project and select Publish from the context menu.

3. Select Create Service Package Only and click OK.

Task 2 – Depoloying the Windows Azure Web Role to Windows Azure

In this task, you will deploy the package created in the previous task to Windows Azure.




2. Create a new hosted service:


a. Connect to the Hosted Services, Storage Accounts & CDN by selecting that option in the lower-left navigation.

b. Click the New Hosted Service button in the top navigation.

c. Set the name for your service to be SP+Azure Hosted Model.

d. Set the prefix for the service to be spazurehostedmodel.

Note: You may need to pick a different prefix as the name you enter may conflict with other Windows Azure customers. Whatever you use here, make sure you write it down.

e. Set the region to be Anywhere US.

f. For the Deployment options section, do the following:

Select Deploy to production environment.

Set the Deployment name to spazurehostedmodel1.

For the Package location, browse locally and upload the AzureWebRole.cspkg file generated in the previous task.

For the Configuration file, browse locally and upload the ServiceConfiguration.cscfg file generated in the previous task.

g. Click OK in the Create New Hosted Service dialog.

3. When you see the warning dialog telling you that only one instance is defined, override the warning and submit the package.

Figure 27Override the Warning

4. Windows Azure will take a few minutes to provision, create and start the new hosted service.

5. Once this is complete, locate the DNS Name for the service and click the link. It should open the Default.aspx page in the browser for you to test the application.

Figure 28Override the Warning

Summary

Windows Azure Web Roles allow developers to create complete web sites hosted in Windows Azure.These sites work like any other ASP.NET site and can connect to remote databases hosted in SQL Azure. This lab has shown how to easily creae a Web Role that displays the contents from a hosted SQL Azure database.

Section 3: Create Sandboxed Web Part to Surface Azure Web Role

Overview

SharePoint 2010 introduced a new way to deploy custom code solutions to SharePoint in a protected way: sandbox solutions. These solutions are limited in scope to what they can do and what they can access as a trade-off to a mode secure and stable SharePoint server. These tradeoffs can sometimes limit businesses from solving certain business requirements. One way to address this is to create an application that runs external to SharePoint, such as in Windows Azure (like the one created in the

previous labs). The application can then be surfaced in SharePoint 2010 using a sandbox solution Web Part that displays an IFrame.

Objectives


Learn to create a sandbox solution.

Learn to create a server control Web Part with public properties that displays the homepage of the Web Role project you created earlier.

System Requirements


Deployed solution to Windows Azure you created previously.

SharePoint 2010 installed & configured.

Visual Studio 2010 SharePoint Development Tools

Exercises


1. Create Sandboxed Web Part

2. Add Public Properties to Sandboxed Web Part

3. Deploy & Test Sandboxed Web Part


Exercise 1: Create Sandboxed Web Part

In this exercise, you will create a sandbox solution that contains a new Web Part that renders an IFrame which will display the contents of the site..

Task 1 – Creating The New Workflow Project

In this task, you will create the new empty SharePoint 2010 project.

1. Start Visual Studio 2010.

2. Select File >> New >> Project.

http://sharepointdevtools.codeplex.com/

3. Select the template Empty SharePoint Project from the Visual C# >> SharePoint >> 2010 category.

a. Set the name of the project to be SPAzureHostedModel.

b. Click OK to create the project

4. When the SharePoint Customization Wizard appears:

a. Enter the URL of a local SharePoint 2010 site to test the project against.

b. Select Deploy as a Sandboxed Solution.

c. Click Finish.

Task 2 – Creating a Web Part SharePoint Project Item

In this task, you will create a Web Part SharePoint Project Item that will serve as the host for the Windows Azure Web Role.

1. Add a new Web Part SharePoint Project Item (SPI) to the project:

a. Right-click the SPAzureHostedModel project in the Solution Explroer and select Add >> New Item.

b. Select the template Web Part from the Visual C# >> SharePoint >> 2010 category.

c. Give the new SPI a name of AzureWebRoleHostWebPart.

d. Click Add.

2. Update the Web Part to create an IFrame on the page:

a. Open the Web Part code file AzureWebRoleHostWebPart.cs.

b. Add the using statement to the top of the code file:

C#

using System.Web.UI.HtmlControls;

c. Add the following code to the class to render an IFrame to the page:

C#

protected override void CreateChildControls() {

HtmlGenericControl iFrame = new HtmlGenericControl("iframe"); iFrame.Attributes.Add("width", "360"); iFrame.Attributes.Add("height", "300"); iFrame.Attributes.Add("frameborder", "0"); iFrame.Attributes.Add("src", "http://www.bing.com");

this.Controls.Add(iFrame);

}

3. Save your changes and press F5 to test the project.

4. When the browser loads ensure that you are on a Web Part Page and not on a wiki page in the Site Pages library by going to the default.aspx page in the root of the site you are testing. For instance, go to http://intranet.wingtip.com/default.aspx.

5. Add the Web Part to the page:

a. From the Page tab in the robbon select the Edit Page button to put the page in edit mode.

Figure 29Empty Team Site Web Part Page

b. In the Left Web Part Zone, click the box Add a Web Part.

c. Under the Categories section select Custom.

d. Select the Web Part AzureWebRoleHostWebPart.

e. Click Add.

http://intranet.wingtip.com/default.aspx

Figure 30Web Part Added to the Page

6. In the Page tab in the ribbon click the Stop Editing button.

7. Close the browser.

Exercise 2: Add Public Properties to Sandboxed Web Part

In this exercise, you will update the sandboxed Web Part created in the previous exercise to have configurable public properties that will allow users with appropriate rights to specify the URL of the hosted Windows Azure application.

Task 1 – Adding a Configurable Windows Azure URL Destiation to the Web Part

In this task, you will add a new public property that will allow users to specify the URL of the Windows Azure application.

1. Open the SPAzureHostedModel project in Visual Studio 2010.

2. Open the AzureWebRoleHostWebPart.cs code file.

3. Add the following public property to the AzureWebRoleHostWebPart Web Part that allows users to specify the URL of the Windows Azure application:

C#

[WebBrowsable(true), WebDisplayName("Windows Azure App Url"), WebDescription("Full URL of the Windows Azure application to display in the Web Part."), Personalizable(PersonalizationScope.Shared)]public string AzureAppUrl { get; set; }

4. Update the CreateChildControls() method to use the value of the new property as the source for the IFrame control:

C#

protected override void CreateChildControls() {

string targetUrl = string.IsNullOrEmpty(AzureAppUrl) ? string.Empty : AzureAppUrl;

HtmlGenericControl iFrame = new HtmlGenericControl("iframe"); iFrame.Attributes.Add("width", "360"); iFrame.Attributes.Add("height", "300"); iFrame.Attributes.Add("frameborder", "0"); iFrame.Attributes.Add("src", targetUrl);

this.Controls.Add(iFrame);}

5. Save all changes

Exercise 3: Deploy and Test Sandboxed Web Part

In this exercise, you will deploy and test the final sandboxed Web Part.

Task 1 – Deploying the Sandboxed Web Part

In this task, you will deploy the Sandboxed Web Part.

1. Open the SPAzureHostedModel project in Visual Studio 2010.

2. Press F5 to build and deploy the project.

3. Browse to the testing site’s default Web Part Page (not a page in the wiki Site Pages library).

4. Using the Page tab in the ribbon, select the Edit Page button.

5. In the Left Web Part Zone, click the box Add a Web Part.

6. Under the Categories section select Custom.

7. Select the Web Part AzureWebRoleHostWebPart.

8. Click Add.

Task 2 – Configuring the Web Part to Load the Azure Web Role

In this task, you will configure the Web Part to load the Azure Web Role project.

1. Select the Web Part’s Verbs menu and select the option Edit Web Part from the context menu.

Figure 31Sandboxed Web Part Verbs Menu

2. In the Miscellaneous section of the Edit Part pane, enter the URL of the Windows Azure Web Role you created in the previous lab.

Figure 32Sandboxed Web Part Edit Part Pane

3. Click OK.

4. Notice how the Windows Azure Web Role application loads on the page but to the end user, they can not tell that this application is not running within SharePoint.

Figure 33Running Windows Azure Web Role Application in SharePoint 2010

Summary

Using a sandbox solution in SharePoint 2010, developers can deploy custom code solutions to SharePoint site collections without involving the server or farm administrators. However this capability comes with tradeoffs in that developers do not have the ability to do everything they could normally do with farm solutions. Such things include communicating with Web services or databases. One technique to still deploy using the sandbox solution model but to break free from it’s limitations is to create a sandboxed Web Part that renders an IFrame control that displays an application running in Windows Azure.

Documents

SharePoint 2010 and Azure: Azure Hosted …az12722.vo.msecnd.net/.../labs/spcloudapp1-0/Lab.docx · Web viewIn this lab you will learn how to create a SQL Azure database as well as