DataSet / DataTable in javascript using Ajax.NET Professional

Step 1: Your Webconfig file like.

<?xml version="1.0"?>

</sectionGroup>

</configSections>

</urlNamespaceMappings>

</jsonConverters>

</oldStyle>

</ajaxSettings>

</ajaxNet>

<system.web>

</system.web>

<system.web>

</httpHandlers>

</system.web>

</location>

<system.web>

</httpHandlers>

</system.web>

</location>

</configuration>

Step2:

Create Default.aspx page.

On page load event.

AjaxPro.Utility.RegisterTypeForAjax(typeof(AJAXDataset.Default));

Step 3: Your .aspx file like.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXDataset.Default" %>

<!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> Create DataTable using Javascript</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table>

            <tr>

                <td>

                    First Name :

                </td>

                <td>

                    <asp:TextBox ID="txt_fname" runat="server"></asp:TextBox>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                </td>

            </tr>

            <tr>

                <td>

                    Last Name :

                </td>

                <td>

                    <asp:TextBox ID="txt_lname" runat="server"></asp:TextBox>

                </td>

            </tr>

            <tr>

                <td>

                </td>

                <td>

                    <asp:Button ID="btnsave" runat="server" Text="Save" OnClientClick="SetEmployeeDetails();"/>

                     <asp:Button ID="btnclear" runat="server" Text="Clear" OnClientClick="ClearDetails();"/>

                </td>

            </tr>

        </table>

    </div>

    <script language="javascript" type="text/javascript">

        GetEmployeeData();

        //Get the Value from Server side and bind it.

        function GetEmployeeData() {

            // Create Dataset from client side.

            var ds = new Ajax.Web.DataSet();

/*

            Call the server side function

            AJAXDataset => namespace

            AJAXDataset => class name od your page.

            so it's like

            Inherits ="AJAXDataset.Default"

            GetEmployeeData => it's your Default page Web methosd.

*/

            ds = AJAXDataset.Default.GetEmployeeData();

            for (var i = 0; i < ds.value.Tables[0].Rows.length; i++) {

                document.getElementById("<%=txt_fname.ClientID %>").value = ds.value.Tables[0].Rows[i]["FName"];

                document.getElementById("<%=txt_lname.ClientID %>").value = ds.value.Tables[0].Rows[i]["LName"];

        //  SetEmployeeDetails();

        function SetEmployeeDetails() {

            //Create DataTable From Client Side.

            var dt = new Ajax.Web.DataTable();

            dt.addColumn("FName", "System.String");

            dt.addColumn("LName", "System.String");

            var drToAdd = new Object();

           drToAdd.FName = document.getElementById("<%=txt_fname.ClientID %>").value;

           drToAdd.LName = document.getElementById("<%=txt_lname.ClientID %>").value;

            dt.addRow(drToAdd);

/*

       Call the server side function InsertEmployeeData and pass the DataTable to it.            AJAXDataset => namespace

            AJAXDataset => class name od your page.

            so it's like

            Inherits ="AJAXDataset.Default"

            InsertEmployeeData => it's your Default page Web methosd.

*/

            AJAXDataset.Default.InsertEmployeeData(dt);

            return false;

        function ClearDetails() {

            document.getElementById("<%=txt_fname.ClientID %>").value = "";

            document.getElementById("<%=txt_lname.ClientID %>").value="";

    </script>

    </form>

</body>

</html>


Step 4: Your .cs file like.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using AjaxPro;

namespace AJAXDataset

    public partial class Default : System.Web.UI.Page

        protected void Page_Load(object sender, EventArgs e)

            AjaxPro.Utility.RegisterTypeForAjax(typeof(AJAXDataset.Default));

        [AjaxPro.AjaxMethod()]

        public System.Data.DataSet GetEmployeeData()

            DataSet ds = new DataSet();

            DataTable table = new DataTable();

            table.Columns.Add("FName", typeof(string));

            table.Columns.Add("LName", typeof(string));

            table.Rows.Add("Jayendrasinh", "Fatehsinh");

            ds.Tables.Add(table);

            return ds;

        [AjaxPro.AjaxMethod()]

        public void InsertEmployeeData(DataTable dt)

            if (dt != null)

                if (dt.Rows.Count > 0)

                    for (int i = 0; i < dt.Rows.Count; i++)