ASP.NET MVC based Apps for SharePoint 2013 (on-premises)
Recently I was asked the following question: "Can we use ASP.NET MVC 4 for an App for SharePoint?" My answer was "Yes, you can." This blog post will walk you through creating and deploying on-premises provider-hosted app for SharePoint. We will utilize the server-to-server (S2S) protocol to create a high-trust app. Typically apps that use the server-to-server protocol run behind a firewall.
Please read the following How to: Create high-trust apps for SharePoint 2013 using the server-to-server protocol (advanced topic). This how to will walk you through the steps of configuring your IIS and SharePoint 2013 servers for S2S High Trust. Once you have completed the steps listed in the article, come back here and follow the steps below.
[Note]: In the instructions that configures your machine for server-to-server protocol, you create a Guid to be used for the Issuer ID. Copy that value and keep it handy. You will need it in later on in the exercise. As a practice that I use, I copy the output from PowerShell after the command "New-SPTrustedSecurityTokenIssuer" so that I can reference it if I need to.
Prerequisites
- Visual Studio 2012
- Microsoft Office Developer Tools for Visual Studio 2012 – Preview 2
- SharePoint 2013 Server
Create the SharePoint App
In Visual Studio 2012, choose File, New, Project.
In the New Project wizard, expand the Visual C# node, and then expand the Office/SharePoint node.
Choose Apps, and then choose to create an App for SharePoint 2013 project.
Name the project HighTrustSampleApp.
Save the project in a location you choose, and then choose OK.
Select the Provider-hosted hosting option, and then choose the Next button.
Under How do you want your app to authenticate? , choose Use a certificate.
Click the Browse button next to the Certificate location box and navigate to the location of the self-signed certificate (.pfx file) that you created. Type the password for this certificate in the Password box. Type the issuer ID in the Issuer ID box.
In the wizard, choose Finish. Much of the configuration is done when the solution opens. Two projects are created in the Visual Studio 2012 solution, one for the app for SharePoint and the other for the ASP.NET web application.
ASP.NET Forms project type is the default web project that is created when building an App for SharePoint 2013 using Provider-hosted option. This is not what we want. So, we need to create an ASP.NET MVC 4 project in the solution.
Right click on the solution in Solution Explorer.
Select New Project from the context menu.
In the Visual C# node, select the Web node.
Choose ASP.NET MVC 4 Web Application project type.
Name the project SPAppMvcWeb.
Save the project in a location you choose, typically in the same location as you previously saved the projects that were created in the above steps, and then choose OK.
Choose Basic in the Select a template section of the New ASP.NET MVC 4 Project dialog.
Click the OK button.
Once the project pulls down all the NuGet packages that the template needs, you should have three projects in your solution. Now we need to tell the SharePoint App to use the ASP.NET MVC project instead of the ASP.NET Web Application project.
Click the SharePoint App project in Solution Explorer.
Find the property Web Project in the Properties window. If the properties window is not open, use Ctrl+W,P to bring it up.
Click on the dropdown to select the different web application projects in the solution.
Select the MVC project that you just created.
Visual Studio will now prompt you, asking if you want Microsoft to help setup and configure the new Web Application to support the App for SharePoint. Click on the OK button in the dialog. Visual Studio will add all the necessary references to your project and include the TokenHelper.cs class. Also, the web.config file is modified to include entries for the Client ID and Client Secret. We will come back to this later. For now, just know that your web.config was modified for you.
So now we need to create some MVC artifacts so that we can use our application.
Right click on the Controllers folder in the MVC project and add a new controller.
Name the controller HomeController and for the Template, choose Empty MVC controller. Click the Add button.
Add the following code to the controller.
Within the Views folder, create a new sub folder called Home.
Right click on the folder and choose to Add, View.
Give the view a name of Index.
If the Use a layout of master page is not selected, select the option.
Add the following code to the view.
We need to set the start page of our application to this view. To do this you have to switch to the code view of AppManifest.xml in the SharePoint App in Solution Explorer.
Find the <StartPage> xml tag and replace the contents with ~remoteAppUrl/Home?{StandardTokens}.
Remember what I said earlier about the web.config modifications. Well it is time to talk about those. If you would have looked at the ASP.NET Web Forms project's web.config, you would have seen a few extra <appSettings> tags. The ClientId will be filled in by Visual Studio when you run the application for the first time. So you do not need to worry about that app setting. You will need the ClientSigningCertificatePath, ClientSigningCertificatePassword, and the IssuerId. Here is a screenshot of what I have on my machine. It will be slightly different on your machine.
Now we can deploy and verify our app starts as expected. To do so, just press F5. SharePoint will prompt you to trust the app.
Click the Trust it button. Congratulations! You have just created your first ASP.NET MVC 4.0 Web Application based SharePoint App. When everything works as expected, you can delete the ASP.NET Forms project from the solution. You will no longer need that project.
Add SharePoint Look and Feel to the App
We are now going to add the SharePoint Chrome to our MVC application.
Under Views, Shared – modify the _layouts.cshtml as follows:
When you are finished, press F5. Your app should look similar to this.