Monday 11 June 2012

how to insert,update,delete and view in MVC using json and jquery

view code:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication46.Models.EMP>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <style type="text/css">
        #popupBoxClose
        {
            font-size: 10px;
            line-height: 15px;
            right: 5px;
            top: 5px;
            position: absolute;
            color: #6fa5e2;
            font-weight: 500;
        }
        #popup_box
        {
            display: none; /* Hide the DIV */
            position: fixed;
            _position: absolute; /* hack for internet explorer 6 */
            height: 300px;
            width: 600px;
            background: #FFFFFF;
            left: 300px;
            top: 150px;
            z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
            margin-left: 15px; /* additional features, can be omitted */
            border: 2px solid #999999;
            padding: 15px;
            font-size: 15px;
            -moz-box-shadow: 0 0 5px #ff0000;
            -webkit-box-shadow: 0 0 5px #ff0000;
        }
    </style>
    <script src="../../Scripts/JScript.js" type="text/javascript"></script>
    <script src="../../Scripts/JScript2.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        function y(s) {
            $.getJSON('/Home/m', { a: s }, function (data) {
                $("#gv").html("");
                $("#gv").append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th></tr>");
                for (var i = 0; i < data.length; i++) {
                    $("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data[i].EID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data[i].EID + ")'>Edit</a></td><td>" + data[i].EID + "</td><td>" + data[i].NAME + "</td></tr>");

                }
            });
        }
        function x(s) {
            $.getJSON('/Home/y', { a: s }, function (data)
             {
                $('#tb').attr("value", data[0].EID);
                $('#tb1').attr("value", data[0].NAME);
            });
            $('#popup_box').slideDown("slow");
        }
        $(document).ready(
        function () {
            $.getJSON('/Home/n', '', function (data) {

                $("#gv").html("");
                $("#gv").append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th></tr>");
                for (var i = 0; i < data.length; i++) {

                    $("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data[i].EID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data[i].EID + ")'>Edit</a></td><td>" + data[i].EID + "</td><td>" + data[i].NAME + "</td></tr>");

                }
            });
            $('#btn1').click(
        function () {
            $.getJSON('/Home/z', { a: $('#tb').val(), b: $('#tb1').val() }, function (data) {
                $("#gv").html("");
                $("#gv").append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th></tr>");
                for (var i = 0; i < data.length; i++) {
                    $("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data[i].EID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data[i].EID + ")'>Edit</a></td><td>" + data[i].EID + "</td><td>" + data[i].NAME + "</td></tr>");

                }
            });
            $('#popup_box').slideUp("slow");
        }
        )
            JqueryAction();
            function ShowPopUp() {
                $('#popup_box').slideDown("slow");
            }
            function JqueryAction() {

                $('#popupBoxClose').click(
             function () {
                 $('#popup_box').slideUp("slow");
             }
            );
            }
            $('#btn').click
        (
        function () {
            $.getJSON('/Home/x', { a: $('#EID').val(), b: $('#NAME').val() }, function (data) {

                $("#gv").html("");
                $("#gv").append("<tr><th>DELETE</th><th>UPDATE</th><th>EID</th><th>NAME</th></tr>");
                for (var i = 0; i < data.length; i++) {

                    $("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data[i].EID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data[i].EID + ")'>Edit</a></td><td>" + data[i].EID + "</td><td>" + data[i].NAME + "</td></tr>");

                }
            });
        }

        )
        }
        )
    </script>
    <%using (Html.BeginForm())
      { %>
      <form id="f">
      <table align="center">
      <tr><td>EID</td><td><%=Html.TextBoxFor(Model=>Model.EID) %></td></tr>
      <tr><td>NAME</td><td><%=Html.TextBoxFor(Model=>Model.NAME) %></td></tr>
      <tr><td>&nbsp;</td><td><input type="button" value="Save" id="btn" name="btn" /></td></tr>
      <tr><td colspan="2">
      <table id="gv" width="100%" border="1" cellpadding="0" cellspacing="0">
      </table>
      </td></tr>
      </table>
       <div id="popup_box">
            <table align="center">
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <div id="popupBoxClose">
                            <a href="#" style="text-decoration: none">Close</a></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        EID
                    </td>
                    <td>
                       <input type="text" id="tb" name="tb" />
                    </td>
                </tr>
                <tr>
                    <td>
                        NAME
                    </td>
                    <td>
                         <input type="text" id="tb1" name="tb1" />
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <input type="button" id="btn1" name="btn1" value="Update" />
                    </td>
                </tr>
            </table>
        </div>
            </form>
    <%} %>
</asp:Content>
Page looks like:


Controller code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication46.Models;

namespace MvcApplication46.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        DataClasses1DataContext o = new DataClasses1DataContext();
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }
        public JsonResult x(int a, string b)
        {
            EMP p = new EMP();
            p.EID = a;
            p.NAME = b;
            o.EMPs.InsertOnSubmit(p);
            o.SubmitChanges();
            return Json(o.EMPs.ToList(), JsonRequestBehavior.AllowGet);
        }
        public JsonResult z(int a, string b)
        {
            var m = (from x in o.EMPs where x.EID == a select x).First();
            m.NAME = b;
            o.SubmitChanges();
            return Json(o.EMPs.ToList(), JsonRequestBehavior.AllowGet);
        }
        public JsonResult m(int a)
        {
            var m = (from x in o.EMPs where x.EID == a select x).First();
            o.EMPs.DeleteOnSubmit(m);
            o.SubmitChanges();
            return Json(o.EMPs.ToList(), JsonRequestBehavior.AllowGet);
        }
        public JsonResult y(int a)
        {
            var m=(from x in o.EMPs where x.EID==a select x).ToList();
            return Json(m, JsonRequestBehavior.AllowGet);
        }
        public JsonResult n()
        {
            return Json(o.EMPs.ToList(), JsonRequestBehavior.AllowGet);
        }
    }
}

No comments:

Post a Comment