jqGrid load data from ASP.NET MVC Core controller

In this post, let's see how to bind jqGrid with data from asp.net core MVC with server-side paging. We are using User details as MVC view model. Here is the ViewModel-

    public class UserViewModel
    {
        public string UserId { get; set; }
        public string UserName { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
    }

    public class UserPagingViewModel
    {
        public List<UserViewModel> Users { get; set; }
        public int CurrentPage { get; set; }
        public int ItemCount { get; set; }
        public int TotalPages { get; set; }
    }

Here UserPagingViewModel is used for pagination details for the grid.

Following is the controller and action method-

    public class _2168660_How_to_load_jQgrid_with_Json_data_coming_from_database_in_ASP_NET_COREController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public UserPagingViewModel GetUsers(int page, int rows, string sidx, string sort)
        {
         //todo: use sidx and sort is not used, also read data from database 
            UserPagingViewModel model = new UserPagingViewModel();
            model.ItemCount = 500;
            model.CurrentPage = page;
            model.TotalPages = model.ItemCount / rows;

            var users = new List<UserViewModel<();
            for (int i = 0; i < rows; i++)
            {
                users.Add(GetRandomData.GetRandomDataObject<UserViewModel>());
            }
            model.Users = users;
            return model;
        }
    }

Here, GetRandomDataObject is not included in the source code, what it does is simply creates some rendom data list.

Below is the view part. jQuery reference is missing which you need to include. In my case it is included in the layout page. Here jsonReader is used to convert response to jqGrid desired.

<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" rel="stylesheet"></link>
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css" integrity="sha512-xAIWSSbGucVRdutqUD0VLDowcMF/K8W87EbIoa9YUYB4bTyt/zeykyuu9Sjp0TPVdgrgGgBVCBowKv46wY5gDQ==" rel="stylesheet"></link>
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/plugins/css/ui.multiselect.min.css" integrity="sha512-UuhJihFIXhnP4QEzaNXfLmzY9W3xoeTDATm0buV4wb2qJKoikNn568f0zA5QmrX0sp6VZzqE6fffvsTYU34tGA==" rel="stylesheet"></link>

<script crossorigin="anonymous" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script crossorigin="anonymous" integrity="sha512-xt9pysburfYgFvYEtlhPDo8qBEPsupsDvWB8+iwspD+oQTvAdDEpA1aIKcH6zuABU528YitH6jtP0cAe5GrwKA==" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>

<table id="dataTable"></table>
<div id="pager"></div>

<script>
    jQuery("#dataTable").jqGrid({
   	url:'@Url.Action("GetUsers", "_2168660_How_to_load_jQgrid_with_Json_data_coming_from_database_in_ASP_NET_CORE")',
	datatype: "json",
    mtype: 'POST',
   	colNames:['User id','User name', 'Email', 'Phone'],
   	colModel:[
   		{name:'userId',index:'userId', width:100},
   		{name:'userName',index:'userName', width:200},
   		{name:'email',index:'email', width:80, align:"right"},
   		{name:'phone',index:'phone', width:80, align:"right"}		
   	],
   	rowList:[10,20,30],
   	pager: '#pager',
    width: '700',
    rowNum:10,
   	sortname: 'userId',
    viewrecords: true,
    sortorder: "desc",
    jsonReader: {
        repeatitems: false,
        root: function(obj) { return obj.users; },
        page: function(obj) { return obj.currentPage; },
        total: function(obj) { return obj.totalPages; },
        records: function(obj) { return obj.itemCount; },
        id: "userId"
    },
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
</script>

You can clone the working copy from Github