ASP .NET MVC Ajax Insert Update Delete Using Flexigrid


Insert Update Delete Using Flexigrid

Flexigrid is a free Lightweight data grid with re sizable columns and scrollable data. Flexigrids accepts two types data sources xml or json. The example in here the datasouce used by the flexigrid is json. Below you can find step by step instructions.

The Only Part that is complicated in the code is to get the return Json string right.

Steps are written in detail as all the articles are ment for beginners.


Let us start with an example Country...

Step 1 : Go to VisualStudio2010>>NewProject >> Give name as 'FlexiGrid'

Step 2 :Creating Database and tables

First we have to change the connection string in the WebConfig for that add following changes



Next for creating the tables

Goto>> Models>>Add>> Class>> Give name as 'Leedhar_FlexiGrid'

Add codes for creating the country table 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
namespace FlexiGrid.Models
{
    public class Leedhar_FlexiGrid:DbContext
    {

        public DbSet Country { get; set; }
    }
}


Next create a cs page for Country within the models

Add following codes to the 'Country.cs' for creating the fields for the Country 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel.DataAnnotations;
namespace FlexiGrid.Models
{
   public class Country
    {
        [Key]
        public virtual int CountryCode { get; set; }
        public virtual int CountryNumber { get; set; }
        [Required]
        public virtual String CountryName { get; set; }
      

    }
}


Next for searching and sorting the country we have to create an 'ExtensionMetods.cs' within the Models

In that cs page add codes for searching and sorting 

using System;
using System.Data;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Linq.Expressions;
using System.Data.Linq.SqlClient;

namespace FlexiGrid.Models
{
    public static class ExtensionMethods
    {
        public static IQueryable OrderBy(this IQueryable source, string propertyName, bool asc)
        {
            var type = typeof(T);
            string methodName = asc ? "OrderBy" : "OrderByDescending";
            var property = type.GetProperty(propertyName);
            var parameter = Expression.Parameter(type, "p");
            var propertyAccess = Expression.MakeMemberAccess(parameter, property);
            var orderByExp = Expression.Lambda(propertyAccess, parameter);
            MethodCallExpression resultExp = Expression.Call(typeof(Queryable), methodName, new Type[] { type, property.PropertyType }, source.Expression, Expression.Quote(orderByExp));
            return source.Provider.CreateQuery(resultExp);
        }

        public static IQueryable Like(this IQueryable source, string propertyName, string keyword)
        {
            var type = typeof(T);
            var property = type.GetProperty(propertyName);
            var parameter = Expression.Parameter(type, "p");
            var propertyAccess = Expression.MakeMemberAccess(parameter, property);
            var constant = Expression.Constant("%" + keyword + "%");
            MethodCallExpression methodExp = Expression.Call(null, typeof(SqlMethods).GetMethod("Like", new Type[] { typeof(string), typeof(string) }), propertyAccess, constant);
            Expression<>> lambda = Expression.Lambda<>>(methodExp, parameter);
            return source.Where(lambda);
        }
    }
}


Step 2 :Creating View Page

Create an 'AdminController.cs' in the Controller folder

In the 'AdminController.cs' right click on index>> Add view>>give name as 'Country.cshtml' give the master page . Click Add button

Next in the masterpage we have to give the flexigrid.css and flexigrid.js for displaying the country .

Next in the Country.cshtml page add following codes for Add Delete Edit and View the Country


Come back to Admin Controller Add following codes for Add Edit Delete View Country 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexiGrid.Models;
using System.IO;
namespace FlexiGrid.Controllers
{
    public class AdminController : Controller
    {
        //
        // GET: /Admin/
       
        Leedhar_FlexiGrid _DB = new Leedhar_FlexiGrid();
        public ActionResult Index()
        {
            return View();
        }


        public ActionResult JsonCountry()
        {
            var result = _DB.Country
                    .Select(x => new { x.CountryName, x.CountryCode });
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        #region Country
        [HttpGet]
        public ActionResult Country(int id = 0)
        {
            return View();
        }

        [HttpPost]
        public ActionResult Country()
        {

            int page = int.Parse(Request.Form["page"]);
            int rp = int.Parse(Request.Form["rp"]);
            string qtype = Request.Form["qtype"].ToString();
            string query = Request.Form["query"].ToString();
            string sortname = Request.Form["sortname"].ToString();
            string sortorder = Request.Form["sortorder"].ToString();


            switch (Request.Form["fntype"])
            {
                case "Add":
                    if (Request.Form["CountryNumber"] != "" && Request.Form["CountryNumber"] != null)
                    {
                        int CountryNumber = Convert.ToInt32(Request.Form["CountryNumber"]);
                        _DB.Country.Add(new Country() { CountryName = Request.Form["CountryName"], CountryNumber = CountryNumber });
                        _DB.SaveChanges();
                    }
                    break;
                case "Edit":
                    if (Request.Form["CountryNumber"] != "" && Request.Form["CountryNumber"] != null)
                    {
                        int CountryCC = Convert.ToInt32(Request.Form["CountryCode"]);
                        var x = _DB.Country.Single(r => r.CountryCode == CountryCC);
                        x.CountryName = Request.Form["CountryName"];
                        x.CountryNumber = Convert.ToInt32(Request.Form["CountryNumber"]);
                        _DB.SaveChanges();
                    }
                    break;
                case "Delete":
                    if (Request.Form["CountryCode"] != "" && Request.Form["CountryCode"] != null)
                    {
                        int CountryCode = Convert.ToInt32(Request.Form["CountryCode"]);
                        _DB.Country.Remove(_DB.Country.Single(r => r.CountryCode == CountryCode));
                        _DB.SaveChanges();
                    }
                    break;
            }

            var DBList = from c in _DB.Country select c;

            if (!string.IsNullOrEmpty(sortname) && !string.IsNullOrEmpty(sortorder))
            {
                DBList = DBList.OrderBy(sortname, (sortorder == "asc"));
            }

            if (!string.IsNullOrEmpty(qtype) && !string.IsNullOrEmpty(query))
            {
                DBList = DBList.Like(qtype, query);
            }

            DBList = DBList.Skip((page - 1) * rp).Take(rp);


            var flexgrid = new
            {
                page = page,
                total = _DB.Country.Count(),
                rows = DBList
                .Select(x => new
                {
                    id = x.CountryName,
                    cell = new { x.CountryCode, x.CountryNumber, x.CountryName }
                }
                )

            };


            return Json(flexgrid, JsonRequestBehavior.AllowGet);
        }

        #endregion Country


        


     
    }
}


Step 4 :Debug to get the result

Add County



Edit Country



Delete Country 




                       DOWNLOAD SOURCE CODE 

FlexiGrid.zip