Integrating InfoPath 2010 Forms in Web Sites Using Visual Studio 2010

Article
07/24/2014

Summary: Learn how to create web pages in Visual Studio 2010 that include links that open Microsoft InfoPath 2010 forms. Add query parameters to the URL to control how the form behaves, and create a custom page that displays InfoPath forms and ASP.NET controls together.

Applies to: InfoPath 2010 | Office 2010 | SharePoint Server 2010 | Visual Studio | Visual Studio Tools for Microsoft Office

In this article
Lab Objectives
Lab Setup and Requirements
Scenario
Exercises
Conclusion
Additional Resources

Contents

Lab Objectives
Lab Setup and Requirements
Scenario
Exercises
Conclusion
Additional Resources

Download code

Lab Objectives

After completing this lab, you will know how to:

Design a web page that contains links that open a InfoPath 2010 form in a web browser.
Use query parameters on the URL specified in the link to determine the page that the browser will go to after the user submits the form.
Create an .aspx page that contains an InfoPath XmlFormView control as well as other ASP.NET controls.
Use code to switch forms in the XmlFormView control based on a selection in a drop-down list.

Lab Setup and Requirements

To complete this lab, you must have the following:

InfoPath 2010 installed on a SharePoint Server 2010 server running InfoPath Forms Services
Microsoft Visual Studio 2010
The files survey.xsn, AddressUS.xsn, and AddressEurope.xsn, included in the download associated with this training lab.

Scenario

Contoso Corporation has decided to create a survey on its website for customers to provide feedback on Contoso services. Because an external user might not have InfoPath 2010, the IT department decides to design the survey form in InfoPath 2010. The IT department further decides to host the form on a SharePoint Server 2010 server that runs InfoPath Forms Services. These technologies enable the user to complete the form in a browser. Finally, the IT department wants to integrate the form into the web page by using the graphics and style of the existing Contoso website.

As encouragement, the department will provide a gift to any user who finishes the survey. An InfoPath form on the acknowledgement page enables the user to specify their mailing address for the gift.

Exercises

Creating a Web Page

The first step is to create a new webpage that contains a link to open an InfoPath form in InfoPath 2010. Then you configure the link to open the form in the default web browser. The web page must reside on an SharePoint Server 2010 site. Therefore, before you can create the page, you must find the local path of the SharePoint Server site and create a new folder to contain the web page.

To create a new folder under the SharePoint Server website

Start the Internet Information Services (IIS) Manager, under Administrative Tools on the Start menu.
Expand the local computer, and then expand Sites.
Right-click the SharePoint - 80 site, and then click Explore.

This will open the file system location that corresponds to the WSS site, or to your site under the WSS root site, such as: "C:\Inetpub\wwwroot\wss\VirtualDirectories\80."
Start Microsoft Visual Studio 2010.
On the File menu, click Open Web Site.
In the Open Web Site dialog box, click the File System icon, and then navigate to the folder that corresponds to the path found in step 4.
Click Open.
In the Web Site targeting older .Net Framework Found dialog box, click No.
On the Website menu, click Start Options.
Under Server, select the Use custom server option.
Set the Base URL to the URL for your site, for example, http://<ServerName>, and then click OK.
On the View menu, click Solution Explorer.
In Solution Explorer, right-click the icon for the website file location, and then click New Folder.
Type a new name for the folder, such as MyFolder.

After you have created the new folder, you can then create the web page that will contain the survey invitation.

To create the SurveyInvitation web page

In Solution Explorer, right-click your new folder, and then click Add New Item.
In the Visual Studio installed templates list, select the HTML Page template.
In the Name box, type SurveyInvitation.htm, and then click Add.
In the Source view of the page, change the title property of the page, as shown in the following code.
```
<head>
    <title>Survey Invitation</title>
</head>
```

After creating the basic page in Visual Studio, you can create a placeholder survey form, and then link from your web page to the form.

To add a link that will open the survey form in InfoPath

Open the survey.xsn form template in design mode.

To download the template, see the link at the top of this training lab.
Publish the template to the SharePoint Server site to a form library named Survey.

For more information, see "Publish to a SharePoint Library" in Publish a form.
In the Source view of the page, modify the content to add an anchor tag with an href attribute, as shown in the following code.
```
<body>
    <a href="/Survey/Forms/template.xsn">Invitation to complete a survey</a>
</body>
```
Press CTRL+S to save the page.
On the Start menu, open the Command Prompt window as an administrator.
Type iisreset to restart the web server.
After IIS restarts, test that the survey form opens in InfoPath 2010 by doing the following:
1. Right-click the HTML source, or click the SurveyInvitation.htm page in Solution Explorer, and then click View in Browser.
2. Click Invitation to complete a survey:
  - If InfoPath is installed on your computer, InfoPath will open and load the survey.xsn form template from the website. In the File Download dialog box, click Open if prompted.
  - If InfoPath is not installed on your computer, the form will open directly in the browser.
3. Click Submit, after which the form closes.
Note

In this example, the Submit button in the survey form is configured to close the form.

By default, the form that you created will not appear in the web browser of the user. Therefore, you must add in a query parameter to the URL, to force the form to open.

To force the form to open in the default web browser by using query parameters

In the Source view of the page, add a query parameter OpenIn=browser to the URL, for example, <a href="/Survey/Forms/template.xsn?OpenIn=browser">.
Press CTRL+S to save the page.
If open, close Internet Explorer.
Right-click the source, or click SurveyInvitation.htm in Solution Explorer, and then click View in Browser.
Click Invitation to complete a survey.

The browser goes to the following URL and displays the survey form in the browser: http://<yoursite>/_layouts/FormServer.aspx?XsnLocation=~sitecollection/Survey/forms/template.xsn&OpenIn=browser
Click Submit.

The browser returns to the SurveyInvitation.htm page.

Configuring the Redirect after Submission of the Form

Currently, the website sends the user back to the SurveyInvitation.htm page. Instead, you should redirect the user to a new page that thanks them for taking the survey.

To create a new page

In Solution Explorer, right-click MyFolder, and then click Add New Item.
In the Visual Studio installed templates list, select the HTML Page template.
In the Name box, type ThanksForSurvey.htm.
Click Add.

In the Source view of the page, change the title and body of the page as follows:

<head>
    <title>Survey Thanks</title>
</head>
<body>
    Thank you for completing the survey!
</body>

Save the page.

After you create the ThanksForSurvey.htm page, modify the link so the browser goes to the new page when the user submits the form.

To modify the link to visit a ThanksForSurvey.htm page

To return to the Source view of the SurveyInvitation.htm page, right-click SurveyInvitation.htm in Solution Explorer, and then click View Markup.
Add the query parameter Source=~sitecollection/MyFolder/ThanksForSurvey.htm to the URL for opening the survey form, so the anchor link resembles the following.
```
<a href="/Survey/Forms/template.xsn?OpenIn=browser
&Source=~sitecollection/MyFolder/ThanksForSurvey.htm">Invitation to complete a survey.</a>
```
Save the page.
On the Start menu, open the Command Prompt as an administrator.
Type iisreset to restart the web server.
After IIS is restarted, close the Command Prompt window and Internet Explorer.
Right-click the source, or click SurveyInvitation.htm in Solution Explorer, and then select View in Browser.
Click Invitation to complete a survey.

The browser goes to the following URL and displays the survey form in the browser: http:/<yoursite>/_layouts/FormServer.aspx?XsnLocation=~sitecollection/Survey/forms/template.xsn&OpenIn=browser&Source=/MyFolder/ThanksForSurvey.htm
Click Submit.

The browser closes the form and goes to the new ThanksForSurvey.htm page.

Creating a Dynamic Thank You Page

Next, you will create a dynamic Thank You page that contains an XmlFormView control and an ASP.NET control. The ASP.NET control controls which form template is open in the XmlFormView control, which lets visitors from Europe and the United States to enter their addresses.

To create the ThanksForSurvey.aspx page

In Solution Explorer, right-click MyFolder, and then click Add New Item.
In the Add New Item dialog box, click web Form.
In the Name box, type ThanksForSurvey.aspx.
Clear the Place code in separate file check box, and then click Add.
In the Source view of the page, change the title property of the page as follows.
```
<head runat="server">
    <title>Thanks for the survey</title>
</head>
```
In the Properties task pane of the ThanksForSurvey.aspx page, click DOCUMENT, and then set the EnableSessionState property to True.

If you do not see the Properties task pane, click the View menu, and then select Properties Window.

After you have created the web page, you can add the InfoPath form control to the page.

To add the InfoPath Form control to the ThanksForSurvey.aspx page

Ensure that the XmlFormView control is available in the Visual Studio by following these steps:
1. In Visual Studio, right-click a tab of the Toolbox, and then click Choose Items.
2. On the .NET Framework Components tab, select the XmlFormView control check box.
3. If the XmlFormView control is not in the list, browse to the Microsoft.Office.InfoPath.Server.dll assembly, which is typically located at C:\Program Files\Microsoft Office Servers\14.0\Bin.
Note

If you receive an error that Microsoft.SharePoint.ApplicationPages.dll is not found, run 'Gacutil /I Microsoft.SharePoint.ApplicationPages.dll' to register the Microsoft.SharePoint.ApplicationPages.dll. This DLL is typically located at C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\CONFIG\BIN.
Drag the XmlFormView control onto the ASPX page.

Next, you will add code to open a different form that is based on the value selected from the ASP.NET control.

To add code to open a different form

Using InfoPath Designer 2010, open the AddressUS.xsn form template and the AddressEurope.xsn form template. To download the template, see the link at the top of this training lab.
Publish the forms as site content types to the Form Templates library on your site.

Hint: Use the same publishing steps that you used to publish the survey.xsn form template, except in the second step of the Publishing Wizard, click Site Content Type (advanced) instead of Form Library. In the third step of the wizard, select Create a new content type. When prompted to specify a location and file name for the form template, enter the URL in this format: http://<yoursite>/FormServerTemplates/AddressUS.xsn. Repeat these publishing steps for the AddressEurope.xsn form template.
In the Properties pane, set the XsnLocation property of the XmlFormView control to ~sitecollection/FormServerTemplates/AddressUS.xsn.

Note

When you set the XsnLocation and XmlLocation properties of the XmlFormView control, the location must correspond to the same site collection as the page. For the custom page that is created using these steps, the location is the root site collection.
In the toolbar of the Properties pane, click Events.
To create a new OnClose event handler named XmlFormView1_Close, double-click the drop-down list next to the Close event.
To switch back to the Design view, click Design at the bottom of the ThanksForSurvey.aspx source view.
Drag a DropDownList control from the Standard section of the Toolbox onto the ASPX page.
Set the AutoPostBack property of the DropDownList to True.
Add an OnSelectedIndexChanged event handler to the DropDownList by double-clicking the control.

Set the items of the DropDownList by using the Design view or by adding the content to the Source view, as follows.

<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
  <asp:ListItem 
    Value="~sitecollection/FormServerTemplates/addressUS.xsn">
    US
  </asp:ListItem>
  <asp:ListItem
    Value="~sitecollection/FormServerTemplates/addressEurope.xsn">
    Europe
  </asp:ListItem>
</asp:DropDownList>

Add code to the two script functions in the page. This code hides the DropDownList control when the XmlFormView1 control is closed. The code also switches the XsnLocation property of the XmlFormView1 control when the DropDownList control is changed.

Your code should resemble the following example.
```
<script runat="server">
private void XmlFormView1_Close(object sender, EventArgs e)
{
  DropDownList1.Visible = false;
}

protected void DropDownList1_SelectedIndexChanged(object
sender, EventArgs e)
{
  XmlFormView1.XsnLocation = DropDownList1.SelectedValue;
}

</script>
```

Next, you modify the link so the browser will browse to a ThanksForSurvey.aspx page after the user submits a form.

To modify the link

Return to the Source view of the SurveyInvitation.htm page.
Modify the Source query parameter of the href to Source=/Myfolder/ThanksForSurvey.aspx, as follows, replacing MyFolder with your own folder name, if it is necessary.
```
<a href="~sitecollection/Survey/Forms/template.xsn?OpenIn=browser&Source=/MyFolder/ThanksForSurvey.aspx">
```
Press CTRL+S to save the page.

After you have modified the link, you can test your scenario.

To test the full scenario

Close Internet Explorer.
Right-click the source, or click SurveyInvitation.htm in Solution Explorer, and then select View in Browser.
Click Invitation to complete a survey.

The browser will navigate to the following URL and display the survey form in the browser: http://<yoursite>/_layouts/FormServer.aspx?XsnLocation=~sitecollection/Survey/forms/template.xsn&OpenIn=browser
Click Submit.

The browser closes the form and opens the ThanksForSurvey.aspx page.
Click the US value or Europe value in the drop-down list. Corresponding versions of the address form are loaded in the XmlFormView control.
Click Submit to close the form.

Note

If you use F5 in Visual Studio to debug, and you receive a warning message that Web.config is not being set to debug, click OK. The debug flag is automatically switched on in the Web.config file.

Conclusion

In these exercises, you learned how to design a page that contains links that open an InfoPath form in InfoPath Filler or in the browser. You learned how to add query parameters on the URL that is specified in the link to always open in the browser, even when InfoPath is available. You also learned how to move to a selected page after the form is submitted. Finally, you learned how to create a custom ASPX page that hosts the XmlFormView control for loading InfoPath forms and interacting with other controls in the page.

Additional Resources

For more information about how to develop with InfoPath, see the following resources: