It's Spann, not spam

Technical blog to provide content that developers find useful.

ASP.NET MVC based Apps for SharePoint 2013 (on-premises)

ASP.NET MVC based Apps for SharePoint 2013 (on-premises)

Rate This
  • Comments 23

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.

  • Thanks bspann,

    That's very cool - how about the cloud?

    Does this approach support Office 365 SharePoint Online?

    Cheers,

    Jim

  • Hi,

    Please i wish to know if i can replicate this tutorial using Sharepoint foundation 2013.

  • Hi All,

    I create a sample with SharePoint Provider Hosted and it runs ok with ASP web application. However, I gets "SharePoint 2013 - The parameter 'token' cannot be a null or empty string " error when replace by MVC project although I went step by step as this post.

    Can you help me?

    Thanks,

  • @Jim - If you are creating an O365 project, then in Visual Studio you will select Auto-Hosted.  It will create the necessary artifacts for both O365 and Azure.

    @Joshua - I don't see why not.  There is nothing specific in this solution to higher SKU's of SharePoint.

    @Harry - Did you read and setup your machine per the following How to: Create high-trust apps for SharePoint 2013 using the server-to-server protocol (advanced topic) topic?  Did you save the GUID that is created during the process of the S2S setup?

  • Great Help : thankx

  • Very good, thanks.

  • Very good. Thanks.

  • msdn.microsoft.com/.../fp179901.aspx

  • Is it possible to retrive lists from SharePoint 2013 in a asp.net mvc 4 app (which is deployed using provider-hosted model) and replicate all list features  (add new Item, edit ,...) ? and also keep the permissions for the list ?

  • Joshua Oguche,

    This tutorial is not working on Sharepoint Foundation 2013 because on premises apps requires User Profile Service which is not enable in this wersion of SP

    Cheers

  • Brian, thanks for the informative post.

    Could you share your project sample for us?

    I keep hitting a deployment error 'Apps are disabled on this site' once I attempt to deploy the app with mvc site. If i deploy it with the default Winforms Site it all works lovely, but not so with the replacement site.

  • Thanks for your tutorial,

    I already create app with visual studio and  deploy successfully, but after click "Trust it

    i have the next error

    Unknown User: Unable to determine your identity. Please try again by launching the App installed on your site.

    Could you help me? thanks

  • Thanks for this tutorial, however I am not getting to work properly.

    If I create a basic ASP.NET it will work well. However, when adding tthe MVC site it comes back with an error:

    Object reference not set to an instance of an object.

    on the entry added in index.cshtml. Any help on this?

  • Hi All.

    I want to migrate .net application to sharepoint2013.

    Can i use this .

    Please give me some suggestions.

    Thank you,

    Sowjanya.

  • hello.

    My Visual Studio 2013 show the follow error:

    Error occurred in deployment step 'Install app for SharePoint': Apps cannot be added to Site Collections in compatibility mode.

    ideas on how I can solve the problem?

    I am running a website in 2010 in compatibility mode with sharepoint 2013?

Page 1 of 2 (23 items) 12
Leave a Comment
  • Please add 7 and 8 and type the answer here:
  • Post