Thursday 7 June 2012

Insert,update,delete and display using jquery,json,webservice and linq in asp.net

Design Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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>
  
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script language="javascript" type="text/javascript">
        function x(s) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/y",
                data: "{a: '" + s + "'}",
                dataType: "json",
                async: false,
                success: function (data)
                {
                    $('#tb2').attr("value", data.d[0]['DID'])
                    $('#tb3').attr("value", data.d[0]['DNAME'])
                }
            });
            ShowPopUp()
        }
        function y(s)
        {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/d",
                data: "{a: '" + s + "'}",
                dataType: "json",
                async: false,
                success: 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.d.length; i++) {
                        $("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data.d[i].DID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data.d[i].DID + ")'>Edit</a></td><td>" + data.d[i].DID + "</td><td>" + data.d[i].DNAME + "</td></tr>");
                        $('#popup_box').slideUp("slow");
                    }

                }
            });
        }
        $(document).ready
        (
        function () {

            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebService.asmx/v",
                data: "{}",
                dataType: "json",
                async: false,
                success: 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.d.length; i++) {
                        $("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data.d[i].DID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data.d[i].DID + ")'>Edit</a></td><td>" + data.d[i].DID + "</td><td>" + data.d[i].DNAME + "</td></tr>");
                        $('#popup_box').slideUp("slow");
                    }

                }
            });
            $('#btn1').click(
            function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "WebService.asmx/z",
                    data: "{a: '" + $('#tb2').val() + "',b: '" + $('#tb3').val() + "'}",
                    dataType: "json",
                    async: false,
                    success: 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.d.length; i++) {
                            $("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data.d[i].DID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data.d[i].DID + ")'>Edit</a></td><td>" + data.d[i].DID + "</td><td>" + data.d[i].DNAME + "</td></tr>");
                            $('#popup_box').slideUp("slow");
                        }

                    }
                });
           
            }
            )
            JqueryAction();
            $('#btn').click
            (
                    function () {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "WebService.asmx/insert",
                            data: "{a: '" + $('#tb').val() + "',b: '" + $('#tb1').val() + "'}",
                            dataType: "json",
                            async: false,
                            success: 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.d.length; i++) {
                                    $("#gv").append("<tr><td><a href='#' style='text-decoration: none' onclick='y(" + data.d[i].DID + ")'>Delete</a></td><td><a href='#' style='text-decoration: none' onclick='x(" + data.d[i].DID + ")'>Edit</a></td><td>" + data.d[i].DID + "</td><td>" + data.d[i].DNAME + "</td></tr>");
                                  
                                }

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

            $('#popupBoxClose').click(
             function () {
                 $('#popup_box').slideUp("slow");
             }
            );
        }
      
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table align="center">
            <tr>
                <td>
                    EID
                </td>
                <td>
                    <asp:TextBox ID="tb" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    NAME
                </td>
                <td>
                    <asp:TextBox ID="tb1" runat="server" Width="200"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <input type="button" id="btn" name="btn" value="Save" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table id="gv" align="center" border="1" width="100%" 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>
                        <asp:TextBox ID="tb2" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        NAME
                    </td>
                    <td>
                        <asp:TextBox ID="tb3" runat="server" Width="200"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <input type="button" id="btn1" name="btn1" value="Update" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    </form>
</body>
</html>

Page looks like:


Webservice  Code:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;


[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
    DataClassesDataContext o = new DataClassesDataContext();
    public WebService ()
    {

      
    }

    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World";
    }
    [WebMethod]
    public List<DEPT> insert(int a, string b)
    {
        DEPT p = new DEPT();
        p.DID = a;
        p.DNAME = b;
        o.DEPTs.InsertOnSubmit(p);
        o.SubmitChanges();
        List<DEPT> q=new List<DEPT>();
        var m = (from x in o.DEPTs select x).ToList();
        for (int i = 0; i < m.Count; i++)
            q.Add(new DEPT{DID=m[i].DID,DNAME=m[i].DNAME});
        return o.DEPTs.ToList();
    }
    [WebMethod]
    public List<DEPT> z(int a, string b)
    {
        var n = (from y in o.DEPTs where y.DID == a select y).First();
        n.DNAME = b;
        o.SubmitChanges();
        return o.DEPTs.ToList();
    }
    [WebMethod]
    public List<DEPT> d(int a)
    {
        var n = (from y in o.DEPTs where y.DID == a select y).First();
        o.DEPTs.DeleteOnSubmit(n);
        o.SubmitChanges();
        return o.DEPTs.ToList();
    }
    [WebMethod]
    public List<DEPT> y(int a)
    {
        var m = (from x in o.DEPTs where x.DID == a select x);
        return m.ToList();
    }
    [WebMethod]
    public List<DEPT> v()
    {
        return o.DEPTs.ToList();
    }
}

No comments:

Post a Comment