$.ajax({
type: "POST",
url: "sample.aspx/ShowValue",
data: "{'data':'jisha','value1':'123456'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) {
suc(msg);
}
});
data: "{'data':'jisha','value1':'123456'}" - the data is the parameter needed for the method.
here "data" and "value1" are the parameter names - should be same as the code behind parameter name.
each $.ajax function needs a post back. so total 5 post backs in the button btn click.
try and feel... lol..............
Look at the below button click function, i ve 5 post backs. bt the user does not feel even one.
Ajax made it all happen.
html code
*****************************************************************************
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sample.aspx.cs" Inherits="sample" %>
<!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></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=txt.ClientID %>").keypress(function (e) {
if (e.charCode == 44 || e.which == 44) {
if ($.browser.msie)
event.returnValue = false;
return false;
}
});
$("#<%=btn.ClientID %>").click(function () {
$.ajax({
type: "POST",
url: "sample.aspx/ShowValue",
data: "{'data':'chris','value1':'123456'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) {
suc(msg);
}
});
$.ajax({
type: "POST",
url: "sample.aspx/ShowValue",
data: "{'data':'sonu','value1':'123456a'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) {
suc(msg);
},
error: function (msg) {
alert(msg.responseText);
}
});
$.ajax({
type: "POST",
url: "sample.aspx/ShowValue",
data: "{'data':'golda','value1':'123456'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) {
suc(msg);
}
});
$.ajax({
type: "POST",
url: "sample.aspx/ShowValue",
data: "{'data':'jisha','value1':'123456'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) {
suc(msg);
}
});
$.ajax({
type: "POST",
url: "sample.aspx/ShowValue",
data: "{'data':'ramees','value1':'123456'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (msg) {
suc(msg);
}
});
return false;
});
});
function suc(msg) {
var text = $("#divBody").html();
$("#divBody").html(text + "<br/>" + msg.d);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scr" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<div>
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
<asp:Button ID="btn" runat="server" Text="Click" />
</div>
<div id="divBody"></div>
</form>
</body>
</html>
*****************************************************************************
Code behind
*****************************************************************************
using System;
using System.Web.Services;
public partial class sample : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string ShowValue(string data, int value1)
{
return DateTime.Now.ToString() + " " + data + " " + value1;
}
}
*****************************************************************************