Controller Code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication5.Models;
using System.Data.Entity;
namespace MvcApplication5.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetE()
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);
}
}
public JsonResult Get(int eid)
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.EMPs.ToList().SingleOrDefault(m=>m.EID==eid), JsonRequestBehavior.AllowGet);
}
}
public JsonResult GetH()
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.HOBBies.ToList(), JsonRequestBehavior.AllowGet);
}
}
public JsonResult GetI()
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.INTERESTs.ToList(), JsonRequestBehavior.AllowGet);
}
}
public JsonResult GetC()
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.COUNTRies.ToList(), JsonRequestBehavior.AllowGet);
}
}
public JsonResult GetS(int id)
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.STATEs.Where(m=>m.CID==id).ToList(), JsonRequestBehavior.AllowGet);
}
}
public JsonResult GetSn(int id)
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.STATEs.SingleOrDefault(m => m.SID == id).SNAME, JsonRequestBehavior.AllowGet);
}
}
public JsonResult Post(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(emp).State = EntityState.Added;
obj.SaveChanges();
return Json("Data Saved.", JsonRequestBehavior.AllowGet);
}
}
public JsonResult Put(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(emp).State = EntityState.Modified;
obj.SaveChanges();
return Json("Data Updated.", JsonRequestBehavior.AllowGet);
}
}
public JsonResult Delete(int eid)
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(obj.EMPs.SingleOrDefault(m=>m.EID==eid)).State = EntityState.Deleted;
obj.SaveChanges();
return Json("Data Deleted.", JsonRequestBehavior.AllowGet);
}
}
}
}
View Code :
<link href="~/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="~/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="~/Scripts/knockout-3.3.0 (1).js"></script>
<div class="container ">
<div class="row form-group">
<div class="col-lg-3">EID</div>
<div class="col-lg-9">
<input type="text" class="form-control" data-bind="value:EID" id="tb" />
</div>
</div>
<div class="row">
<div class="col-lg-3">NAME</div>
<div class="col-lg-9">
<input type="text" class="form-control" data-bind="value:NAME" />
</div>
</div>
<div class="row">
<div class="col-lg-3">ADDRESS</div>
<div class="col-lg-9">
<textarea class="form-control" data-bind="value:ADDRESS"></textarea>
</div>
</div>
<div class="row">
<div class="col-lg-3">GENDER</div>
<div class="col-lg-9">
<input type="radio" name="rb" value="Male" data-bind="checked:GENDER" />Male
<input type="radio" name="rb" value="Female" data-bind="checked:GENDER" />Female
</div>
</div>
<div class="row">
<div class="col-lg-3">PASSWORD</div>
<div class="col-lg-9">
<input type="password" class="form-control" data-bind="value:PASSWORD" />
</div>
</div>
<div class="row">
<div class="col-lg-3">HOBBY</div>
<div class="col-lg-9">
<div id="dv" style="list-style:none" data-bind="foreach:listh">
<li>
<input type="checkbox" data-bind="value:HID" /><span data-bind="text:HNAME"></span>
</li>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">INTEREST</div>
<div class="col-lg-9">
<select class="form-control" id="ddl" size="3" multiple="multiple" data-bind="options:listi, optionsText:'INAME', optionsValue:'IID', value:ddll"></select>
</div>
</div>
<div class="row">
<div class="col-lg-3">COUNTRY</div>
<div class="col-lg-9">
<select class="form-control" id="ddl1" data-bind="options:listc, optionsValue:'CID', optionsText:'CNAME', value:ddlco, optionsCaption:'Select' "></select>
</div>
</div>
<div class="row">
<div class="col-lg-3">STATE</div>
<div class="col-lg-9">
<select class="form-control" id="ddl2" data-bind="options:lists,optionsValue:'SID', optionsText:'SNAME', value:ddl2,optionsCaption:'Select'"></select>
</div>
</div>
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-9">
<input type="button" class="btn btn-primary" value="Save" data-bind="click:save" />
<input type="button" class="btn btn-primary" value="Update" data-bind="click:update" />
<input type="button" class="btn btn-primary" value="Reset" data-bind="click:reset" />
</div>
</div>
<div class="row table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead class="bg-primary">
<tr>
<th>EID</th>
<th>NAME</th>
<th>ADDRESS</th>
<th>GENDER</th>
<th>UPDATE</th>
<th>DELETE</th>
</tr>
</thead>
<tbody data-bind="foreach:liste">
<tr>
<td data-bind="text:EID"></td>
<td data-bind="text:NAME"></td>
<td data-bind="text:ADDRESS"></td>
<td data-bind="text:GENDER"></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>
</div>
<script type="text/javascript">
$(function () {
function x()
{
var cd = '';
var self = this;
self.listh = ko.observableArray();
self.EID = ko.observable();
self.NAME = ko.observable();
self.ADDRESS = ko.observable();
self.GENDER = ko.observable();
self.PASSWORD = ko.observable();
self.ddl = ko.observable();
self.ddll = ko.observableArray();
self.listi = ko.observableArray();
self.ddlco = ko.observable();
self.listc = ko.observableArray();
self.ddl2 = ko.observable();
self.lists = ko.observableArray();
self.cid = ko.observable();
self.liste = ko.observableArray();
$.getJSON("Home/GetH", null, function (data) {
self.listh(data);
});
$.getJSON("Home/GetI", null, function (data) {
self.listi(data);
});
$.getJSON("Home/GetC", null, function (data) {
self.listc(data);
});
self.edit = function (m) {
$.getJSON("Home/Get", { eid: m.EID }, function (data) {
self.EID(data.EID);
self.NAME(data.NAME);
self.ADDRESS(data.ADDRESS);
self.GENDER(data.GENDER);
self.PASSWORD(data.PASSWORD);
var s = data.HOBBY.split(',');
$('#dv li').find(':checkbox').prop("checked", false);
$('#dv li').find(':checkbox').each(function (i, j) {
for(var k=0;k<s.length;k++)
if ($(j).val() == s[k])
{
$(j).prop("checked", true);
break;
}
});
var t = data.INTEREST.split(',');
self.ddll(data.INTEREST);
$('#ddl').find('option').each(function (i, j) {
for(var k=0;k<t.length;k++)
if ($(j).val() == t[k])
{
$(j).prop("selected", true);
break;
}
});
$('#ddl1').find('option').each(function (i, j) {
if ($(j).val() == data.CID)
$(j).prop('selected', true);
})
self.ddlco(data.CID);
$.get('/Home/GetSn', { id: data.SID }, function (data1) {
$('#ddl2 :selected').text(data1);
});
});
}
function fill()
{
$.getJSON("Home/GetE", null, function (data) {
self.liste(data);
});
} fill();
self.reset = function ()
{
rs();
}
function rs()
{
self.EID('');
self.NAME('');
self.ADDRESS('');
self.GENDER('');
self.PASSWORD('');
$('#dv li').find(':checkbox').prop("checked", false);
$('#ddl').find('option').prop("selected", false);
$('#ddl1').prop('selectedIndex', 0);
$('#ddl2').prop('selectedIndex', 0);
}
self.update = function ()
{
var s='';
$('#dv li').find(':checkbox:checked').each(function (i, j) {
s += $(j).val() + ',';
});
var t = '';
$('#ddl').find('option:selected').each(function (i, j) {
t += $(j).val() + ',';
});
$.getJSON("/Home/Put", {
EID: self.EID(),
NAME: self.NAME(),
ADDRESS: self.ADDRESS(),
GENDER: self.GENDER(),
PASSWORD: self.PASSWORD(),
HOBBY: s.substr(0, s.lastIndexOf(',')),
INTEREST: t.substr(0, t.lastIndexOf(',')),
CID: cd,
SID: self.ddl2()
}, function (data) {
alert(data);
fill();
rs();
$('#ddl2 :selected').text('');
});
}
self.del = function (m) {
if (confirm('Do you want to delete it ?'))
{
$.getJSON("Home/Delete", { eid: m.EID }, function (data) {
alert(data);
fill();
});
}
}
function y(id)
{
$.getJSON("Home/GetS", {id:id} , function (data) {
self.lists(data);
});
}
self.ddlco = ko.dependentObservable({
read: self.cid,
write: function (id)
{
cd = id;
y(id);
}
});
self.save = function ()
{
var s='';
$('#dv li').find(':checkbox:checked').each(function (i, j) {
s += $(j).val() + ',';
});
var t = '';
$('#ddl').find('option:selected').each(function (i, j) {
t += $(j).val() + ',';
});
$.getJSON("/Home/Post", {
EID: self.EID(),
NAME: self.NAME(),
ADDRESS: self.ADDRESS(),
GENDER: self.GENDER(),
PASSWORD: self.PASSWORD(),
HOBBY: s.substr(0, s.lastIndexOf(',')),
INTEREST: t.substr(0, t.lastIndexOf(',')),
CID: cd,
SID: self.ddl2()
}, function (data) {
alert(data);
fill();
});
}
}
ko.applyBindings(new x());
});
</script>
No comments:
Post a Comment