Grid.Mvc

.Grid.Mvc

Web page by Kevin Harris of Homer IL

Please contact Kevin Harris of Homer IL concerning this web site

"Grid.Mvc allows for construction of HTML tables for displaying, paging, filtering and sorting data from a collection of your Model objects."

Grid.Mvc

Grid.Mvc adds functionality for creating GridView controls in ASP.NET MVC web applications. It uses Bootstrap css framework as default style sheets and can be modified to provide for custom styles.

.Grid.Mvc


Use NuGet to install the Grid.Mvc package. The install will make the following changes to the project:

  1. Views/Shared/_Grid.cshtml, Views/Shared/_GridPager.cshtml - views for grid.
  2. Content/Gridmvc.css - default stylesheet for the grid.
  3. Scripts/gridmvc.js, Scripts/gridmvc.min.js - Grid.Mvc scripts.
  4. Reference GridMvc.dll.

The steps for a basic integration of Grid.Mvc into the project is:


    Render GridMvc in the View: You can use Html helper extenstion:

    Reference Grid.Mvc.Html in your view:

    1
    @using GridMvc.Html
    


    Render Grid.Mvc:

    1
    2
    3
    4
    5
    		@Html.Grid(Model).Columns(columns =>
    						{
    							columns.Add(foo => foo.Title).Titled("Custom column title").SetWidth(110);
    							columns.Add(foo => foo.Description).Sortable(true);
    						}).WithPaging(20)
    



  1. Register a grid stylesheet and scripts in your _Layouts.cshtml file:

    1
    2
    3
    4
    	<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />
    	<script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"> </script>
    
    	<link href="@Url.Content("~/Content/Css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    



  2. Also you need to ensure that jQuery has registred on the page before gridmvc.min.js script.
.Grid.Mvc


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web.Mvc;
using CathySiteB.DAL.Models;

namespace CathySiteB.Controllers
{
    public class GroceryController : Controller
    {
        private CathySiteBEntities db = new CathySiteBEntities();

        // GET: Grocery
        public ActionResult Index()
        {
            var groceries = db.groceries.Include(g => g.category).Include(g => g.frequency);
            return View(groceries.ToList());
        }

        // GET: Grocery/Details/5
        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            grocery grocery = db.groceries.Find(id);
            if (grocery == null)
            {
                return HttpNotFound();
            }
            return View(grocery);
        }

        // GET: Grocery/Create
        public ActionResult Create()
        {
            ViewBag.CategoryID = new SelectList(db.categories, "ID", "Name");
            ViewBag.FrequencyID = new SelectList(db.frequencies, "ID", "Name");
            return View();
        }

        // POST: Grocery/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "ID,Item,Brand,Type,Price,CategoryID,FrequencyID,PriceDate,Need")] grocery grocery)
        {
            if (ModelState.IsValid)
            {
                db.groceries.Add(grocery);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            ViewBag.CategoryID = new SelectList(db.categories, "ID", "Name", grocery.CategoryID);
            ViewBag.FrequencyID = new SelectList(db.frequencies, "ID", "Name", grocery.FrequencyID);
            return View(grocery);
        }

        // GET: Grocery/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            grocery grocery = db.groceries.Find(id);
            if (grocery == null)
            {
                return HttpNotFound();
            }
            ViewBag.CategoryID = new SelectList(db.categories, "ID", "Name", grocery.CategoryID);
            ViewBag.FrequencyID = new SelectList(db.frequencies, "ID", "Name", grocery.FrequencyID);
            return View(grocery);
        }

        // POST: Grocery/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "ID,Item,Brand,Type,Price,CategoryID,FrequencyID,PriceDate,Need")] grocery grocery)
        {
            if (ModelState.IsValid)
            {
                db.Entry(grocery).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            ViewBag.CategoryID = new SelectList(db.categories, "ID", "Name", grocery.CategoryID);
            ViewBag.FrequencyID = new SelectList(db.frequencies, "ID", "Name", grocery.FrequencyID);
            return View(grocery);
        }

        // GET: Grocery/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            grocery grocery = db.groceries.Find(id);
            if (grocery == null)
            {
                return HttpNotFound();
            }
            return View(grocery);
        }

        // POST: Grocery/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            grocery grocery = db.groceries.Find(id);
            db.groceries.Remove(grocery);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

GroceryController.cs


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
@using GridMvc.Html
@using GridMvc.Sorting
@using GridMvc.Pagination

@model IEnumerable<CathySiteB.DAL.Models.grocery>

@{
    ViewBag.Title = "Groceries";
}

<h2>Groceries</h2>

<p>
    <span style="color:blue">
        @Html.ActionLink("Create New Grocery Item", "Create")
    </span>
</p>


@helper CustomRenderingOfColumn(CathySiteB.DAL.Models.grocery Grocery)
{
    if (Grocery.Need == true)
    {
        <text>Yes</text>
    }
else
    {
        <text>No</text>
    }
}

@Html.Grid(Model).Columns(columns =>
{
    columns.Add()
            .Titled("Need")
            .Filterable(true)
            .SortInitialDirection(GridSortDirection.Ascending)
            .Encoded(false)
            .Sanitized(false)
            .SetWidth(30)
            .Sortable(true)
            .RenderValueAs(c => CustomRenderingOfColumn(c));

    columns.Add(c => c.Item).Titled("Item")
            .Filterable(true)
            .SetWidth(110)
            .Sortable(true);

    columns.Add(c => c.Brand)
            .Titled("Brand")
            .SetWidth(110)
            .Sortable(true);

    columns.Add(c => c.Type)
            .Titled("Type")
            .SetWidth(110)
            .Sortable(true);

    columns.Add(c => c.Price)
            .Titled("Price")
            .SetWidth(110)
            .Sortable(true);

    columns.Add(c => c.PriceDate)
            .Titled("Price Date")
            .SetWidth(110)
            .Sortable(true)
            .RenderValueAs(c => Convert.ToDateTime(c.PriceDate).ToString("d"));

    columns.Add(c => c.category.Name)
            .Titled("Category")
            .SetWidth(110)
            .Sortable(true);

    columns.Add(c => c.frequency.Name)
            .Titled("Frequency")
            .SetWidth(110)
            .Sortable(true);

    columns.Add()
            .Titled("")
            .SetWidth(10)
            .Filterable(true)
            .Sanitized(false)
            .Encoded(false)
            .RenderValueAs(c => Html.ActionLink("Edit", "Edit", "Grocery", new { id = c.ID }, null)
            .ToHtmlString());

    columns.Add()
            .Titled("")
            .SetWidth(10)
            .Filterable(true)
            .Sanitized(false)
            .Encoded(false)
            .RenderValueAs(c => Html.ActionLink("Delete", "Delete", "Grocery", new { id = c.ID }, null)
            .ToHtmlString());

}).SetRowCssClasses(c => c.Need == true ? "warning" : string.Empty).WithPaging(4).Sortable().Filterable()


<br />

Index.cshtml