When you either create an auto-hosted or a provider hosted app, Visual Studio automatically generates an ASP.NET Forms project for you. Do you really want an ASP.NET Forms project? Many web developers would say no! They would prefer ASP.NET MVC. Anyway each of this two models has his advantages and disadvantages. Discussing this in detail would be out of scope for this post. Personally I think ASP.NET MVC and SharePoint Apps fit together really good. In this post I’m going to show step by step how to create an ASP.NET MVC based SharePoint app.
Create the SharePoint App
Create either an auto-hosted or provider hosted SharePoint 2013 App. For this example I’ve chosen auto-hosted. As development system I use a local Visual Studio with an Office 365 developer site.
Visual Studio will generates the following solution structure for you. Including a SharePoint App project and an ASP.NET Forms Web project.
We prefer ASP.NET MVC. So let’s add an ASP.NET MVC (.NET 4.0) project to the solution. The Azure tenant currently supports only .NET 4.0.
In the SharePoint App property windows choose the ASP.NET MVC project as that associated web project.
One of the most challenging tasks of app development is the authentication. To help you with this Microsoft added a Token Helper class to the auto-generated ASP.NET Forms project. We want use the Token Helper too, so let’s copy the TokenHelper.cs file to our ASP.NET MVC project.
If you want to, you can change the namespace of the TokenHelper.cs to fit the project default namespace.
To be able to build the project you need to add some new references to the ASP.NET MVC project.
- Microsoft.IdentityModel.Extensions (if you don’t find the reference, copy the path from the ASP.NET Forms project and choose browse in reference dialog)
This is be able to build again. But it very likely that you also want to callback to SharePoint, so add the references for the ClientOM.
You have to set the copy local property of all the above references to true.
We also need to enable SSL on our MVC project. If we would forget this, SharePoint would not send a Context Token. OAuth 2.0 requires SSL.
It is also useful to set the MVC project to “Don’t open page…”
Right click Controllers folders in the MVC project and add a new controller.
Add the following code to the controller:
Within the Views folder create a new sub folder called “Home”. Right click the folder and choose and add a new View:
Add the following code to the view:
Set the start page of our app to this view. To do this you have to switch to the code view of AppManifest.xml.
Now you can start the app for the first time. Hit F5, trust and start the app.
You have just created your first ASP.NET MVC based SharePoint App.
Note that during the first run Visual had added a Client Id and a Secret to the web.config of our ASP.NET MVC project.
When everything works as expected you can now delete the old ASP.NET Forms project.
Add SharePoint Look and Feel to the App
We are now going to add the ShareCoint chrome to our MVC site. Under Views->Shared modify _layouts.cshtml as follows:
Don’t panic, you can download the source code here.
Right click the app project and click deploy to deploy the app to Office 365. In the background tha ASP.NET MVC project will automatically provisioned to Windows Azure. The app should now look like this:
Wish you a lot fun with SharePoint Apps & ASP.NET MVC.