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
- 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)
- System.IdentityModel
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.
- Microsoft.SharePoint.Client
- Microsoft.SharePoint.ClientRuntime
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.
Cheers,
Christian
14 comments:
This was very helpful! Thanks!
Thanks a lot for that fantastically amazing post!
Sharepoint Development | Sharepoint Developers
Good job! Thank you very much!
It's being great here to read your blogs on different topics of asp.net, on each post there is something new and interesting to gain which in turn is going to prove helpful to me.
We were felling that it would be difficult to create an ASP.NET MVC based SharePoint app. By using your mentioned steps it is very to create now.
Great post!
For those who has issues with the Lambda code, try to reference the Microsoft.SharePoint.Client Assembly! ;-)
using Microsoft.SharePoint.Client;
I feel like this should be really easy, but when I try to link to another view I either get a 404 or an error claiming my token is null. Have you figured out how to navigate between views in a MVC App?
When I create additional views and attempt to link to them I receive a 404. When I debugged this I discoverd the SPAppToken is Null. Have you been able to link to views within your app, have you tried?
This code is designed just for calls do the default action for the controller (Index). Requests to other actions on the controller will not run this code and therefore not give you a token for that request.
You could override the BeginExecute method of the controller and add the code there, this means it will get called for every action (i think, need to check on my dev machine).
Christian,
Do you know if you get the same problems that CHRIS O'BRIEN mentions in his article with the SPHostUrl querystring being changed to SPAppWebUrl
Thanks a lot!
I have exactly the same issue as Tyler.
I can't get my other views to work. SPAppToken is always null...
Any ideas on how to get this fixed??
This example is perfect!! But the only thing that is missing is to have another view working in the same controller.
Very nice mate
whit the Microsoft SharePoint Developer Tools for Visual Studio 2012 - Preview - ENU 2012, seem that you don't need this steps anymore
I too had a problem with SPAppToken always being null on my other Views.
This was because some of the necessary tokens, (which TokenHelper needs) are stored in the QueryString of the Request Url, and also in the Forms object.
I rather doubt it's a secure solution but it was possible to pass these tokens to different pages by storing them as Cookies from my default SP App Page, e.g.
Index(){
...
Response.Cookies.Add(new HttpCookie("SPAppToken", contextTokenString));
Response.Cookies.Add(new HttpCookie("SPHostUrl", hostWeb));
...
In your other views then rather than retrieving those properties from your Url or the Request.Form object retrieve them from Cookies.
Thanks a lot for this article, though I had to change a few things that have chanded since it was written, it allowed me to have an MVC remote web !!
You're awesome !
Post a Comment