Saturday 3 March 2012

how to store data in dynamic table after that multiple records save in database using jquery, json, linq and webservice in asp.net

Design the page:

 <form id="form1" runat="server">
    <div>
    <center>
    <table>
     <tr><td>&nbsp;</td><td><div id="test" style="color:Green"></div></td></tr>
    <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"></asp:TextBox></td></tr>
     <tr><td>&nbsp;</td><td><asp:Button ID="btn" runat="server"  Text="AddMore" Width="80"/></td></tr>
      <tr><td>&nbsp;</td><td><table border="1" id="tbl"><tr><th>EID</th><th>NAME</th></tr></table></td></tr>
       <tr><td>&nbsp;</td><td><input type="button" id="btn1" value="Save" style="width:80px" /></td></tr>
    </table>
    </center>
    </div>
    </form>
the page looks like:

then add the script on 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 () {
var _html;
  _html = '<tr>';
  _html += '<td>' + $("#tb").val() + '<input type="hidden" value="' + $("#tb").val() + '" name="tx_01_ID" /></td>';
    _html += '<td>' + $("#tb1").val() + ' <input type="hidden" value="' + $("#tb1").val() + '" name="tx_01_Name" /></td>';
    _html += '</tr>';
    $('#tbl').append(_html);
    return false
}
)
$("#btn1").click(function () {
    data = new Array();
    $("table[id*=tbl] tbody tr").each(function (index, item) {
        data[index] = new Object();
        data[index].id = $(item).find("input[type=hidden][name*=_ID]").val();
        data[index].name = $(item).find("input[type=hidden][name*=_Name]").val();
    });
    saveData(data);
});
}
)
function saveData(data) {
    var stringData = JSON.stringify(data);
    $.ajax({
        type: "POST",
        contentType: "application/json",
        data: "{d:" + stringData + "}",
        url: "WebService.asmx/x",
        dataType: "json",
        success: function (data) {
            $('#test').html(data.d);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            debugger;
        }
    });
}
</script>
add a web service on ur project the webservice code is:
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 string x(List<EMP1> d)
    {
     for(int i=1;i<d.Count();i++)
     {
         EMP q = new EMP();
          q.EID = Convert.ToInt32(d[i].ID.ToString());
          q.NAME = d[i].NAME.ToString();
            o.EMPs.InsertOnSubmit(q);
            o.SubmitChanges();
     }
        return "Record save sucessfully.";

    }
    [Serializable]
    public class EMP1
    {
        public int ID
        {
            get;
            set;
        }
        public string NAME
        {
            get;
            set;
        }
    }
   
}

No comments:

Post a Comment