.net mvc using angularjs

Question

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<Emp> ListAll()
{
List<Emp> lst = new List<Emp>();
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<Emp> 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:

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

<html ng-app="myApp">
<head>
<title> AngularJS</title>
<style type="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%;
}
</style>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/ng-grid.js"></script>
<link href="~/Content/ng-grid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ng-grid.min.js"></script>
<script language="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: '<button ng-click="Edit()" class="btn btn-info btn-primary">Edit</button>' },
{ field: '', cellTemplate: '<button ng-click="Delete()" class="btn btn-info btn-danger">Delete</button>' }
]
};
$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");
})
}
};
})
</script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions" ng-init="GetAllData()">
<button type="button" class="btn btn-info btn-primary" data-toggle="modal" data-target="#myModal">Add New Customer</button>
</div>
<div id="myModal" class="modal fade" role="dialog" >
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Save Details</h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:22%">
<label class="lblFont" for="Name">Employee ID <span class="lblMandatory">*</span></label>
</td>
<td>
<input type="text" data-ng-model="id" required" />
@*<span class="lblMandatory"ng-show="!id">Enter ID</span>*@
</td>
</tr>
<tr>
<td style="width:22%">
<label class="lblFont" for="Name">Name<span class="lblMandatory">*</span></label>
</td>
<td>
<input type="text" data-ng-model="name" name="text" required" />
@*<span class="lblMandatory" ng-show="!name">Enter Name</span>*@
</td>
</tr>
<tr>
<td style="width:22%">
<label class="lblFont" for="Name">Designation<span class="lblMandatory">*</span></label>
</td>
<td>
<input type="text" data-ng-model="designation" name="text" required" />
@*<span class="lblMandatory" ng-show="!designation">Enter Designation</span>*@
</td>
</tr>
<tr>
<td style="width:22%">
<label class="lblFont" for="Name">Mobile<span class="lblMandatory">*</span></label>
</td>
<td>
<input type="text" data-ng-model="mobile" name="number" required" />
@*<span class="lblMandatory" ng-show="!mobile">Enter Mobile No.</span>*@
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-success" ng-click="save()" value="Submit" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>