Controller Code :
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication39.Models;
namespace WebApplication39.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult Save(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
var file = Request.Files[0];
file.SaveAs(Server.MapPath("~/Image/" + Path.GetFileName(file.FileName)));
emp.PATH = Path.GetFileName(file.FileName);
obj.Entry(emp).State = EntityState.Added;
obj.SaveChanges();
return Json("Data Saved.", JsonRequestBehavior.AllowGet);
}
}
[HttpPost]
public JsonResult Update(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
var file = Request.Files[0];
file.SaveAs(Server.MapPath("~/Image/" + Path.GetFileName(file.FileName)));
emp.PATH = Path.GetFileName(file.FileName);
obj.Entry(emp).State = EntityState.Modified;
obj.SaveChanges();
return Json("Data Updated.", JsonRequestBehavior.AllowGet);
}
}
[HttpGet]
public JsonResult Delete(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == EID);
obj.EMPs.Remove(emp1);
obj.SaveChanges();
return Json("Data Deleted.", JsonRequestBehavior.AllowGet);
}
}
[HttpGet]
[OutputCache(Duration=0)]
public JsonResult Gets()
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.EMPs.ToList(),JsonRequestBehavior.AllowGet);
}
}
[HttpGet]
public JsonResult Get(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.EMPs.SingleOrDefault(m=>m.EID==EID), JsonRequestBehavior.AllowGet);
}
}
}
}
View Code :
@{
ViewBag.Title = "Index";
}
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Service.js"></script>
<h2>Jay Jagannath...</h2>
<div class="container" ng-app="app" ng-controller="ctr">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-lg-4">EID</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.EID" id="tb"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">NAME</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.NAME" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">PHOTE</label>
<div class="col-lg-4">
<img id="ph" src="#" alt="Upload Image" height="100" width="100" />
<input type="file" class="form-control" ng-model="EMP.PATH" id="PATH" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-4">
<input type="button" value="Save" class="btn btn-primary" ng-click="save()" style="width:80px" />
<input type="button" value="Update" class="btn btn-primary" ng-click="update()" style="width:80px" />
<input type="button" value="Reset" class="btn btn-primary" ng-click="reset()" style="width:80px" />
</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>PHOTO</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in list">
<td>{{c.EID}}</td>
<td>{{c.NAME}}</td>
<td><img height="50" width="50" src="~/Image/{{c.PATH}}" /></td>
<td>
<a ng-click="edit(c)">Edit</a>|<a ng-click="del(c)">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
angular code :
/// <reference path="jquery-1.10.2.js" />
/// <reference path="angular.js" />
angular.module("app", [])
.controller("ctr", function ($scope, EmpService) {
function CLR()
{
$scope.EMP = new emp();
$('#ph').attr('src', '');
$('#PATH').val('');
$('#tb').focus();
} CLR();
function fill()
{
EmpService.Gets().then(function (d) {
$scope.list = d.data;
});
} fill();
$scope.save = function ()
{
var formData = new FormData();
var file = document.getElementById("PATH").files[0];
formData.append("PATH", file);
formData.append("EID", $scope.EMP.EID);
formData.append("NAME", $scope.EMP.NAME);
EmpService.Save(formData).then(function (d) {
alert(d.data);
CLR();
fill();
});
}
$scope.update = function () {
var formData = new FormData();
var file = document.getElementById("PATH").files[0];
formData.append("PATH", file);
formData.append("EID", $scope.EMP.EID);
formData.append("NAME", $scope.EMP.NAME);
EmpService.Update(formData).then(function (d) {
alert(d.data);
CLR();
fill();
});
}
$scope.del = function (s)
{
if (confirm('Do you want to delte it ?'))
{
EmpService.Delete(s.EID).then(function (d) {
alert(d.data);
fill();
});
}
}
$scope.edit = function (s)
{
EmpService.Get(s.EID).then(function (d) {
$scope.EMP = d.data;
$('#ph').attr('src', '/Image/' + d.data.PATH);
$('#PATH').val(d.data.PATH);
});
}
$scope.reset = function ()
{
CLR();
}
$('#PATH').change(function () {
DispyaImg(this);
});
function DispyaImg(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#ph').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
})
.factory("EmpService", function ($http) {
var fac = {};
fac.Save=function(EMP)
{
var config = {
headers: {
'Content-Type': 'multipart/form-data;charset=utf-8;'
}
}
return $http.post("/Home/Save", EMP, config);
}
fac.Update = function (EMP) {
var config = {
headers: {
'Content-Type': 'multipart/form-data;charset=utf-8;'
}
}
return $http.post("/Home/Update", EMP, config);
}
fac.Delete = function (EID)
{
return $http.get("/Home/Delete?EID="+EID);
}
fac.Gets = function ()
{
return $http.get("/Home/Gets");
}
fac.Get = function (EID)
{
return $http.get("/Home/Get?EID="+EID);
}
return fac;
});
function emp()
{
return {
EID: null,
NAME: null,
PATH:null
}
}
No comments:
Post a Comment