Friday 2 March 2012

HOW TO SAVE MULTIPLE RECORDS AT A TIME USING JQUERY,JSON,WEBSERVICES

DESIGN THE PAGE :

  <form id="form1" runat="server">
    <div>
   
    <table id="tbl">
        <thead>
            <tr>
                <th>
                    EID
                </th>
                <th>
                    Name
                </th>
           
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" name="tx_01_ID" />
                </td>
                <td>
                    <input type="text" name="tx_01_Name" />
                </td>
              
            </tr>
            <tr>
                <td>
                    <input type="text" name="tx_02_ID" />
                </td>
                <td>
                    <input type="text" name="tx_02_Name" />
                </td>
            
            </tr>
        </tbody>
    </table>
    <input type="button" id="Bu_Save" value="Save" />
    <div id="test"></div>
    </div>
    </form>
ADD SCRIPT ON THE TOP OF THE PAGE :

<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 () {

        $("#Bu_Save").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=text][name*=_ID]").val();
                data[index].name = $(item).find("input[type=text][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 WEBSERVICE :

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=0;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