Manage Ajax Sourced Data

This example shows CRUD operations, sorting, paging and filtering with remote data source

<!DOCTYPE html>
<html>
<head>
    <title>Manage Ajax Sourced Data With Grid</title>
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css" />
    <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.css" rel="stylesheet" type="text/css" />
    <style>
        .form-row { display: flex; margin-bottom: 29px; }
        .form-row:last-child { margin-bottom: 0px; }
        .margin-top-10 { margin-top: 10px; }
        .float-left { float: left; }
        .float-right { float: right; }
        .display-inline { display: inline; }
        .display-inline-block { display: inline-block; }
        .width-200 { width: 200px; }
        .clear-both { clear: both; }
        .gj-display-none { display: none; }
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.js" type="text/javascript"></script>
</head>
<body>
    <div class="margin-top-10">
        <div class="float-left">
            <form class="display-inline">
                <input id="txtName" type="text" placeholder="Name..." class="gj-textbox-md display-inline-block width-200" />
                <input id="txtNationality" type="text" placeholder="Nationality..." class="gj-textbox-md display-inline-block width-200" />
                <button id="btnSearch" type="button" class="gj-button-md">Search</button>
                <button id="btnClear" type="button" class="gj-button-md">Clear</button>
            </form>
        </div>
        <div class="float-right">
            <button id="btnAdd" type="button" class="gj-button-md">Add New Record</button>
        </div>
    </div>
    <div class="clear-both"></div>
    <div class="margin-top-10">
        <table id="grid"></table>
    </div>

<div id="dialog" class="gj-display-none">
        <div data-role="body">
            <input type="hidden" id="ID" />
            <div class="form-row">
                <input type="text" class="gj-textbox-md" id="Name" placeholder="Name...">
            </div>
            <div class="form-row">
                <select id="Nationality" width="100%" placeholder="Nationality..."></select>
            </div>
            <div class="form-row">
                <input type="text" id="DateOfBirth" placeholder="Date Of Birth..." width="100%" />
            </div>
            <div class="form-row">
                <label for="IsActive"><input type="checkbox" id="IsActive" /> &nbsp;Is Active?</label>
            </div>
        </div>
        <div data-role="footer">
            <button type="button" id="btnSave" class="gj-button-md">Save</button>
            <button type="button" id="btnCancel" class="gj-button-md">Cancel</button>
        </div>
    </div>

using Gijgo.Asp.NET.Examples.Models.Entities;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

namespace Gijgo.Asp.NET.Examples.Controllers
{
    public class PlayersController : Controller
    {
        public JsonResult Get(int? page, int? limit, string sortBy, string direction, string name, string nationality, string placeOfBirth)
        {
            List<Models.DTO.Player> records;
            int total;
            using (ApplicationDbContext context = new ApplicationDbContext())
            {
                var query = context.Players.Select(p => new Models.DTO.Player
                {
                    ID = p.ID,
                    Name = p.Name,
                    PlaceOfBirth = p.PlaceOfBirth,
                    DateOfBirth = p.DateOfBirth,
                    CountryID = p.CountryID,
                    CountryName = p.Country != null ? p.Country.Name : "",
                    IsActive = p.IsActive,
                    OrderNumber = p.OrderNumber
                });

if (!string.IsNullOrWhiteSpace(name))
                {
                    query = query.Where(q => q.Name.Contains(name));
                }

if (!string.IsNullOrWhiteSpace(nationality))
                {
                    query = query.Where(q => q.CountryName != null && q.CountryName.Contains(nationality));
                }

if (!string.IsNullOrWhiteSpace(placeOfBirth))
                {
                    query = query.Where(q => q.PlaceOfBirth != null && q.PlaceOfBirth.Contains(placeOfBirth));
                }

if (!string.IsNullOrEmpty(sortBy) && !string.IsNullOrEmpty(direction))
                {
                    if (direction.Trim().ToLower() == "asc")
                    {
                        switch (sortBy.Trim().ToLower())
                        {
                            case "name":
                                query = query.OrderBy(q => q.Name);
                                break;
                            case "countryname":
                                query = query.OrderBy(q => q.CountryName);
                                break;
                            case "placeOfBirth":
                                query = query.OrderBy(q => q.PlaceOfBirth);
                                break;
                            case "dateofbirth":
                                query = query.OrderBy(q => q.DateOfBirth);
                                break;
                        }
                    }
                    else
                    {
                        switch (sortBy.Trim().ToLower())
                        {
                            case "name":
                                query = query.OrderByDescending(q => q.Name);
                                break;
                            case "countryname":
                                query = query.OrderByDescending(q => q.CountryName);
                                break;
                            case "placeOfBirth":
                                query = query.OrderByDescending(q => q.PlaceOfBirth);
                                break;
                            case "dateofbirth":
                                query = query.OrderByDescending(q => q.DateOfBirth);
                                break;
                        }
                    }
                }
                else
                {
                    query = query.OrderBy(q => q.OrderNumber);
                }

total = query.Count();
                if (page.HasValue && limit.HasValue)
                {
                    int start = (page.Value - 1) * limit.Value;
                    records = query.Skip(start).Take(limit.Value).ToList();
                }
                else
                {
                    records = query.ToList();
                }
            }

return this.Json(new { records, total }, JsonRequestBehavior.AllowGet);
        }

[HttpPost]
        public JsonResult Save(Models.DTO.Player record)
        {
            Player entity;
            using (ApplicationDbContext context = new ApplicationDbContext())
            {
                if (record.ID > 0)
                {
                    entity = context.Players.First(p => p.ID == record.ID);
                    entity.Name = record.Name;
                    entity.PlaceOfBirth = record.PlaceOfBirth;
                    entity.DateOfBirth = record.DateOfBirth;
                    entity.CountryID = record.CountryID;
                    entity.Country = context.Locations.FirstOrDefault(l => l.ID == record.CountryID);
                    entity.IsActive = record.IsActive;
                }
                else
                {
                    context.Players.Add(new Player
                    {
                        Name = record.Name,
                        PlaceOfBirth = record.PlaceOfBirth,
                        DateOfBirth = record.DateOfBirth,
                        CountryID = record.CountryID,
                        Country = context.Locations.FirstOrDefault(l => l.ID == record.CountryID),
                        IsActive = record.IsActive
                    });
                }
                context.SaveChanges();
            }
            return Json(new { result = true });
        }

[HttpPost]
        public JsonResult Delete(int id)
        {
            using (ApplicationDbContext context = new ApplicationDbContext())
            {
                Player entity = context.Players.First(p => p.ID == id);
                context.Players.Remove(entity);
                context.SaveChanges();
            }
            return Json(new { result = true });
        }

public JsonResult GetTeams(int playerId, int? page, int? limit)
        {
            List<Models.DTO.PlayerTeam> records;
            int total;
            using (ApplicationDbContext context = new ApplicationDbContext())
            {
                var query = context.PlayerTeams.Where(pt => pt.PlayerID == playerId).Select(pt => new Models.DTO.PlayerTeam
                {
                    ID = pt.ID,
                    PlayerID = pt.PlayerID,
                    FromYear = pt.FromYear,
                    ToYear = pt.ToYear,
                    Team = pt.Team,
                    Apps = pt.Apps,
                    Goals = pt.Goals
                });

total = query.Count();
                if (page.HasValue && limit.HasValue)
                {
                    int start = (page.Value - 1) * limit.Value;
                    records = query.OrderBy(pt => pt.FromYear).Skip(start).Take(limit.Value).ToList();
                }
                else
                {
                    records = query.ToList();
                }
            }

return this.Json(new { records, total }, JsonRequestBehavior.AllowGet);
        }
    }
}