using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using WebApplication21.Models;
namespace WebApplication21.Controllers
{
public class EmpController : ApiController
{
[HttpGet]
public List<EMP> Gets()
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.ToList();
}
}
[HttpGet]
public EMP Get(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.SingleOrDefault(m => m.EID == EID);
}
}
[HttpPost]
public string Post(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
obj.EMPs.Add(emp);
obj.SaveChanges();
return "Data Saved";
}
}
[HttpPut]
public string Put(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);
emp1.NAME = emp.NAME;
obj.SaveChanges();
return "Data Updated";
}
}
[HttpDelete]
public string Delete(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == EID);
obj.EMPs.Remove(emp1);
obj.SaveChanges();
return "Data Deleted";
}
}
}
}
View code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/ui-bootstrap-csp.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<br /><br />
<div class="container">
<form name="frmEmp" novalidate class="form-horizontal">
<div class="form-group" ng-class="{'has-error':frmEmp.txtEid.$invalid,'has-success':frmEmp.txtEid.$valid}">
<label class="col-lg-4 control-label">EID</label>
<div class="col-lg-4">
<input type="text" ng-required="frmEmp.txtEid.$invalid" name="txtEid" class="form-control" ng-model="EMP.EID" />
</div>
<span class="has-error help-block" ng-show="frmEmp.txtEid.$invalid">
Eid should not be blank.
</span>
</div>
<div class="form-group" ng-class="{'has-error':frmEmp.txtName.$invalid,'has-success':frmEmp.txtName.$valid}">
<label class="col-lg-4 control-label">NAME</label>
<div class="col-lg-4">
<input type="text" name="txtName" class="form-control" ng-required="frmEmp.txtName.$invalid" ng-model="EMP.NAME" />
</div>
<span class="has-error help-block" ng-show="frmEmp.txtName.$invalid">
Name should not be blank.
</span>
</div>
<div class="form-group">
<label class="col-lg-4"></label>
<div class="col-lg-4">
<input type="button" value="Save" style="width:80px" class="btn btn-primary" ng-click="save()" />
<input type="button" value="Update" style="width:80px" class="btn btn-primary" ng-click="update()" />
<input type="button" value="Reset" style="width:80px" class="btn btn-primary" ng-click="reset()" />
</div>
</div>
<div class="form-group" >
<label class="col-lg-1 control-label">SEARCH</label>
<div class="col-lg-2">
<input type="text" placeholder="Search" uib-typeahead="c.NAME for c in list | filter:$viewValue | limitTo:8" ng-model="search" class="form-control" />
</div>
</div>
<div class="row">
<table class="table table-bordered table-condensed table-hover table-responsive table-striped">
<thead class="bg-primary">
<tr>
<th>EID</th>
<th>NAME</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in list|filter:search">
<td>{{c.EID}}</td>
<td>{{c.NAME}}</td>
<td>
<a ng-click="edit(c.EID)">Edit</a>|<a ng-click="del(c.EID)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
angular.module("app", ['ui.bootstrap'])
.controller("ctrl", function ($scope, myFactory) {
function CLR()
{
$scope.EMP = new emp();
} CLR();
function fill()
{
myFactory.Gets().then(function (response) {
$scope.list = response.data;
});
} fill();
$scope.save = function ()
{
myFactory.Save($scope.EMP).then(function (response) {
alert(response.data);
fill();
CLR();
});
}
$scope.edit = function (s)
{
myFactory.Get(s).then(function (response) {
$scope.EMP = response.data;
});
}
$scope.update = function () {
myFactory.Update($scope.EMP).then(function (response) {
alert(response.data);
fill();
CLR();
});
}
$scope.del = function (s) {
if (confirm('Do you want to delete it ?'))
{
myFactory.Delete(s).then(function (response) {
alert(response.data);
fill();
});
}
}
$scope.reset = function () {
CLR();
}
})
.factory("myFactory",function ($http) {
var fac = {};
fac.Gets = function ()
{
return $http.get('http://localhost:64633/api/Emp/Gets');
};
fac.Get = function (s) {
return $http.get('http://localhost:64633/api/Emp/Get?EID='+s);
};
fac.Save = function (emp) {
return $http.post('http://localhost:64633/api/Emp/Post', emp);
};
fac.Update = function (emp) {
return $http.put('http://localhost:64633/api/Emp/Put', emp);
};
fac.Delete = function (EID) {
return $http.delete('http://localhost:64633/api/Emp/Delete?EID='+EID);
};
return fac;
});
function emp()
{
return {
EID: null,
NAME:null
};
}
</script>
Auto complete example in jquery
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete multiselect jquery Example</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" />
<link href="css/style.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="Scripts/autocomplete.multiselect.js"></script>
</head>
<body>
<div class="main-div">
<h2>Autocomplete multiselect jquery Example</h2>
<input id="myAutocompleteMultiple" type="text" />
</div>
<input type="button" value="Save" id="btn1" style="width:80px" />
<script type="text/javascript">
$(function(){
$('#btn1').click(function () {
$('.ui-autocomplete-multiselect').find('.ui-autocomplete-multiselect-item').each(function (i, j) {
alert($(j).text());
});
});
var availableTags = [
"Laravel",
"Bootstrap",
"Server",
"JavaScript",
"JQuery",
"Perl",
"PHP",
"Python",
"Ruby",
"API",
"Scheme"
];
$('#myAutocompleteMultiple').autocomplete({
source: availableTags,
multiselect: true
});
});
</script>
</body>
</html>
Press Me
No comments:
Post a Comment