Hitesh Patel: Angular js Demo

----------------------------------------------------
angularjs setup install
layout html=> data-ng-app="myapp"
layout head=> <script src="https://use.fontawesome.com/bc3ab0b857.js"></script>
layou body=> <script src="~/Scripts/angular.min.js"></script>
----------------------------------------------------

index.cshtml
----------------------------------------------------

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br /><br />
<div>
<div data-ng-controller="DefultController">
<div class="row" ng-init="Departmentbind(@Json.Encode(ViewBag.DepartData),@Json.Encode(ViewBag.StudentData))">
<form role="form" id="frmstudent" name="frmstudent" ng-class="{'submitted':submitted}" ng-submit="submitted=true" novalidate>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label>Name :</label>
<input data-ng-model="objstudent.Name" id="Name" name="Name" class="form-control" required />
<span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Name is Required.!</span>
</div>
<div class="form-group">
<label>BirthDate :</label>
<input type="date" data-ng-model="objstudent.BirthDate" id="Birthdate" name="Birthdate" class="form-control" required />
<span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Birthdate is Required.!</span>
</div>
<div class="form-group">
<label>Department :</label>
<select data-ng-model="objstudent.DepartmentId" id="DepartmentId" name="DepartmentId" class="form-control" required data-ng-options="dm.DepartmentId as dm.DepartmentName for dm in Departmentlist">
<option value="">---Select---</option>
</select>
<span class="text-danger" ng-if="submitted && objstudent.DepartmentId==''"><i class="fa fa-exclamation-triangle"></i> Department is Required.!</span>
</div>
<div class="form-group">
<label>Gender :</label>
<input type="radio" ng-model="objstudent.Gender" value="1" name="Gender1" required />Male
<input type="radio" ng-model="objstudent.Gender" value="2" name="Gender1" required />Female
<br />
<span class="text-danger" ng-if="submitted && objstudent.Gender==''"><i class="fa fa-exclamation-triangle"></i> Gender is Required.!</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" data-ng-click="frmstudent.$valid && createupdate(objstudent)">Submit</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<input type="text" ng-model="search" class="form-control" placeholder="Search" style="max-width: 100%;"><span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>

<br />
<table class="table table-hover">
<thead>
<tr>
<th ng-click="sort('Name')" style="cursor:pointer;">
Name <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th ng-click="sort('BirthDate')" style="cursor:pointer;">
BirthDate <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th ng-click="sort('Department')" style="cursor:pointer;">
Department <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th ng-click="sort('Gender')" style="cursor:pointer;">
Gender <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="studnt in Studentlist|filter:search|orderBy:sortKey:reverse">
<td>
{{studnt.Name}}
</td>
<td>
{{studnt.BirthDate | date : "dd-MMM-yyyy"}}
</td>
<td>
{{studnt.Department}}
</td>
<td>
{{studnt.Gender==1?"Male":"Female"}}
</td>
<td>
<a ng-click="Edit(studnt)" style="cursor:pointer;" title="Edit" data-tooltip="Edit"><i class="fa fa-edit"></i></a>
<a ng-click="Delete(studnt.StudentId)" style="cursor:pointer;" title="Delete" data-tooltip="Delete"><i class="fa fa-trash pr2"></i></a>
</td>
</tr>
<tr ng-if="Studentlist==null || Studentlist.length <=0">
<td class="col-md-4 col-md-offset-4">
<label class="text-danger">Record Not Found.</label>
</td>
</tr>
</tbody>
</table>
<ul class="pagination pagination-sm">
<li ng-class="{active:0}">
<a href="#" ng-click="firstPage()">First</a>
</li>
<li ng-repeat="n in range(ItemsByPage.length)">
<a href="#" ng-click="setPage()" ng-bind="n+1">1</a>
</li>
<li>
<a href="#" ng-click="lastPage()">Last</a>
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@section Scripts{
<script src="~/Scripts/Controller/DefultController.js"></script>
<script src="~/Scripts/Services/DefultService.js"></script>
}

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br /><br />
<div>
<div data-ng-controller="DefultController">
<div class="row" ng-init="Departmentbind(@Json.Encode(ViewBag.DepartData),@Json.Encode(ViewBag.StudentData))">
<form role="form" id="frmstudent" name="frmstudent" ng-class="{'submitted':submitted}" ng-submit="submitted=true" novalidate>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label>Name :</label>
<input data-ng-model="objstudent.Name" id="Name" name="Name" class="form-control" required />
<span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Name is Required.!</span>
</div>
<div class="form-group">
<label>BirthDate :</label>
<input type="date" data-ng-model="objstudent.BirthDate" id="Birthdate" name="Birthdate" class="form-control" required />
<span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Birthdate is Required.!</span>
</div>
<div class="form-group">
<label>Department :</label>
<select data-ng-model="objstudent.DepartmentId" id="DepartmentId" name="DepartmentId" class="form-control" required data-ng-options="dm.DepartmentId as dm.DepartmentName for dm in Departmentlist">
<option value="">---Select---</option>
</select>
<span class="text-danger" ng-if="submitted && objstudent.DepartmentId==''"><i class="fa fa-exclamation-triangle"></i> Department is Required.!</span>
</div>
<div class="form-group">
<label>Gender :</label>
<input type="radio" ng-model="objstudent.Gender" value="1" name="Gender1" required />Male
<input type="radio" ng-model="objstudent.Gender" value="2" name="Gender1" required />Female
<br />
<span class="text-danger" ng-if="submitted && objstudent.Gender==''"><i class="fa fa-exclamation-triangle"></i> Gender is Required.!</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" data-ng-click="frmstudent.$valid && createupdate(objstudent)">Submit</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<input type="text" ng-model="search" class="form-control" placeholder="Search" style="max-width: 100%;"><span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>

<br />
<table class="table table-hover">
<thead>
<tr>
<th ng-click="sort('Name')" style="cursor:pointer;">
Name <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th ng-click="sort('BirthDate')" style="cursor:pointer;">
BirthDate <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th ng-click="sort('Department')" style="cursor:pointer;">
Department <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th ng-click="sort('Gender')" style="cursor:pointer;">
Gender <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="studnt in Studentlist|filter:search|orderBy:sortKey:reverse">
<td>
{{studnt.Name}}
</td>
<td>
{{studnt.BirthDate | date : "dd-MMM-yyyy"}}
</td>
<td>
{{studnt.Department}}
</td>
<td>
{{studnt.Gender==1?"Male":"Female"}}
</td>
<td>
<a ng-click="Edit(studnt)" style="cursor:pointer;" title="Edit" data-tooltip="Edit"><i class="fa fa-edit"></i></a>
<a ng-click="Delete(studnt.StudentId)" style="cursor:pointer;" title="Delete" data-tooltip="Delete"><i class="fa fa-trash pr2"></i></a>
</td>
</tr>
<tr ng-if="Studentlist==null || Studentlist.length <=0">
<td class="col-md-4 col-md-offset-4">
<label class="text-danger">Record Not Found.</label>
</td>
</tr>
</tbody>
</table>
<ul class="pagination pagination-sm">
<li ng-class="{active:0}">
<a href="#" ng-click="firstPage()">First</a>
</li>
<li ng-repeat="n in range(ItemsByPage.length)">
<a href="#" ng-click="setPage()" ng-bind="n+1">1</a>
</li>
<li>
<a href="#" ng-click="lastPage()">Last</a>
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@section Scripts{
<script src="~/Scripts/Controller/DefultController.js"></script>
<script src="~/Scripts/Services/DefultService.js"></script>
}

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br /><br />
<div>
<div data-ng-controller="DefultController">
<div class="row" ng-init="Departmentbind(@Json.Encode(ViewBag.DepartData),@Json.Encode(ViewBag.StudentData))">
<form role="form" id="frmstudent" name="frmstudent" ng-class="{'submitted':submitted}" ng-submit="submitted=true" novalidate>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label>Name :</label>
<input data-ng-model="objstudent.Name" id="Name" name="Name" class="form-control" required />
<span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Name is Required.!</span>
</div>
<div class="form-group">
<label>BirthDate :</label>
<input type="date" data-ng-model="objstudent.BirthDate" id="Birthdate" name="Birthdate" class="form-control" required />
<span class="text-danger" ng-if="submitted && frmstudent.Name.$error.required"><i class="fa fa-exclamation-triangle"></i> Birthdate is Required.!</span>
</div>
<div class="form-group">
<label>Department :</label>
<select data-ng-model="objstudent.DepartmentId" id="DepartmentId" name="DepartmentId" class="form-control" required data-ng-options="dm.DepartmentId as dm.DepartmentName for dm in Departmentlist">
<option value="">---Select---</option>
</select>
<span class="text-danger" ng-if="submitted && objstudent.DepartmentId==''"><i class="fa fa-exclamation-triangle"></i> Department is Required.!</span>
</div>
<div class="form-group">
<label>Gender :</label>
<input type="radio" ng-model="objstudent.Gender" value="1" name="Gender1" required />Male
<input type="radio" ng-model="objstudent.Gender" value="2" name="Gender1" required />Female
<br />
<span class="text-danger" ng-if="submitted && objstudent.Gender==''"><i class="fa fa-exclamation-triangle"></i> Gender is Required.!</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" data-ng-click="frmstudent.$valid && createupdate(objstudent)">Submit</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="input-group">
<input type="text" ng-model="search" class="form-control" placeholder="Search" style="max-width: 100%;"><span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>

<br />
<table class="table table-hover">
<thead>
<tr>
<th ng-click="sort('Name')" style="cursor:pointer;">
Name <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th ng-click="sort('BirthDate')" style="cursor:pointer;">
BirthDate <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th ng-click="sort('Department')" style="cursor:pointer;">
Department <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th ng-click="sort('Gender')" style="cursor:pointer;">
Gender <i class="fa fa-sort" aria-hidden="true"></i>
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="studnt in Studentlist|filter:search|orderBy:sortKey:reverse">
<td>
{{studnt.Name}}
</td>
<td>
{{studnt.BirthDate | date : "dd-MMM-yyyy"}}
</td>
<td>
{{studnt.Department}}
</td>
<td>
{{studnt.Gender==1?"Male":"Female"}}
</td>
<td>
<a ng-click="Edit(studnt)" style="cursor:pointer;" title="Edit" data-tooltip="Edit"><i class="fa fa-edit"></i></a>
<a ng-click="Delete(studnt.StudentId)" style="cursor:pointer;" title="Delete" data-tooltip="Delete"><i class="fa fa-trash pr2"></i></a>
</td>
</tr>
<tr ng-if="Studentlist==null || Studentlist.length <=0">
<td class="col-md-4 col-md-offset-4">
<label class="text-danger">Record Not Found.</label>
</td>
</tr>
</tbody>
</table>
<ul class="pagination pagination-sm">
<li ng-class="{active:0}">
<a href="#" ng-click="firstPage()">First</a>
</li>
<li ng-repeat="n in range(ItemsByPage.length)">
<a href="#" ng-click="setPage()" ng-bind="n+1">1</a>
</li>
<li>
<a href="#" ng-click="lastPage()">Last</a>
</li>
</ul>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@section Scripts{
<script src="~/Scripts/Controller/DefultController.js"></script>
<script src="~/Scripts/Services/DefultService.js"></script>
}

----------------------------------------------------
cntrl.js
----------------------------------------------------

(function () {
angular.module("myapp", [])
.controller("DefultController", [
"$scope", "$http", "DefultService", "$filter",
function DefultController($scope, $http, DefultService, $filter) {
$scope.objstudent = {
StudentId: 0,
Name: '',
BirthDate: new Date(),
DepartmentId: '',
DepartmentName: '',
Gender: '',
}
$scope.currentPage = 0;
$scope.pageSize = 2;
$scope.createupdate = function (data) {
DefultService.CreateUpdate(data).then(function (result) {
if (result.data != null) {
alert(result.data);
window.location.href = "/Default/Index";
}
})
}
//$scope.search = function () {
// $scope.filteredList = filteredListService.searched($scope.allItems, $scope.searchText);
// if ($scope.searchText == '') {
// $scope.filteredList = $scope.allItems;
// }
// $scope.pagination();
//}
$scope.pagination = function () {
$scope.ItemsByPage = filteredListService.paged($scope.filteredList, $scope.pageSize);
};
$scope.setPage = function () {
$scope.currentPage = this.n;
};
$scope.firstPage = function () {
$scope.currentPage = 0;
};
$scope.lastPage = function () {
$scope.currentPage = $scope.ItemsByPage.length - 1;
};
$scope.range = function (input, total) {
var ret = [];
if (!total) {
total = input;
input = 0;
}
for (var i = input; i < total; i++) {
if (i != 0 && i != total - 1) {
ret.push(i);
}
}
return ret;
};

$scope.sort = function (keyname) {
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
$scope.Departmentbind = function (data, stdData) {
$scope.Departmentlist = JSON.parse(data);
$scope.Studentlist = JSON.parse(stdData);
}
$scope.Edit = function (data) {
//data.Gender = data.Gender.toString();
$scope.objstudent = angular.copy(data);
//$scope.objstudent.Name = data.Name;
$scope.objstudent.Gender = data.Gender.toString();
$scope.objstudent.BirthDate = new Date(data.BirthDate);
//$scope.objstudent.DepartmentId = data.DepartmentId;
//$scope.objstudent.DepartmentName = data.Department;

}
$scope.Delete = function (id) {
if (confirm("are you sure to delete?")) {
DefultService.Delete(id).then(function (result) {
if (result.data != null) {
alert(result.data);
window.location.href = "/Default/Index";
}
})
}
}
}]);

//.controller("DefultController", function () {
// console.log("Data");
//})
//.controller("DefultController", [
// "$scope", "$http", "DefultService", function DefultController($scope, $http, DefultService) {
// $scope.objstudent = {
// StudentId: 0,
// Name: '',
// Birthdate: '',
// DepartmentId: 0,
// DepartmentName: '',
// Gender: '',
// }
// $scope.createupdate = function (data) {

// }
// $scope.Departmentbind = function (data) {
// //DefultService.GetDepartment().then(function (result) {
// $scope.Departmentlist = data;
// //})
// }

//}]);
})()

----------------------------------------------------
service.js
----------------------------------------------------
(function () {
angular.module("myapp")
.service("DefultService", [
"$http",
function ($http) {
var listing = {};
listing.CreateUpdate = function (obj) {
return $http({
method: "POST",
url: "/Default/CreateUpdate",
data: obj
})
};
listing.Delete = function (id) {
return $http({
method: "POST",
url: "/Default/Delete?id=" + id,
})
};
return listing;
}])
})()

----------------------------------------------------
cntrl.cs
----------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using AngularJs_Demo.Models;
using Newtonsoft.Json;
using System.Web.Script.Serialization;

namespace AngularJs_Demo.Controllers
{
public class DefaultController : Controller
{
DemoEntities contextt = new DemoEntities();
// GET: Default
public ActionResult Index()
{
List<DepartmentMaster> obj = new List<DepartmentMaster>();
obj = contextt.DepartmentMasters.ToList();
var qry = contextt.StudentMasters.Join(
contextt.DepartmentMasters,
post => post.DepartmentId,
meta => meta.DepartmentId,
(post, meta) => new { Post = post, Meta = meta }).ToList();
List<StudentMaster> std = contextt.StudentMasters.Where(x => x.IsActive == true).ToList();
int i = 0;
foreach (var dpt in qry)
{
if (std.Count > 0 && std.Count > i)
{
if (std[i].DepartmentId == dpt.Meta.DepartmentId)
{
std[i].Department = dpt.Meta.DepartmentName;
i++;
}
//std[i].DepartmentName = dpt.DepartmentName;
}
}
JavaScriptSerializer json_serializer = new JavaScriptSerializer();
ViewBag.DepartData = JsonConvert.SerializeObject(obj,
Formatting.None,
new JsonSerializerSettings()
{
ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
});
ViewBag.StudentData = JsonConvert.SerializeObject(std,
Formatting.None,
new JsonSerializerSettings()
{
ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
});
return View();
}
[HttpPost]
public JsonResult CreateUpdate(StudentMaster obj)
{
int error = 0;
string msg = "";
obj.IsActive = true;
if (obj.StudentId > 0)
{
StudentMaster objstd = contextt.StudentMasters.Find(obj.StudentId);
objstd.DepartmentId = obj.DepartmentId;
objstd.Name = obj.Name;
objstd.BirthDate = obj.BirthDate;
objstd.Gender = obj.Gender;
contextt.Entry(objstd).State = System.Data.Entity.EntityState.Modified;
contextt.SaveChanges();
error = 1;
}
else
{
contextt.StudentMasters.Add(obj);
contextt.SaveChanges();
error = 1;
}
if (error == 1)
{
msg = "Data Saved Successfully.";
}
else
{
msg = "Data Not Saved.";
}
return Json(msg);
}
public JsonResult Delete(int id)
{
int error = 0;
string msg = "";
if (id > 0)
{
StudentMaster objstd = contextt.StudentMasters.Find(id);
objstd.IsActive = false;
contextt.Entry(objstd).State = System.Data.Entity.EntityState.Modified;
contextt.SaveChanges();
error = 1;
}
if (error == 1)
{
msg = "Data Deleted Successfully.";
}
else
{
msg = "Data Not Deleted.";
}
return Json(msg);
}
}
}

Hitesh Patel

Tuesday, March 28, 2017

Angular js Demo

No comments:

Post a Comment

Demo for Repository Pattern in ASP.Net

Search This Blog