Invalid Arguments using MVC Grid component Component?

Question

I'm new to MVC Application development and am trying out the MVC Grid component. As shown in the link, I have my User model:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using PROJECT.Helper;

namespace PROJECT.Models
{
    public class Users
    {
        public int Id { get; set; }

        [Required]
        [Display(Name = "Email")]
        [DataType(DataType.EmailAddress)]
        public string Email { get; set; }

        [Required]
        [Display(Name = "Password")]
        [DataType(DataType.Password)]
        public string Password { get; set; }

        [Display(Name = "Name")]
        public string Name { get; set; }

        [Display(Name = "Forum Username")]
        public string ForumUsername { get; set; }

        [Display(Name = "Last Date Visited")]
        public DateTime LastVisitDate { get; set; }

        public Boolean RememberMe { get; set; }

        public int? OrganizationId { get; set; }

        [Display(Name="Position")]
        public string Position { get; set; }

        [Display(Name = "Profile Picture")]
        public string ProfilePictureSrc { get; set; }

        //[DataType(DataType.PhoneNumber)]
        [DisplayFormat(DataFormatString = "{0:(###) ###-####}", ApplyFormatInEditMode = true)]
        public string PhoneNumber { get; set; }

        public virtual string ProfilePictureUrl
        {
            get
            {

                //TODO: update the folder when it isn't null to the blob location
                if (this.ProfilePictureSrc == null)
                {
                    return "/Content/Images/userThumb.png";
                }
                else
                {
                    BlobHelper helper = new BlobHelper();
                    string url = helper.getImageUrl(this.ProfilePictureSrc, "profilepicture");

                    return url;
                }
            }
        }
    }
}

Next I have my Controller (~/Controllers/AdminController.cs):

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PROJECT.Models;
using PROJECT.DAL;
using System.IO;
using PROJECT.Helper;
using PagedList;

namespace PRISM.Controllers
{
    [CustomizedAuthorizeAttribute]
    public class AdminController : Controller
    {
        private ProjectContext db = new ProjectContext();
        private static string profPicBlobContainer = "ProfilePicture";
        private BlobHelper blobHelper = new BlobHelper();

        //
        // GET: /Admin/
        public ActionResult ViewUsers()
        {
            return View(db.Users.ToList());
        }
    }
}

However, when I load up (localhost:12345/Admin/ViewUsers) I receive:

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0411: The type arguments for method 'GridMvc.Html.GridExtensions.Grid<T>(System.Web.Mvc.HtmlHelper, System.Collections.Generic.IEnumerable<T>)' cannot be inferred from the usage. Try specifying the type arguments explicitly.


Line 9:  @using GridMvc.Html
Line 10: 
Line 11: @Html.Grid(Model).Columns(columns =>
Line 12:            {
Line 13:                  //columns.Add().Titled("Custom column title").SetWidth(110);


Source File: c:\ME\Project\Project\Views\Admin\ViewUsers.cshtml    Line: 11 

~/Views/Admin/ViewUsers.cs:

@using GridMvc.Html
@model PROJECT.Models.Users

@{
    ViewBag.Title = "View Users";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

@using GridMvc.Html

@Html.Grid(Model).Columns(columns =>
           {
                 //columns.Add().Titled("Custom column title").SetWidth(110);
                 columns.Add(Model.Name).Sortable(true);
           }).WithPaging(20)

As best I can tell, I'm not provided a correct "Model" collection to the MVC Grid in order for it to access the individual model properties, etc.

Anyone have ideas for how I can resolve this? The linked example is the only one I've been able to find so far.

---

EDIT:

I got the View to render by specifying it at the top as an IEnum (shown below).

Now, In my first @Html.Grid(Model) section, I can declare specific columns to pull in, as well as set their individual Grid Attributes. In the second section, @Html.Grid(Model).AutoGenerateColumns(), I used the GridColumn Annotation to specify attributes, and then the AutoGenerateColumns() pulls them in as appropriately, in descending order as listed in the model.

1 issue I am having with the AutoGenerateColumns() though is that I can't figure out how to HIDE specific model properties I do not wish shown. Anyone have any thoughts on this? I would love to use the AutoGenerateColumns() if possible to cut down on coding and be able to edit everything from within my Model itself.

EDIT2: Found the answer with using the [NotMappedColumn] Grid DataAnnotation. Link

@using GridMvc.Html
@model IEnumerable<PROJECT.Models.Users>

@{
    ViewBag.Title = "View Users";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

@using GridMvc.Html

@Html.Grid(Model).Columns(columns =>
           {
               columns.Add().Encoded(false).Sanitized(false).SetWidth(30).RenderValueAs(o => @Html.CheckBox("checked", false));
               columns.Add(foo => foo.Enabled).Titled("Enabled").SetWidth(50).Sortable(true);
               columns.Add(foo => foo.Name).Titled("Name").SetWidth(100).Sortable(true);
               columns.Add(foo => foo.Position).Titled("Position").SetWidth(50).Sortable(true);
               columns.Add(foo => foo.Email).Titled("Email").SetWidth(100).Sortable(true);
               columns.Add(foo => foo.PhoneNumber).Titled("Phone#").SetWidth(30).Sortable(true);
               columns.Add(foo => foo.ForumUsername).Titled("Forum Username").SetWidth(50).Sortable(true);
               columns.Add(foo => foo.RegisteredDate).Titled("Reg. Date").SetWidth(50).Sortable(true);
               columns.Add(foo => foo.LastVisitDate).Titled("Last Visited").SetWidth(50).Sortable(true);
               columns.Add(foo => foo.ReceiveSystemEmails).Titled("Rec. Sys Emails").SetWidth(50).Sortable(true);
           }).WithPaging(5)

@Html.Grid(Model).AutoGenerateColumns()

~/Models/User:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using PROJECT.Helper;
using GridMvc.DataAnnotations;

namespace PROJECT.Models
{
    [GridTable(PagingEnabled = true, PageSize = 5)]
    public class Users
    {
        public int Id { get; set; }

        [Display(Name = "Enable User")]
        [GridColumn(Title = "Enabled", SortEnabled = true, FilterEnabled = true, Width = "30")]
        public bool Enabled { get; set; }

        [Display(Name = "Name")]
        [GridColumn(Title = "Name", SortEnabled = true, FilterEnabled = true, Width = "50")]
        public string Name { get; set; }

        [Display(Name = "Position")]
        [GridColumn(Title = "Position", SortEnabled = true, FilterEnabled = true, Width = "50")]
        public string Position { get; set; }

        [Required]
        [Display(Name = "Email")]
        [DataType(DataType.EmailAddress)]
        [GridColumn(Title = "Email", SortEnabled = true, FilterEnabled = true, Width = "80")]
        public string Email { get; set; }

        //[DataType(DataType.PhoneNumber)]
        [DisplayFormat(DataFormatString = "{0:(###) ###-####}", ApplyFormatInEditMode = true)]
        [GridColumn(Title = "Phone #", SortEnabled = true, FilterEnabled = true, Width = "40", Format = "{0:(###)-###-####}")]
        public string PhoneNumber { get; set; }

        [Display(Name = "Forum Username")]
        [GridColumn(Title = "Forum Username", SortEnabled = true, FilterEnabled = true, Width = "30")]
        public string ForumUsername { get; set; }

        [GridColumn(Title = "Reg. Date", SortEnabled = true, FilterEnabled = true, Width = "40")]
        public DateTime RegisteredDate { get; set; }

        [Display(Name = "Last Date Visited")]
        [GridColumn(Title = "Last Visited", SortEnabled = true, FilterEnabled = true, Width = "40")]
        public DateTime LastVisitDate { get; set; }

        [Display(Name = "Receive System Emails")]
        [GridColumn(Title = "Rec. Sys Emails", SortEnabled = true, FilterEnabled = true, Width = "30")]
        public bool ReceiveSystemEmails { get; set; }

        [GridColumn(Title = "Remember User", SortEnabled = true, FilterEnabled = true, Width = "20")]
        public Boolean RememberMe { get; set; }

        [Required]
        [Display(Name = "Password")]
        [DataType(DataType.Password)]
        public string Password { get; set; }

        public int? OrganizationId { get; set; }

        [Display(Name = "Profile Picture")]
        [GridColumn(Title = "Profile Pic.", SortEnabled = true, FilterEnabled = true)]
        public string ProfilePictureSrc { get; set; }

        [ForeignKey("OrganizationId")]
        public virtual MemberOrganizations Organization { get; set; }

        public virtual SponsorOrganizations Sponsor { get; set; }
        public virtual ICollection<UserRoles> Roles { get; set; }

        public virtual string ProfilePictureUrl
        {
            get
            {

                //TODO: update the folder when it isn't null to the blob location
                if (this.ProfilePictureSrc == null)
                {
                    return "/Content/Images/userThumb.png";
                }
                else
                {
                    BlobHelper helper = new BlobHelper();
                    string url = helper.getImageUrl(this.ProfilePictureSrc, "profilepicture");

                    return url;
                }
            }
        }
    }
}

Answer 1

You are only passing in a single instance of User into Html.Grid(). Html.Grid() expects an argument that inherits from IEnumerable.

Also, the class Users should really be called User because it only represents one user.

Here is an example of what you would do instead:

@using GridMvc.Html
@model List<PROJECT.Models.User>

@{
    ViewBag.Title = "View Users";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

@Html.Grid(Model).Columns(columns =>
{
    columns.Add(Model.Name).Sortable(true);
}).WithPaging(20)