Building an ASP.NET MVC remote web in a Sharepoint Cloud-hosted App

I know there is already a great article on iLove SharePoint about this, but since it is nearly one year old and because the process as been simplified a lot in the latest updates of Visual Studio 2012, I’ll retake this subject here.

For my article, I’ll use an Autohosted App but the process is nearly the same for a Provider-hosted App.

So let’s start by creating a new App for SharePoint 2013 project, I’m not sure wether the remote web is now supporting .NET Framework 4.5, but if you don’t plan to use .NET Framework 4.5 new features, you’d better select the .NET Framework 4 on the top of the new project window (or try with .NET Framework 4.5 and you’ll see if it works) !

2013-06-07-18_08_46-new-project2

Then you’ll be prompted to specify the name of your App, your SharePoint site, and that is an Autohosted App.

It may take a few seconds to create all that stuff but you should end with something like that (a SharePoint App project and the remote web project).

2013-06-07-18_13_52-gobbeapp-microsoft-visual-studio

Let’s add an ASP.NET MVC 4 Web Application by right clicking on the solution name (highlighted in blue in the screenshot just above), select the Add menu and hit the first entry :New Project…

2013-06-07-18_17_13-add-new-project

You’ll be asked to select a project template, to start with something easy but still clean I’ll select the Basic project template with the Razor View Engine (you may create a test project but it isn’t required).

Once the new ASP.NET MVC 4 Web Application project is created, in the Solution Explorer, click on the SharePoint App (cf. red frame in the screenshot below) and change the associated Web Project in the properties window (if you don’t see the properties window, it is the penultimate entry in the View menu) to select our newly created ASP.NET MVC 4 project.

2013-06-07-18_21_36-gobbeapp-microsoft-visual-studio

Visual Studio will prompt you with a dialog box, just answer yes because it will add all the SharePoint stuff we need to work with SharePoint in our ASP.NET MVC 4 remote web !

2013-06-07-18_21_13-microsoft-visual-studio

Now that the new remote web is selected, you may delete the old remote web project (in my case, GobbeAppWeb).

And it’s done ! You may now start by adding a Controller and a View to the ASP.NET MVC 4 remote web project to print something cool. But don’t forget to double click on theAppManifest.xml to edit the Start Page on your remote web (e.g. if you have a Controllernamed HomeController with an Action method Index(), you may just add /Home/ to the existing Start Page).

2013-06-07-18_35_05-gobbeapp-microsoft-visual-studio

If you need it, here is a basic HomeController sample and the associated Index view.

Final result :

2013-06-07-18_42_52-index

If you plan to have multiple controllers and/or action methods, I strongly advise you to use the small ContextHelper I’ve wrote in a previous post : ContextHelper post. It will help you to use the ClientContext through multiple pages without having to give the Standard Tokens to every link of every action method.

Finally, if you want to have the SharePoint look and feel (also called the SharePoint Chrome Control), just have a look at the second part (“Add SharePoint Look and Feel to the App”) of this article on the iLove SharePoint blog.

If you want to download the Visual Studio project I created (and tested) to write this post, just hit the link below. If you plan to deploy it, don’t forget to change the Web Project property in the properties window of the SharePoint App project to put your SharePoint site in (hit F4 while the SharePoint App project is selected and enter your SharePoint site URL in the Site URL property, like this : https://mysite.sharepoint.com/ ).
https://dl.dropboxusercontent.com/u/7354651/GobbeApp.zip

Working with the ClientContext through multiple pages in a SharePoint cloud-hosted App

When I created my first Autohosted-App in SharePoint 2013, it contained only one page. Then I tried to add multiple pages and it was such a pain to work with the ClientContext through all the pages on my website. That’s because you receive the standard tokens only on the start page of your remote web.

To allow me working with the ClientContext on any page of my website, I created a small Helper that will manage the Client Context for me. Thus I don’t have to give the standard tokens in the Url of any links on my remote web.

First, be sure to have the TokenHelper.cs class in your remote web project, then you might add a new class named ContextHelper.cs

In my case the remote web is an ASP.NET MVC4 website, with this ContextHelper, I’m now able to use the ClientContext in every Action method of any Controller and I don’t have to give the Standard Tokens to every ActionLink (SPHostUrl, …) to be able to get the ClientContext.

Having this will store the context token and the host web in the session if the standard tokens are given in the Url. And when you’ll go to another action without giving the standard tokens in the Url, the context token and the host web will just be recovered from the session.

NB : You’ll have to call at least one time the GetClientContext method from the ContextHelper class in your start page Action, otherwise the standard tokens will not be saved in the session.