in SharePoint 2013, VS2013

Building apps for SharePoint with MVC – Part 1

One of the cool features app for SharePoint developers get in Visual Studio 2013 is the ability to create MVC web application projects as the remote web application for provider-hosted and autohosted apps.

Visual Studio 2013 adds a ton of features to web development stack that includes new web project experience, MVC 5, etc. You get all these goodness in apps for SharePoint too, as creating an app with MVC will automatically create a MVC 5 web application that includes all the great new features!

So, lets build a simple app with MVC!

Default MVC Template

If you are not familiar with the MVC template generated out of the box, I would highly recommend reading Introducing MVC Support for apps for SharePoint.

Fire up Visual Studio 2013 and create a new provider-hosted app for SharePoint project with MVC as the remote web application project authenticating with Windows Azure Access Control service.

image

image

The default out of the box MVC project has all the required SharePoint assemblies, references and sample code for you to get started.

Debug the app and you will have a nice looking home page with some useful links for app for SharePoint development.

image

Sample Code

The sample code available in Home Controller default view gets the current user name from SharePoint:

[SharePointContextFilter]
public ActionResult Index()
{
User spUser = null;

var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);

using (var clientContext = spContext.CreateUserClientContextForSPHost())
{
if (clientContext != null)
{
spUser = clientContext.Web.CurrentUser;

clientContext.Load(spUser, user => user.Title);

clientContext.ExecuteQuery();

ViewBag.UserName = spUser.Title;
}
}

return View();
}

The key thing to note here are the two helper classes:

  • 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 Provider 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.

Add a Products list

For this sample, let us add a simple list and query list items.

Let us now add a custom list called Products to our app for SharePoint project with the following columns.

image

To make it easy, I usually add default items to the list in the list instance elements file which will add the items you define when the list is created:

image

SharePointService – Get User Name

Back in the MVC project, let us add a class SharePointService to abstract the SharePoint calls and copy the sample code to get the user name into the following method:

public static class SharePointService
{
public static string GetUserName(SharePointContext spContext)
{
string strUserName = null;

User spUser = null;

using (var clientContext = spContext.CreateUserClientContextForSPHost())
{
if (clientContext != null)
{
spUser = clientContext.Web.CurrentUser;

clientContext.Load(spUser, user => user.Title);

clientContext.ExecuteQuery();

strUserName = spUser.Title;
}
}

return strUserName;
}
}

MVC Model – Products

To interact with products, let us create a Product model under the Models folder:

image

public class Product
{
public string Title { get; set; }

public string Description { get; set; }

public string Price { get; set; }
}

SharePointService – Get Products

Now that we have the model ready, let us add the method to get all the products in our SharePointService class:

public static List<Product> GetProducts(SharePointContext spContext, CamlQuery camlQuery)
{
List<Product> products = new List<Product>();

using (var clientContext = spContext.CreateUserClientContextForSPAppWeb())
{
if (clientContext != null)
{
List lstProducts = clientContext.Web.Lists.GetByTitle("Products");

ListItemCollection lstProductItems = lstProducts.GetItems(camlQuery);

clientContext.Load(lstProductItems);

clientContext.ExecuteQuery();

if (lstProductItems != null)
{
foreach (var lstProductItem in lstProductItems)
{
products.Add(
new Product
{
Title = lstProductItem["Title"].ToString(),
Description = lstProductItem["ProductDescription"].ToString(),
Price = lstProductItem["Price"].ToString()
});
}
}
}
}

return products;
}

The code is nothing different than any CSOM code. The method accepts the context and a CAML query object and executes the query on the Products list to get the required items

Home Controller – Index View Code

Now that we have the required code to talk back to SharePoint, we can modify the default view code to call the same:

[SharePointContextFilter]
public ActionResult Index()
{
var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);

ViewBag.Username = SharePointService.GetUserName(spContext);

CamlQuery queryProducts = new CamlQuery();
queryProducts.ViewXml = @"<View><ViewFields><FieldRef Name='Title'/>
<FieldRef Name='ProductDescription'/>
<FieldRef Name='Price'/></ViewFields></View>"
;

List<Product> products = SharePointService.GetProducts(spContext, queryProducts);

return View(products);
}

As you can see, we return the list of all products back to the view

HomeIndex View

The only thing left to modify now is the view code.

Navigate to the HomeIndex view and replace <div class=”row”> section with the following code:

<div class="row">

<div class="col-lg-12">
<div class="span8">

<p class="lead"><u>Product List</u></p>

<table class="table table-striped">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
@foreach (SharePointAppSampleWeb.Models.Product objProduct in Model)
{
<tr>
<td>@objProduct.Title</td>
<td>@objProduct.Description</td>
<td>@objProduct.Price</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>

Cool thing to note here is that MVC 5 uses Bootstrap out of the box.

If you not familiar with bootstrap, I would highly recommend you to get familiar as it is the best CSS/JS library you will ever learn to quickly build what you want!

In the code above, we build a simple table by enumerating the products object. The table itself uses bootstrap CSS styles to render the table.

Debug App

So, lets debug the app to see how it looks!

image

Woah! Thats a nice looking table! Bootstrap rocks!

And if you haven’t noticed, you app is also responsive.You get it for free with Bootstrap!

image 

You can download the sample below: 

Write a Comment

Comment

Time limit is exhausted. Please reload the CAPTCHA.

  1. 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?

  2. Nice article. I have sharepoit list on my sharepoint how to pull the data from my sharepoint list using MVC 4? Apps Mvc only front end and the data from my site sharepoint,thanks

Webmentions

  • Not SharePoint but cool anyway MVC5 EF6 and Azure « Fabian Williams SharePoint Blog August 11, 2015

    […] This is really cool, i know I usually talk about SharePoint but this is equally important and you will also see a new MVC Template in SharePoint for Visual Studio 2013 in Cloud Apps, make sure you give that a try. Chaks has a good post out on it here. […]

  • Building apps for SharePoint with MVC – Part 2 | Chaks' Corner August 11, 2015

    […] my previous post we built a provider-hosted app with MVC to display items from a Product list. We also used […]