How to call server side methods using AJAX AND JQuery and JavaScript in ASP.Net
Step1: Create WebApllication in Visual Studio Name It AS "AjaxImplementation"
Step2: Add web form Name it as Webform1.aspx
Step3: Add Below code in Webform1.aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="AjaxImplementation.WebForm1" %>
Inherits="AjaxImplementation.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
type="text/javascript">
type="text/javascript">
</script>
<script src="/Example.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblajax">
<tr>
<td>
<span>Name:</span>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span>Course:</span>
<asp:TextBox ID="txtCourse" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span>Fee:</span>
<asp:TextBox ID="txtFee" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<span>Gender:</span>
<asp:DropDownList ID="ddlGender" runat="server">
<asp:DropDownList ID="ddlGender" runat="server">
<asp:ListItem Value="1">Male</asp:ListItem>
<asp:ListItem Value="2">Female</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<input id="btnSubmit" type="button" onclick="GetAjaxCall()"
value="Submit" runat="server" />
</tr>
</table>
<div id="bindvalues"></div>
</div>
</form>
</body>
</html>
Step4:Write Below code In code Behind (i.e Webform1.aspx.cs) page
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AjaxImplementation
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
if (!Page.IsPostBack)
{
ddlGender.Items.Insert(0, "-SELECT-");
}
}
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public string GetData(string[] info)
{
string id = string.Empty, course = string.Empty, Fee = string.Empty,
gender = string.Empty;
id = info[0];
course = info[1];
Fee = info[2];
gender = info[3];
StringBuilder sb = new StringBuilder();
sb.Append("<table border='5' width='50%' cellpadding='4' cellspacing='3'>");
sb.Append("<table border='5' width='50%' cellpadding='4' cellspacing='3'>");
sb.Append("<TH colspan='4'><BR><H3>Ajax Example</H3></TH></tr>");
sb.Append("<tr><TH>ID</TH><TH>Course</TH><TH>Fee</TH><TH>Gender</TH></tr>");
sb.Append(" <tr align='CENTER'>");
sb.Append("<td>" + id + "</td>");
sb.Append("<td>" + course + "</td>");
sb.Append("<td>" + Fee + "</td><td>" + gender + "</td>");
sb.Append("</tr></table>");
return sb.ToString();
}
}
}
Step5:Add script file to Current Application ,Name it as "Example.js"
Step6: Write Below Code in Example.js File
function GetAjaxCall() {
var dataarray = new Array();
dataarray[0] = $("#txtName").val();
dataarray[1] = $("#txtCourse").val();
dataarray[2] = $("#txtFee").val();
dataarray[3] = $("#ddlGender option:selected").text();
var data = WebForm1.GetData(dataarray);
console.log(data);
$('#bindvalues').html(data.value);
}
Step7: Add Ajax.dll as reference to this application
we can get Ajax .Dll from this link
Step8:Add Below Code in Web.Config File inside configuration Tag
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
<httpHandlers>
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
</httpHandlers>
</system.web>
Posts
No comments:
Post a Comment