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

Join the conversation! Your thoughts help the community grow.