save and display in gride view using json,jquery,linq in asp.net

DESIGN THE FORM :
 <form id="form1" runat="server">
    <center>
     <div class="A">
    <li class="B">EID</li>
    <li class="C">:</li>
    <li class="D"><input type="text" name="tb" id="tb" /></li>
     <li class="B">Name</li>
    <li class="C">:</li>
    <li class="D"><input type="text" name="tb1" id="tb1" /></li>
     <li class="B">&nbsp;</li>
    <li class="C">&nbsp;</li>
    <li class="D"><input type="button" name="btn" id="btn" value="save" /></li>
      <li class="B">&nbsp;</li>
    <li class="C">&nbsp;</li>
    <li class="D">
    <asp:GridView ID="gv" runat="server" ShowHeaderWhenEmpty="true">
   
    </asp:GridView></li>
    </div>
    </center>
    </form>
THE FORM LOOKS LIKE :

 

ADD STYLE SHEET IN THE HEARDER TAG :

 <style>
    .A
    {
        width:940px;
    }
    .B
    {
        list-style:none;
        width:360px;
        text-align:right;
        padding-top:3px;
        float:left;
    }
    .C
    {
        width:20px;
        text-align:center;
        padding-top:3px;
        float:left;
        font-weight:bolder;
         list-style:none;
    }
    .D
    {
          width:560px;
        text-align:left;
        padding-top:3px;
        float:left;
         list-style:none;
    }
    </style>

ADD THE 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: "{a: '" + $('#tb').val() + "',b: '" + $('#tb1').val() + "'}",
                      dataType: "json",
                      async: false,
                      success: function (data) {
                          $("#gv").html("");
                          $("#gv").append("<tr><th>EID</th><th>NAME</th></tr>");
                          for (var i = 0; i < data.d.length; i++) {
                              $("#gv").append("<tr><td>" + data.d[i].EID + "</td><td>" + data.d[i].NAME + "</td></tr>");
                          }
                        
                      }
                  });
              });
          });
       </script>

C# CODE :

  if (!IsPostBack)
        {
            dt.Columns.Add("EID", typeof(string));
            dt.Columns.Add("NAME", typeof(string));
            gv.DataSource = dt;
            gv.DataBind();
        }

web service code :

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


[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(ConfigurationManager.ConnectionStrings["DatabaseConnectionString"].ToString());
    [WebMethod]
    public List<emp1> GetNamesByID(string a, string b)
    {
        EMP k = new EMP();
        k.EID = Convert.ToInt32(a);
        k.NAME = b;
        o.EMPs.InsertOnSubmit(k);
        o.SubmitChanges();
        var m = from n in o.EMPs select n;
        List<emp1> p = new List<emp1>();
        foreach (var d in m)
            p.Add(new emp1 { EID = d.EID, NAME = d.NAME });
        return p.ToList();
    }
    [Serializable]
    public class emp1
    {
        private int eid;
        private string name;
        public string NAME
        {
            get { return name; }
            set { name = value; }
        }
        public int EID
        {
            get { return eid; }
            set { eid = value; }
        }
      
    }
   
}