user1597641
user1597641

Reputation: 71

Grid view in mvc6

How to add grid view in MVC-6?

I would like to use webgrid something for listing the details. Is it possible to use System.Web.Helpers as namespace. But I am not getting it supporting

Upvotes: 7

Views: 7144

Answers (4)

Vladimir Georgiev
Vladimir Georgiev

Reputation: 1949

You can use the Shield UI for ASP.NET Core NuGet package and integrate it with the free Shield UI Lite via Bower, or the commercial Shield UI suite.

Their Grid widget is awesome!

Upvotes: 1

João Pereira
João Pereira

Reputation: 1657

You can also try NetCoreControls.

Built specifically for .NET MVC Core. The Grid Control is server side, uses AJAX, and supports, paging, filter and events.

Check the documentation and demo website.

Upvotes: 1

Víctor Velarde
Víctor Velarde

Reputation: 272

This project could fit your requirements, a simple grid control for ASPNET MVC (using Razor): MVC6.Grid.Web

Upvotes: 2

Thakur
Thakur

Reputation: 557

I would suggest to use the jqGrid(or may be some other java scripts grid). From the MVC controller return the ActionResult as JSON object

public ActionResult UserList()
    {
        object userListData = null;
        try
        {
            List<UserListViewModel> users = 'your code to get the user list'
            userListData = new
            {
                page = 1,
                records = users.Count,
                rows = users
            };
        }
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        serializer.MaxJsonLength = int.MaxValue;
        return new ContentResult()
        {
            Content = serializer.Serialize(userListData),
            ContentType = "application/json",
        };
    }

and call this on page load/jQuery document Ready some thing like this.

 $("#userTable").jqGrid({
    url: '../User/UserList,
    mtype: 'GET',
    datatype: "json",
    autowidth: true,
    colNames: ['Id', 'First Name', 'Last Name'],
    colModel: [
        { name: 'Id', key: true, hidden: true, fixed: false, shrinkToFit: false, align: 'left' },
        { name: 'FirstName', fixed: false, shrinkToFit: false, align: 'left' },
        { name: 'LastName', fixed: false, shrinkToFit: false, align: 'left' }
    ],

for more information about jqGrid, please see demo at http://jqgrid.com/

Upvotes: -1

Related Questions