Wednesday 22 February 2012

how to save and display from database using jquery ,json,linq and webservice in aps.net

DESIGN THE PAGE:
 center>
    div style="width:940px;">
    li style="width:360px; list-style:none; text-align:right; float:left; padding-top:3px">&nbsp;</li>
    li style="width:20px; list-style:none;  float:left; padding-top:3px; text-align:center; font-weight:bolder">&nbsp;</li>
    li style="width:560px; list-style:none; text-align:left; float:left; padding-top:3px">&nbsp;<asp:Label ForeColor="Green" ID="lb1" runat="server" EnableViewState="false"></asp:Label></li>
    li style="width:360px; list-style:none; text-align:right; float:left; padding-top:3px">EID</li>
    li style="width:20px; list-style:none;  float:left; padding-top:3px; text-align:center; font-weight:bolder">:</li>
    li style="width:560px; list-style:none; text-align:left; float:left; padding-top:3px"><asp:TextBox ID="tb" runat="server"></asp:TextBox></li>
    li style="width:360px; list-style:none; text-align:right; float:left; padding-top:3px">Name</li>
    li style="width:20px; list-style:none;  float:left; padding-top:3px; text-align:center; font-weight:bolder">:</li>
     li style="width:560px; list-style:none; text-align:left; float:left; padding-top:3px"><asp:TextBox ID="tb1" runat="server"></asp:TextBox></li>
     li style="width:360px; list-style:none; text-align:right; float:left; padding-top:3px">&nbsp;</li>
    li style="width:20px; list-style:none;  float:left; padding-top:3px; text-align:center; font-weight:bolder">&nbsp;</li>
     li style="width:560px; list-style:none; text-align:left; float:left; padding-top:3px"><input type="button" id="btn"  value="Save" style="width:80px"><asp:Button ID="Button1" runat="server" Text="Reset" Width="80" /></li>
     li style="width:360px; list-style:none; text-align:right; float:left; padding-top:3px">&nbsp;</li>
    li style="width:20px; list-style:none;  float:left; padding-top:3px; text-align:center; font-weight:bolder">&nbsp;</li>
     li style="width:560px; list-style:none; text-align:left; float:left; padding-top:3px"> <div id="dv"></div></li>
    /div>
    /center>
PAGE DESIGN LIKE THIS :
ADD SCRIPT ON THE HEADER TAG:
 <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
      <script type="text/javascript">
          $(document).ready(function () {
              $('#btn').click(function () {
                  $.ajax({
                      type: "POST",
                      contentType: "application/json; charset=utf-8",
                      url: "WebService.asmx/GetNamesByID",
                      data: "{x: '" + $('#tb').val() + "',y: '" + $('#tb1').val() + "'}",
                      dataType: "json",
                      async: false,
                      success: function (data) {
                          var _html = '<table  border="1" style="width:500px" >';
                          _html += '<tr>';
                          _html += '<th>EID</th>';
                          _html += '<th>NAME</th>';
                          _html += '<th>SELECT</th>';
                          _html += '</tr>';
                          for (var i = 0; i < data.d.length; i++) {
                              _html += '<tr>';
                              _html += '<td>' + data.d[i].EID + '</td>';
                              _html += '<td>' + data.d[i].NAME + '</td>';
                              _html += '<td> <input id="' + data.d[i].EID + '" type="button" value="Delete" onclick="LoadForDelete(' + data.d[i].EID + ');" /></td>';
                              _html += '</tr>';
                          }
                          _html += '</table>';
                          $('#dv').html(_html);

                      }
                  });
              });
          });
   </script>
ADD A WEB SERVICE ON UR PROJECT ,NAME OF WEB SERVICE IS  'WebService.asmx' AND CODE:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Web.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
    DataClassesDataContext o = new DataClassesDataContext(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ToString());
    public WebService ()
    {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    public string HelloWorld()
    {
        return "Hello World";
    }
    [WebMethod]
    public List<DEPT> GetNamesByID(string x, string y)
    {
        EMP p = new EMP();
        p.EID = Convert.ToInt32(x);
        p.NAME = y;
        o.EMPs.InsertOnSubmit(p);
        o.SubmitChanges();
        List<DEPT> q = new List<DEPT>();
        var m = from z in o.EMPs select z;
        foreach (var n in m)
        {
            q.Add(new DEPT {EID=n.EID,NAME=n.NAME});
        }
        return q;
    }
    [Serializable]
    public class DEPT
    {
        public int EID
        {
            get;
            set;
        }
        public string NAME
        {
            get;
            set;
        }
    }
   
}


No comments:

Post a Comment