Introducing MVC support for apps for SharePoint

Apps are essentially web applications. If you know how to build a web application, you know how to build an app for SharePoint. Prior to Visual Studio 2013 Preview, you were able to create apps for SharePoint with an ASP.NET Web Forms project application. Now, in Visual Studio 2013 Preview, you can choose between ASP.NET Web Forms and ASP.NET MVC for your project application.

ASP.NET MVC gives you a powerful, pattern-based way to build dynamic websites that lets you separate different aspects (model, view and controllers) of your app and gives you full control over markup for enjoyable, agile development. Before Visual Studio 2013 Preview, to build an app for SharePoint with an MVC web application as a remote project, you had to first create the MVC web application project and then “app-etize” the MVC web project to add an app for SharePoint.

When you create an autohosted or provider-hosted app for SharePoint in Visual Studio 2013 Preview, you can now choose the type for your web application project (note the choice in the second step, shown in Figure 2).

Figure 1. Specify the app for SharePoint settingsFigure 1. Specify the app for SharePoint settings

Figure 2. Specify the web project typeFigure 2. Specify the web project type

When you click Finish, Visual Studio does the following:

  1. Creates the app for SharePoint project
  2. Creates the MVC web application project
  3. Adds SharePoint references to the MVC web application project
  4. Adds SharePoint helper classes to the MVC web application project

Figure 3 shows the default solution that was just created with an app for SharePoint and MVC 4 as the remote web application project.

Figure 3. Default solution
Figure 3. Default solution

You now have a working app for SharePoint with an MVC web application!

Press F5 to debug your app. Visual Studio deploys your app for SharePoint to the specified developer site, starts Internet Information Services (IIS) Express, and runs your MVC web application. Visual Studio then opens a browser to the app’s home page (Figure 4), which in our case is the MVC web application.

Figure 4. App for SharePoint default MVC 4 templateFigure 4. App for SharePoint default MVC 4 template

This is the default template created out of the box. This template gives you Home, About, and Contact pages along with some sample code showing you how to interact with SharePoint. The sample code (Figure 5) creates a client context for the host web and retrieves the current user name. This user name is displayed in the home page (Figure 4).

You can find this sample code in Controllers\HomeController.cs and Controller\HomeController.vb for C# and Visual Basic projects respectively .

Figure 5. Sample codeFigure 5. Sample code

The MVC web application project also provides a set of APIs, defined in the Filters\SharePointContextFilterAttribute.cs and Filters\SharePointContextFilterAttribute.vb, and SharePointContext.cs and SharePointContext.vb files for C# and Visual Basic projects respectively. These APIs wrap a series of steps for the web project to seamlessly communicate to SharePoint in a single call, so that the logic you need to implement is much simpler.

  • The SharePoint Context Filter attribute performs additional processing to get the standard information when redirected from SharePoint to your remote web application, such as Host Web Url.
    It also determines whether the app needs to be redirected to SharePoint for the user to sign in (in case of bookmarks).
    You can apply this filter either to the controller or to a view.
  • SharePoint Context classes encapsulate all the information from SharePoint so that you can easily create specific contexts for the app web and host web right away and communicate with SharePoint.

The sample code (Figure 5) in the project demonstrates how you can use those APIs.

Download Visual Studio 2013 Preview today and start building your app for SharePoint!

Feel free to leave a comment if you have any feedback.

Chakkaradeep Chandran

Program Manager, Office Developer Tools