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

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

https://sharepointsites/_layouts/15/appregnew.aspx

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.

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

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.

Employee.cs

 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; }
 
 }
 

HomeController.cs

 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"]));
                     clientContext.ExecuteQuery();
                     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);
         }

Index.cshtml

 @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>
 
     }
 </div>  
 <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; }   
 </style>