CURD opration in knockout,MVC and MVVM some more control

Controller :


using System;


using System.Collections.Generic;


using System.Linq;


using System.Web;


using System.Web.Mvc;


using MvcApplication14.Models;


using System.Data.Entity;


namespace MvcApplication14.Controllers






{


public class HomeController : Controller





{





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.Single(m=>m.EID==Id), JsonRequestBehavior.AllowGet);






}


}


public JsonResult Getc()






{


using (Database1Entities obj = new Database1Entities())






{


List<COUNTRY> lst = new List<COUNTRY>(){

new COUNTRY(){ CID=0, CNAME="Select"}






};


return Json(lst.Union(obj.COUNTRies.ToList()), 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 :


@{


ViewBag.Title = "Index";






}


<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>

<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" class="form-control" id="tb" 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">ADDRESS</label>


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


<textarea class="form-control" data-bind="value:EMP.ADDRESS"></textarea>


</div>


</div>


<div class="form-group">


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


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


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


</div>


</div>


<div class="form-group">


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


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


<input type="radio" data-bind="checked:EMP.GENDER,value:'Male'" />Male

<input type="radio" data-bind="checked:EMP.GENDER,value:'Female'" />Female

</div>


</div>


<div class="form-group">


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


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


<select class="form-control" data-bind="options:ddl, optionsValue:'CID', optionsText:'CNAME',value:EMP.CID">


</select>


</div>


</div>


<div class="form-group">


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


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


<input type="button" value="Save" class="btn btn-primary" style="width:80px" data-bind="click:save" />


<input type="button" value="Update" class="btn btn-primary" style="width:80px" data-bind="click:update" />


<input type="button" value="Reset" class="btn btn-primary" style="width:80px" 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();


self.ADDRESS = ko.observable();


self.PASSWORD = ko.observable();


self.GENDER = ko.observable();


self.CID = ko.observable();


}


function x()






{


var self = this;

self.EMP = new emp();






self.list = ko.observableArray();


self.ddl = ko.observableArray();


self.save = function ()






{


$.ajax({


url: '/Home/Save',

cache: false,

type: 'Post',






data:self.EMP,


success: function (data) {






alert(data);


fill();


clear();


}


});


}


self.edit = function (n)






{





$.ajax({


url: '/Home/Get',

cache: false,

type: 'Post',






data: {Id:n.EID},


success: function (data) {






self.EMP.EID(data.EID);


self.EMP.NAME(data.NAME);


self.EMP.ADDRESS(data.ADDRESS);


self.EMP.GENDER(data.GENDER);


self.EMP.PASSWORD(data.PASSWORD);


self.EMP.CID(data.CID);


}


});


}


self.update = function () {






$.ajax({


url: '/Home/Update',

cache: false,

type: 'Post',






data: self.EMP,


success: function (data) {






alert(data);


fill();


clear();


}


});


}


self.reset = function () {






clear();


}


self.del = function (n)






{


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






{


$.ajax({


url: '/Home/Delete',

cache: false,

type: 'Post',






data: n,


success: function (data) {






alert(data);


fill();


clear();


}


});


}


}


$.ajax({


url: '/Home/Getc',

cache: false,

type: 'Get',

success: function (data)






{


self.ddl(data);


}


});


function fill()






{


$.ajax({


url: '/Home/Gets',

cache: false,

type: 'Get',

success: function (data) {






self.list(data);


}


});


} fill();


function clear()






{


self.EMP.EID('');

self.EMP.NAME('');

self.EMP.ADDRESS('');

self.EMP.GENDER('');

self.EMP.PASSWORD('');

self.EMP.CID('');

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






}


}


ko.applyBindings(new x());






});


</script>