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