DataSet / DataTable in javascript using Ajax.NET Professional

You can just download AjaxPro.2.dll files from www.schwarz-interactive.de

Add a reference to the AjaxPro.2.dll.

Step 1:  Your Webconfig file like.

<?xml version="1.0"?>

<configuration>

  <configSections>

    <sectionGroup name="ajaxNet">

      <section name="ajaxSettings" type="AjaxPro.AjaxSettingsSectionHandler,AjaxPro.2" 
requirePermission="false" restartOnExternalChanges="true"/>

    </sectionGroup>

  </configSections>

  <ajaxNet>

    <ajaxSettings>

      <urlNamespaceMappings useAssemblyQualifiedName="false">

        <add type="MyAjaxMethods,App_Code" path="_a"/>

      </urlNamespaceMappings>

      <jsonConverters>

        <add type="AjaxPro.BitmapConverter,AjaxPro.2"/>

      </jsonConverters>

      <oldStyle>

        <includeMsPrototype/>

      </oldStyle>

    </ajaxSettings>

  </ajaxNet>

  <connectionStrings/>

  <system.web>

    <compilation debug="true"/>

    <authentication mode="Forms"/>

  </system.web>

  <location path="ajaximage">

    <system.web>

      <httpHandlers>

 <add verb="GET" path="*.ashx" type="AjaxPro.AjaxBitmapHttpHandler,AjaxPro.2"/>

      </httpHandlers>

    </system.web>

  </location>

  <location path="ajaxpro">

    <system.web>

      <httpHandlers>

  <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>

      </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++)
                    {         
                    }
                }   
            }
        }
    }

Ebook Download
View all
Learn
View all