Friday 24 April 2015
Tuesday 21 April 2015
How to call server side methods using AJAX AND JQuery and JavaScript in ASP.Net
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>
Subscribe to:
Posts (Atom)
Subscribe posts
Posts
All Comments