Displaying SharePoint list items in MVC web grid of a Provider Hosted App

Krishna KV
Team Leader, Aspire Systems
Published On :   26 Oct 2016
Visit Count
Today :  7    Total :   7902

In this blog post lets see how to bind SharePoint List items to a MVC web grid  in a Provider Hosted App.To create a provided hosted app, we need a client id and secret. Lets start with creating the client id and key.

Open the site



Stored the ID and key to add the information in the visual studio project.



Open the appmanifest.xml in any text editor and update the Id.

     <RemoteWebApplication ClientId="f1593283-77ac-4f62-bef4-0bd793f7d612" />

Update the ID and key in the web.config (web project).

 <add key="ClientId" value="f1593283-77ac-4f62-bef4-xxxxxxx" />
 <add key="ClientSecret" value="slnWBFfe4jUBxl+rkyppCmxxxxxxx=" />

Provide the permission for the app.



 public class Employee
         public string Title { get; set; }
         public string FirstName { get; set; }
         public int Id { get; set; }
         public string LastName { get; set; }
         public string Email { get; set; }


 public ActionResult Index()
             gen.List<Employee> lstEmployees = null;
             var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
             using (var clientContext = spContext.CreateUserClientContextForSPHost())
                 if (clientContext != null)
                     List listEmployee = clientContext.Web.Lists.GetByTitle("Employees");
                     var items = listEmployee.GetItems(new CamlQuery());
                     clientContext.Load(items, item => item.Include(itm => itm.Id, itm => itm["Title"], itm => itm["FirstName"], itm => itm["LastName"], itm => itm["Email"]));
                     lstEmployees = items.Select(item => new Employee() {Id=item.Id, Title = item["Title"].ToString(),
                     FirstName=item["FirstName"].ToString(), LastName=item["LastName"].ToString(),Email=item["Email"].ToString()}).ToList();
             return View(lstEmployees);


 @model IEnumerable<MVCAPP.WebGridViewWeb.Controllers.Employee>
     ViewBag.Title = "grid";
     WebGrid grid = new WebGrid(Model, rowsPerPage: 5,ajaxUpdateContainerId: "gridContent");
 <div id="gridContent" style="font-family: Arial; padding: 20px;">
     @grid.GetHtml(tableStyle: "webgrid-table",
     headerStyle: "webgrid-header",
     footerStyle: "webgrid-footer",
     alternatingRowStyle: "webgrid-alternating-row",
     selectedRowStyle: "webgrid-selected-row",
     rowStyle: "webgrid-row-style",
     columns: grid.Columns(
          grid.Column(columnName: "Id", header: "View", format:@<text>@item.GetSelectLink("View")</text>),
                 grid.Column(columnName: "Title", header: "Title"),
                  grid.Column(columnName: "FirstName", header: "FirstName"),
                 grid.Column(columnName: "LastName", header: "LastName"),
                 grid.Column(columnName: "Email", header: "Email")
     <h2>Selected Item</h2>
     @if (grid.HasSelection)
         var emp = (MVCAPP.WebGridViewWeb.Controllers.Employee)grid.Rows[grid.SelectedIndex].Value;
         <p><b>First Name:</b> @emp.FirstName</p>
         <p><b>Last Name:</b> @emp.LastName</p>
         <p><b>Email:</b> @emp.Email</p>
 <style type="text/css">
     .webgrid-table {
         font-family: Arial,Helvetica,sans-serif;font-size: 14px;font-weight: normal; width: 650px;display: table;
         border-collapse: collapse; border: solid 1px #C5C5C5; background-color: white;
     .webgrid-table td, th { border: 1px solid #C5C5C5;padding: 3px 7px 2px; }
     .webgrid-header, .webgrid-header a { background-color: #0094ff; color: #ffffff; text-align: left; text-decoration: none; }
        .webgrid-row-style {  padding: 3px 7px 2px;    }
     .webgrid-alternating-row {background-color: azure;padding: 3px 7px 2px; }   
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.

SharePoint Analytics