How to create a custom menu action and display the selected item with MVC 4 Web Grid in SharePoint Add-In

In this article, lets see how to create a custom action menu in a custom list and display items with MVC4 Web Grid in a SharePoint Add-In

Change the Element.xml As below

 <CustomAction Id="388fcc1e-8f53-4e0f-a130-bc4466bff515.View Projects"
                 RegistrationType="List"
                 RegistrationId="{$ListId:Lists/Employees;}"
                 Location="CommandUI.Ribbon"
                 Sequence="10001"
                HostWebDialog="true"
                HostWebDialogHeight="300"
                HostWebDialogWidth="900"
                  
                 Title="View Employees">
     <CommandUIExtension>
   <CommandUIHandler Command="Invoke_View ProjectsButtonRequest"
                           CommandAction="~remoteAppUrl/Home/Index?{StandardTokens}&SPListItemId={SelectedItemId}&SPListId={SelectedListId}"/>

Employee.Cs

 public class Employee
 {
         public string Title { get; set; }
         public string Name { get; set; }
         public string Department { get; set; }
         public DateTime Doj { get; set; }
 }

HomeController.CS

 [SharePointContextFilter]
         public ActionResult Index(string SPListItemId)
         {
 
             var spContext = SharePointContextProvider.Current.GetSharePointContext(HttpContext);
 
             var ids = Request.QueryString["SPListItemId"];
             List<Employee> employees = new List<Employee>();
 
             using (var clientContext = spContext.CreateUserClientContextForSPHost())
             {
                 if (clientContext != null)
                 {
                     var lst = clientContext.Web.Lists.GetByTitle("Employees");
                     var query = new CamlQuery();
                     if (!string.IsNullOrEmpty(SPListItemId) && SPListItemId != "null")
                     {
 
                         string filter = "<View><Query><Where><In><FieldRef Name="ID"/><Values>";
                         foreach (string id in SPListItemId.Split(','))
                             filter += "<Value Type="Number">" + id + "</Value>";
                         filter += "</Values></In></Where></Query></View>";
 
                         query.ViewXml = filter;
 
 
                     }
                     var items = lst.GetItems(query);
                     clientContext.Load(items, item => item.Include(itm => itm["Title"], itm => itm["Department"], itm => itm["DOJ"]));
                     clientContext.ExecuteQuery();
                     foreach (var item in items)
                     {
                         employees.Add(new Employee()
                         {
                             Title = Convert.ToString(item["Title"]),
                             Department = Convert.ToString(item["Department"]),
                             Doj = Convert.ToDateTime(item["DOJ"])
                         });
                     }
                 }
             }
 
             return View(employees);
         }

The SPListItemId parameter is the querystring value return from the custom action.

Index.Cshtml

 @{
     Layout = null;
 }
 
 <script src="~/Scripts/jquery-1.10.2.js"></script>
 
 
 <div class="jumbotron">
     <h2>View Employees</h2>
 
 
 </div>
 <div class="row">
     @{
         var grid = new WebGrid(rowsPerPage: 4, defaultSort: "Department", ajaxUpdateContainerId: "grid");
         grid.Bind(Model);
         grid.Pager(WebGridPagerModes.All);
 
         @grid.GetHtml(htmlAttributes: new { id = "grid" }, fillEmptyRows: false,
       columns: new[]
       {
           grid.Column("Title",header:"Title"),
           grid.Column("Name"),
           grid.Column("Department"),
           grid.Column("DOJ",header:"Date Of Join")
       })
     }
 </div>