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.



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.

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.

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:

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:

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

Home\Index View

The only thing left to modify now is the view code.
Navigate to the Home\Index 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!

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!