Hitesh Patel: 2017

Thursday, March 30, 2017

Cart system with angular js

------------------------------------------
Cntrl.cs
------------------------------------------
public class CartController : Controller
{
DemoEntities context = new DemoEntities();
// GET: Cart
public ActionResult Index()
{
ViewBag.Productlist = context.ProductMasters.ToList();
return View();
}
public ActionResult CartView()
{
return View();
}
}
------------------------------------------
srvc.js
------------------------------------------
(function () {
angular.module("myapp").service("CartService", ["$http", function ($http) {

var listing = [];
listing.GetAllProduct = function () {
return $http({
method: "Post",
url: "",
data: "",
})
}
}])
})();
------------------------------------------
Cntrl.js
------------------------------------------
(function () {
angular.module("myapp", []).controller("CartCntrl", ["$scope", "$http", "CartService", function CartCntrl($scope, $http, CartService) {
$scope.cartlist = JSON.parse(localStorage.getItem("Cart")) == null ? [] : JSON.parse(localStorage.getItem("Cart"));
$scope.cartviewlist = [];
$scope.price = 0;
$scope.counting = 0
$scope.GetProduct = function (data) {
$scope.Productlist = angular.copy(data);
$.each($scope.cartlist, function (index, value) {
$scope.price += parseInt(value.Price);
$scope.counting += parseInt(value.Quantity);
})
}

$scope.AddCart = function (data) {
var Cart = [];
if (localStorage.length > 0) {
$scope.cartlist = JSON.parse(localStorage.getItem("Cart"));
}
if ($scope.counting != data.Quantity) {
$scope.cartlist.push({
ProductName: data.ProductName,
ProductImage: data.ProductImage,
ProductDesc: data.ProductDesc,
Price: data.Price,
Quantity: 1,
OrignalPrice: data.Price,
OrignalQuantity: data.Quantity
});
$scope.price += parseInt(data.Price);
$scope.counting++;
$scope.priceing = $scope.price;
$scope.counteing = $scope.counting;
localStorage.setItem("Cart", JSON.stringify($scope.cartlist))
} else {
alert("Maximum " + data.Quantity + " Allowed.");
}
}
function counttotal() {
$scope.priceing = 0;
$scope.counteing = 0;
$.each($scope.cartviewlist, function (index, value) {
$scope.priceing += parseInt(value.Price);
$scope.counteing += parseInt(value.Quantity);
})
}
$scope.ViewCartData = function () {
$scope.cartlist = JSON.parse(localStorage.getItem("Cart"));
var isDuplicate = false;
$.each($scope.cartlist, function (index, value) {
var data = jQuery.grep($scope.cartviewlist, function (val, cartindex) {
if (val.ProductName == value.ProductName) {
$scope.cartviewlist[cartindex].Quantity += 1;
$scope.cartviewlist[cartindex].Price += value.Price;
}
return val.ProductName == value.ProductName
});
if (data.length <= 0) {
$scope.cartviewlist.push(value);
}
counttotal();
});
}

//$scope.ViewCartData();
$scope.removeitem = function (index) {
$scope.cartviewlist[index].Quantity = $scope.cartviewlist[index].Quantity - 1;
$scope.cartviewlist[index].Price = $scope.cartviewlist[index].Price - $scope.cartviewlist[index].OrignalPrice;
localStorage.setItem("Cart", JSON.stringify($scope.cartviewlist));
counttotal();

//$scope.cartviewlist[index].Price = $scope.cartviewlist[index].Quantity - 1;
}
$scope.additem = function (index) {
$scope.cartviewlist[index].Quantity = $scope.cartviewlist[index].Quantity + 1;
$scope.cartviewlist[index].Price = $scope.cartviewlist[index].Price + $scope.cartviewlist[index].OrignalPrice;
localStorage.setItem("Cart", JSON.stringify($scope.cartviewlist));
counttotal();

//$scope.cartviewlist[index].Price = $scope.cartviewlist[index].Quantity - 1;
}
$scope.Remove = function (index) {
$scope.cartviewlist.splice(index, 1);
localStorage.setItem("Cart", JSON.stringify($scope.cartviewlist));
counttotal();
}

}])
})();
------------------------------------------
Index.cshtml
------------------------------------------

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br /><br />
<div data-ng-controller="CartCntrl">
<div data-ng-init="GetProduct(@Json.Encode(ViewBag.Productlist))">
<table class="table table-bordered">
<thead>
<tr>
<th>
Sr.
</th>
<th>
Image
</th>
<th>
ProductName
</th>
<th>
ProductDesc
</th>
<th>
Price
</th>
<th>
Quantity
</th>
<th>
<a href="/Cart/CartView"><b>{{counting}} items, Rs.{{price}}</b></a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Productlist" ng-if="Productlist.length >0">
<td>
{{$index+1}}
</td>
<td>
<img src="~/Content/Img/{{item.ProductImage}}" />
</td>
<td>
{{item.ProductName}}
</td>
<td>
{{item.ProductDesc}}
</td>
<td>
{{item.Price}}
</td>
<td>
{{item.Quantity}}
</td>
<td>
<a href="#" ng-click="AddCart(item)">Add To Cart</a>
</td>
</tr>
<tr ng-if="Productlist.length <= 0" class="text-danger">
<td colspan="8"> <span class="text-danger text-center"> Record not found.</span> </td>
</tr>
</tbody>
</table>
</div>
</div>
@section Scripts{
<script src="~/Scripts/Controller/CartCntrl.js"></script>
<script src="~/Scripts/Services/CartService.js"></script>
@*<script>
$(window).load(function () {
localStorage.removeItem("Cart");
})
</script>*@
}
------------------------------------------
cartview.cshtml
------------------------------------------

@{
ViewBag.Title = "CartView";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br /><br />
<div ng-controller="CartCntrl">
<div ng-init="ViewCartData()">
<div>
<a href="/Cart/Index" class="btn btn-primary">Back</a>
</div>
<br />
<table class="table table-bordered">
<thead>
<tr>
<th>
Sr.
</th>
<th>
ProductName
</th>
<th>
Price
</th>
<th>
Quantity
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in cartviewlist" ng-if="cartviewlist.length >0">
<td>
{{$index+1}}
</td>
<td>
{{item.ProductName}}
</td>
<td>
Rs.{{item.Price}}
</td>
<td>
{{item.Quantity}} <a ng-if="item.Quantity<item.OrignalQuantity" class="btn btn-default" ng-click="additem($index)">+</a><a class="btn btn-default" ng-if="item.Quantity>1" ng-click="removeitem($index)">-</a>
</td>
<td>
<a href="#" ng-click="Remove($index)">X</a>
</td>
</tr><tr>
<td>
</td>
<td>
</td>
<td>
Rs.{{priceing}}
</td>
<td>
{{counteing}}
</td>
</tr>
<tr ng-if="cartviewlist.length <= 0" class="text-danger">
<td colspan="8"> <span class="text-danger text-center"> Record not found.</span> </td>
</tr>
</tbody>
</table>
</div>
</div>
@section Scripts{
<script src="~/Scripts/Controller/CartCntrl.js"></script>
<script src="~/Scripts/Services/CartService.js"></script>
}
------------------------------------------
table
------------------------------------------
ProductId int Unchecked
ProductName varchar(50) Unchecked
ProductDesc nvarchar(200) Checked
ProductImage nvarchar(50) Checked
Price decimal(18, 2) Unchecked
Quantity int Unchecked

Tuesday, March 28, 2017

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);
}
}
}

MVC Jquery

---controller---------

Elaunch_DemoEntities context = new Elaunch_DemoEntities();
// GET: Employee
public ActionResult Index(int id=0)
{
return View();
}
public bool submitData(EmployeeMaster obj)
{
try
{
context.EmployeeMasters.Add(obj);
context.SaveChanges();
return true;
}
catch(Exception)
{
return false;
}
}
public JsonResult GetAll()
{
List<EmployeeMaster> emp = context.EmployeeMasters.ToList();
return Json(emp, JsonRequestBehavior.AllowGet);
}
public JsonResult GetbyId(int id)
{
var emp = context.EmployeeMasters.Find(id);
return Json(emp, JsonRequestBehavior.AllowGet);
}
public JsonResult Update(EmployeeMaster emp)
{
context.Entry(emp).State = System.Data.Entity.EntityState.Modified;
context.SaveChanges();
return Json(emp, JsonRequestBehavior.AllowGet);
}
public JsonResult Delete(int Id)
{
EmployeeMaster emp = context.EmployeeMasters.Find(Id);
context.EmployeeMasters.Remove(emp);
context.SaveChanges();
return Json(emp, JsonRequestBehavior.AllowGet);
}

---------Index---------------

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<h2>Index</h2>
<div class="container">
<div class="form-group" hidden>
<label for="EmployeeId">ID</label>
<input type="text" class="form-control" id="Id" name="Id" placeholder="Id" />
</div>
<div class="form-group">
<span>Name:</span>
<input type="text" class="form-control" id="Name" name="Name" />
</div>
<div class="form-group">
<span>City:</span>
<input type="text" class="form-control" id="City" name="City" data-valmsg-for="Address" />
</div>
<div class="form-group">
<span>Address:</span>
<input type="text" id="Address" class="form-control" name="Address" data-valmsg-for="Address" />
</div>
<div class="form-group">
<span>CreatedDate:</span>
<input type="date" id="CreatedDate" class="form-control" name="CreatedDate" data-valmsg-for="Address" />
</div>
<div class="form-group">
<span>Male:</span> <input checked="checked" id="Gender" name="Gender" type="radio" value="Male" />
<span>Female:</span> <input id="Gender" name="Gender" type="radio" value="Female" />
</div>
<div class="form-group">
<button type="button" class="btn btn-success" id="btnAdd" onclick="return submitData()">Add</button>
<button type="button" class="btn btn-success" id="btnUpdate" style="display:none;" onclick="return Update();">Update</button>
</div>
@* <input type="button" class="btn btn-success" id="Submit" value="Submit" onclick="submitData()" />*@
</div>
<div>
<table id="resultTable" class="table table-bordered table-hover"></table>
</div>
<script type="text/javascript">
getData();
function submitData() {
var res = validate();
if (res == false) {
return false;
}
var data = {
Id: $('#Id').val(),
Name: $("#Name").val(),
City: $("#City").val(),
Address: $("#Address").val(),
CreatedDate: $("#CreatedDate").val(),
Gender: $("#Gender").val()
}
$.ajax({
type: "POST",
url: '@Url.Action("SubmitData", "Employee")',
data: data,
success: function (res) {
if (res) {
getData();
//$("#Id").val('');
$("#Name").val('');
$("#City").val('');
$("#Address").val('');
$("#CreatedDate").val('');
$("#Gender").val('');
}
}
});
}
function getData() {
$.ajax({
type: "GET",
url: '@Url.Action("GetAll", "Employee")',
success: function (result) {
debugger
var data = '<tr><th>Sr.no</th><th>Name</th><th>City</th><th>Address</th><th>CreatedDate</th><th>Gender</th><th></th></tr>';
for (var i = 0; i < result.length; i++) {
data += '<tr><td>' + result[i].Id + '</td><td>' + result[i].Name + '</td><td>' + result[i].City + '</td><td>' + result[i].Address + '</td><td>' + ConvertDate(result[i].CreatedDate,"dd-mm-yyyy") + '</td><td>' + result[i].Gender + '</td><td><a href="#" onclick="getbyID(' + result[i].Id + ')">Edit</a> | <a href="#" onclick="Delele(' + result[i].Id + ')">Delete</a></td></tr>'
}
$("#resultTable").html(data)
}
});
}
function ConvertDate(data, format) {
if (data == null) return '';
var r = /\/Date$([0-9]+)$\//gi
var matches = data.match(r);
if (matches == null) return '';
var result = matches.toString().substring(6, 19);
var epochMilliseconds = result.replace(
/^\/Date$([0-9]+)([+-][0-9]{4})?$\/$/,
'$1');
var b = new Date(parseInt(epochMilliseconds));
var c = new Date(b.toString());
var curr_date = c.getDate();
var curr_month = c.getMonth() + 1;
var curr_year = c.getFullYear();
var curr_h = c.getHours();
var curr_m = c.getMinutes();
var curr_s = c.getSeconds();
var curr_offset = c.getTimezoneOffset() / 60
//var d = curr_month.toString() + '/' + curr_date + '/' + curr_year;
//return d;
return format.replace('mm', curr_month).replace('dd', curr_date).replace('yyyy', curr_year);
}
function getbyID(EmpID) {
$('#Name').css('border-color', 'lightgrey');
$('#City').css('border-color', 'lightgrey');
$('#Address').css('border-color', 'lightgrey');
$('#CreatedDate').css('border-color', 'lightgrey');
$("#Gender").css('border-color', 'lightgrey');
$.ajax({
//url: '@Url.Action("SubmitData", "Employee")',
url: "/Employee/getbyID/" + EmpID,
type: "GET",
contentType: "application/json;charset=UTF-8",
//dataType: "json",
success: function (result) {
$('#Id').val(result.Id);
$('#Name').val(result.Name);
$('#City').val(result.City);
$('#Address').val(result.Address);
$('#CreatedDate').val(result.CreatedDate);
$('#Gender').val(result.Gender);
//$('#Submit').show();
$('#btnUpdate').show();
$('#btnAdd').hide();
},
});
return false;
}
//function for updating employee's record
function Update() {
var res = validate();
if (res == false) {
return false;
}
var empObj = {
Id: $('#Id').val(),
Name: $('#Name').val(),
City: $('#City').val(),
Address: $('#Address').val(),
CreatedDate: $('#CreatedDate').val(),
Gender: $('#Gender').val()
};
$.ajax({
url: "/Employee/Update",
data: JSON.stringify(empObj),
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (result) {
getData();
$('#Id').val("");
$('#Name').val("");
$('#City').val("");
$('#Address').val("");
$('#CreatedDate').val("");
$('#Gender').val("");
}
});
}
//function for deleting employee's record
function Delele(ID) {
var ans = confirm("Are you sure you want to delete this Record?");
if (ans) {
$.ajax({
url: "/Employee/Delete/" + ID,
type: "POST",
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (result) {
loadData();
}
});
}
}
function validate() {
var isValid = true;
if ($('#Name').val().trim() == "") {
$('#Name').css('border-color', 'Red');
isValid = false;
}
else {
$('#Name').css('border-color', 'lightgrey');
}
if ($('#City').val().trim() == "") {
$('#City').css('border-color', 'Red');
isValid = false;
}
else {
$('#City').css('border-color', 'lightgrey');
}
if ($('#Address').val().trim() == "") {
$('#Address').css('border-color', 'Red');
isValid = false;
}
else {
$('#Address').css('border-color', 'lightgrey');
}
if ($('#CreatedDate').val().trim() == "") {
$('#CreatedDate').css('border-color', 'Red');
isValid = false;
}
else {
$('#CreatedDate').css('border-color', 'lightgrey');
}
if ($('#Gender').val().trim() == "") {
$('#Gender').css('border-color', 'Red');
isValid = false;
}
else {
$('#Gender').css('border-color', 'lightgrey');
}
return isValid;
}
</script>

Hitesh Patel

Thursday, March 30, 2017

Cart system with angular js

Tuesday, March 28, 2017

Angular js Demo

MVC Jquery

Demo for Repository Pattern in ASP.Net

Search This Blog