.net mvc using angularjs

How to apply filters and paging in ng grid ?

example: Grid mvc working style ... Contains,Startswith and Endswith. and paging

2.Perform Crud Operations in mvc using angularjs NgGrid.

Please see the below uploaded example and help me..

Thanks in advanced

Emp.cs:

=======

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Grid.Models
{
public class Emp
{
public int id { get; set; }
public string name { get; set; }
public string designation { get; set; }
public string mobile { get; set; }
}
}

DAL.cs

======

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
namespace Grid.Models
{
public class DALEmp
{
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
public List ListAll()
{
List lst = new List();
SqlConnection con = new SqlConnection(cs);
con.Open();
SqlCommand cmd = new SqlCommand("select * from Employee", con);
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
lst.Add(new Emp
{
id = Convert.ToInt32(dr["id"]),
name = dr["name"].ToString(),
designation = dr["designation"].ToString(),
mobile = dr["mobile"].ToString()
});
}
dr.Close();
return lst;
}
public void SaveEmp(Emp emp)
{
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
SqlConnection con = new SqlConnection(cs);
con.Open();
string save = "insert into Employee values(@id, @name, @designation, @mobile)";
SqlCommand cmd = new SqlCommand(save, con);
cmd.Parameters.AddWithValue("@id", emp.id);
cmd.Parameters.AddWithValue("@name", emp.name);
cmd.Parameters.AddWithValue("@designation", emp.designation);
cmd.Parameters.AddWithValue("@mobile", emp.mobile);
cmd.ExecuteNonQuery();
con.Close();
}
public void Update(Emp emp)
{
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
SqlConnection con = new SqlConnection(cs);
con.Open();
string update = "update Employee set name=@name, designation=@designation, mobile=@mobile where id=@id";
SqlCommand cmd = new SqlCommand(update, con);
cmd.Parameters.AddWithValue("@id", emp.id);
cmd.Parameters.AddWithValue("@name", emp.name);
cmd.Parameters.AddWithValue("@designation", emp.designation);
cmd.Parameters.AddWithValue("@mobile", emp.mobile);
cmd.ExecuteNonQuery();
con.Close();
}
public void DeleteEmp(Emp emp)
{
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
SqlConnection con = new SqlConnection(cs);
con.Open();
string delete = "delete from Employee where id=@id";
SqlCommand cmd = new SqlCommand(delete, con);
cmd.Parameters.AddWithValue("@id", emp.id);
cmd.ExecuteNonQuery();
con.Close();
}
}
}

HomeController.cs:

==================

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Grid.Models;
namespace Grid.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public JsonResult GetAllEmployee()
{
DALEmp empdal = new DALEmp();
List employee = empdal.ListAll().ToList();
return Json(employee, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult Create(Emp employee)
{
try
{
if (ModelState.IsValid)
{
DALEmp empdal = new DALEmp();
empdal.SaveEmp(employee);
return RedirectToAction("Index");
}
else
{
ModelState.AddModelError("", "Data Not Saved");
}
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
return View();
}
[HttpPost]
public ActionResult Edit(Emp emp)
{
#region Update
try
{
if (ModelState.IsValid)
{
DALEmp empdal = new DALEmp();
empdal.Update(emp);
return RedirectToAction("Index");
}
else
{
ModelState.AddModelError("", "Record is not Updated");
return View();
}
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
return View();
#endregion
}
[HttpPost]
public ActionResult Delete(Emp emp)
{
#region Delete
try
{
if (ModelState.IsValid)
{
DALEmp empdal = new DALEmp();
empdal.DeleteEmp(emp);
return RedirectToAction("Index");
}
else
{
ModelState.AddModelError("", "Record is not Deleted");
return View();
}
}
catch (Exception ex)
{
Console.WriteLine(ex.Message);
}
return View();
#endregion
}
public ActionResult Details()
{
return View();
}
}
}

Index.cshtml:

=============

"myApp">
AngularJS
"text/css">
.gridStyle {
width: 1000px;
height: 300px;
margin-left: 400px;
grid-rows: 100px 1fr 50px;
}
.lblMandatory{
color:red;
}
.lblFont {
display: inline-block;
font-size: 13px;
font-weight: 700;
margin-right: 3px;
text-align: right;
width: 95%;
}
"~/Content/bootstrap.min.css" rel="stylesheet" />
"~/Scripts/ng-grid.js">
"~/Content/ng-grid.css" rel="stylesheet" />
"~/Scripts/jquery-1.9.1.js">
"~/Scripts/bootstrap.min.js">
"~/Scripts/angular.js">
"~/Scripts/ng-grid.min.js">
"javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller("MyCtrl", function ($scope, $http) {
$scope.GetAllData = function() {
$http({
method: "get",
url: "/Home/GetAllEmployee"
}).then(function(response) {
$scope.employees = response.data;
}, function() {
alert("Error Occur");
})
};
$scope.gridOptions = {
multiSelect: false,
showFilter: true,
enablePaging: true,
showFooter: true,
data: 'employees',
rowHeight: 50,
headerRowHeight: 50,
columnDefs: [
{ field: 'id', displayName: 'ID', width: 200, visible: true },
{ field: 'name', displayName: 'Name',width: 200},
{ field: 'designation', displayName: 'Designation', width: 200 },
{ field: 'mobile', displayName: 'Mobile', width: 200 },
{ field: '', cellTemplate: 'Edit' },
{ field: '', cellTemplate: 'Delete' }
]
};
$scope.save = function () {
$scope.Employe = {};
$scope.Employe.id = $scope.id; //$scope.Employe.id is Model class property. //$scope.id; is ng-model directive value
$scope.Employe.name = $scope.name;
$scope.Employe.designation = $scope.designation;
$scope.Employe.mobile = $scope.mobile;
$http({
method: "post",
url: "/Home/Create",
datatype: "json",
data: JSON.stringify($scope.Employe),
}).then(function (data) {
alert("Record Added Successfully");
window.location.reload();
$scope.id = "";
$scope.name = "";
$scope.designation = "";
$scope.mobile = "";
}, function () {
alert("Error Occur. Data Not Saved");
})
};
$scope.Delete = function (id) {
var state = confirm("Are you sure! Do you want to Delete?");
if (state == true) {
$http({
method: "post",
url: "/Home/Delete",
datatype: "json",
data: JSON.stringify(id)
}).then(function (response) {
alert("Record Deleted Successfully");
window.location.reload();
}
, function () {
alert("Error Occur in deletion");
})
}
};
})
"MyCtrl">
class="gridStyle" ng-grid="gridOptions" ng-init="GetAllData()">
"button" class="btn btn-info btn-primary" data-toggle="modal" data-target="#myModal">Add New Customer

"myModal" class="modal fade" role="dialog" >

class="modal-dialog">

class="modal-content">

class="modal-header">

"button" class="close" data-dismiss="modal">×

class="modal-title">Save Details

class="modal-body">

"width:100%">

"width:22%">

class="lblFont" for="Name">Employee ID class="lblMandatory">*

"text" data-ng-model="id" required" />

@*class="lblMandatory"ng-show="!id">Enter ID*@

"width:22%">

class="lblFont" for="Name">Nameclass="lblMandatory">*

"text" data-ng-model="name" name="text" required" />

@*class="lblMandatory" ng-show="!name">Enter Name*@

"width:22%">

class="lblFont" for="Name">Designationclass="lblMandatory">*

"text" data-ng-model="designation" name="text" required" />

@*class="lblMandatory" ng-show="!designation">Enter Designation*@

"width:22%">

class="lblFont" for="Name">Mobileclass="lblMandatory">*

"text" data-ng-model="mobile" name="number" required" />

@*class="lblMandatory" ng-show="!mobile">Enter Mobile No.*@

class="modal-footer">

"button" class="btn btn-success" ng-click="save()" value="Submit" />

"button" class="btn btn-default" data-dismiss="modal">Close

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Manikandan Murugesan9y ago
Refer the following Link : http://tutlane.com/tutorial/angularjs/angularjs-ui-grid-sorting-filtering-paging-grouping

http://www.c-sharpcorner.com/blogs/sorting-paging-and-filter-grid-using-angularjs