CURD opration using knockout,MVC and MVVM

CONTROLLER


using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication13.Models;

using System.Data.Entity;

namespace MvcApplication13.Controllers



{

public class HomeController : Controller



{

//

// GET: /Home/

public ActionResult Index()



{

return View();



}

public JsonResult Gets()



{

using (Database1Entities obj = new Database1Entities())



{

return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);



}

}

public JsonResult Get(int Id)



{

using (Database1Entities obj = new Database1Entities())



{

return Json(obj.EMPs.SingleOrDefault(m => m.EID == Id), JsonRequestBehavior.AllowGet);



}

}

public JsonResult Save(EMP emp)



{

using (Database1Entities obj = new Database1Entities())



{

obj.Entry(emp).State = EntityState.Added;



obj.SaveChanges();

return Json("Data Saved", JsonRequestBehavior.AllowGet);



}

}

public JsonResult Update(EMP emp)



{

using (Database1Entities obj = new Database1Entities())



{

obj.Entry(emp).State = EntityState.Modified;



obj.SaveChanges();

return Json("Data Updated", JsonRequestBehavior.AllowGet);



}

}

public JsonResult Delete(EMP emp)



{

using (Database1Entities obj = new Database1Entities())



{

obj.Entry(emp).State = EntityState.Deleted;



obj.SaveChanges();

return Json("Data Deleted", JsonRequestBehavior.AllowGet);



}

}

}

}


vIEW


<link href="~/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />

<link href="~/bootstrap-3.3.5-dist/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.1.4.min.js"></script>

<script src="~/Scripts/knockout-3.3.0 (1).js"></script>

<br /><br /><br />

<div class="container">


<form class="form-horizontal">


<div class="form-group">


<label class="col-lg-3 control-label">EID</label>


<div class="col-lg-9">


<input type="text" id="tb" class="form-control" data-bind="value:EMP.EID" />


</div>


</div>


<div class="form-group">


<label class="col-lg-3 control-label">NAME</label>


<div class="col-lg-9">


<input type="text" class="form-control" data-bind="value:EMP.NAME" />


</div>


</div>


<div class="form-group">


<label class="col-lg-3 control-label"></label>


<div class="col-lg-9">


<input type="button" id="btn" value="Save" class="btn btn-primary" data-bind="click:save" />


<input type="button" id="btn" value="Update" class="btn btn-primary" data-bind="click:update" />


<input type="button" id="btn" value="Reset" class="btn btn-primary" data-bind="click:reset" />


</div>


</div>


<div class="row">


<table class="table table-bordered table-hover table-responsive table-striped">


<thead class="bg-primary">


<tr>


<th>EID</th>


<th>NAME</th>


<th>UPDATE</th>


<th>DELETE</th>


</tr>


</thead>


<tbody data-bind="foreach:list">


<tr>


<td data-bind="text:EID"></td>


<td data-bind="text:NAME"></td>


<td><a href="#" data-bind="click:$root.edit">Edit</a></td>


<td><a href="#" data-bind="click:$root.del">Delete</a></td>


</tr>


</tbody>


</table>


</div>


</form>

</div>

<script type="text/javascript">


$(function () {

function emp()






{


var self = this;






self.EID = ko.observable();


self.NAME = ko.observable();


}


function x()






{


var self = this;

self.EMP = new emp();






self.list = ko.observableArray();


self.save = function ()






{


$.ajax({


url: '/Home/Save',

type: 'Post',

cache: false,






data:self.EMP,


success: function (data) {






alert(data);


fill();


clear();


}


});


}


self.update = function () {






$.ajax({


url: '/Home/Update',

type: 'Post',

cache: false,






data: self.EMP,


success: function (data) {






alert(data);


fill();


clear();


}


});


}


self.reset = function () {






clear();


}


self.edit = function (n)






{


$.ajax({


url: '/Home/Get',

type: 'Post',

cache: false,






data: {Id:n.EID},


success: function (data) {






self.EMP.EID(data.EID);


self.EMP.NAME(data.NAME);


}


});


}


self.del=function(n)






{


if (confirm('Do you want to delete it ?'))






{


$.ajax({


url: '/Home/Delete',

type: 'Post',

cache: false,






data: n,


success: function (data) {






alert(data);


fill();


}


});


}


}


function fill()






{


$.ajax({


url: '/Home/Gets',

type: 'Get',

cache: false,

success: function (data)






{


self.list(data);


}


});


} fill();


function clear()






{


self.EMP.EID('');

self.EMP.NAME('');

$('#tb').focus();






} clear();


}


ko.applyBindings(new x());






});


</script>