Friday 3 April 2015

DML opreation in knockout and MVC

controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication14.Models;
using System.Data;
namespace MvcApplication14.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetData()
        {
            using(TestEntities obj=new TestEntities())
            {
                return Json(obj.EMP4.ToList(),JsonRequestBehavior.AllowGet);
            }
         
        }
        public JsonResult update(EMP4 emp)
        {
            using (TestEntities obj = new TestEntities())
            {
                obj.Entry(emp).State = EntityState.Modified;
                obj.SaveChanges();
                return Json("Data updated", JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult delete(EMP4 emp)
        {
            using (TestEntities obj = new TestEntities())
            {
                obj.Entry(emp).State = EntityState.Deleted;
                obj.SaveChanges();
                return Json("Data deleted", JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult save(EMP4 emp)
        {
            using (TestEntities obj = new TestEntities())
            {
                obj.Entry(emp).State = EntityState.Added;
                obj.SaveChanges();
                return Json("Data saved", JsonRequestBehavior.AllowGet);
            }
        }

    }
}


view

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/knockout-2.2.0.js"></script>
<table align="center">
    <tr>
        <td>EID</td>
        <td>:</td>
        <td><input type="text" id="tb" data-bind="value:EMP.EID" /></td>
    </tr>
    <tr>
        <td>NAME</td>
        <td>:</td>
        <td><input type="text" data-bind="value:EMP.NAME" /></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <input TYPE="button" value="Submit" data-bind="click:$root.save" />&nbsp;
            <input type="button" value="Update" data-bind="click:$root.update" />&nbsp;
            <input type="button" value="Reset" data-bind="click:$root.reset" />
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>
            <table border="1" cellpadding="0" cellspacing="0" >
                <thead>
                    <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="#" style="text-decoration:none" data-bind="click:$root.edit">Edit</a></td>
                        <td><a href="#" style="text-decoration:none" data-bind="click:$root.del">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>
<script type="text/javascript">
    $(function () {
        $.ajaxSetup({cache: false});
        function EMP()
        {
            var self = this;
            self.EID = ko.observable();
            self.NAME = ko.observable();
        }
        function x()
        {
            var self = this;
            self.list = ko.observableArray();
            self.EMP = new EMP();
            y();
            self.save = function ()
            {
               
                $.getJSON('@Url.Action("save")', { EID: self.EMP.EID(), NAME: self.EMP.NAME() }, function (data) {
                    alert(data);
                    y();
                    z();
                });
            }
            self.update = function () {
                $.getJSON('@Url.Action("update")', { EID: self.EMP.EID(), NAME: self.EMP.NAME() }, function (data) {
                    alert(data);
                    y();
                    z();
                });
            }
            self.reset = function () {
                z();

            }
            self.edit = function (m) {
                self.EMP.EID(m.EID);
                self.EMP.NAME(m.NAME);
            }
            self.del = function (m) {
                if (confirm('Do you want to delete it ?'))
                {
                    $.getJSON('@Url.Action("delete")', m, function (data) {
                        alert(data);
                        y();
                        z();
                    });
                }
             
               
            }
            function z()
            {
                self.EMP.EID('');
                self.EMP.NAME('');
                $('#tb').focus();
            }
            function y() {
                $.getJSON('@Url.Action("GetData")', null, function (data) {
                    self.list(data);
                });
            }
        }
        ko.applyBindings(new x());
    });
</script>