Ajax call using jquery in asp.net OR Call Server side function From Client side using Ajax
To start communicating with Ajax call from client side through JQuery we first need to implement our
web method. Create an ASP.NET web site project in Visual Studio and add an
ASP.NET Web Service by right clicking the project name and choosing Add New
Item option as shown in the figure below.
Once the Add New Item dialog box appears, select Webpage (.aspx) item from the list and give suitable name such as Default.aspx. Visual Studio will create a web page (.aspx) and related code behind files in the
project.
You need to add a namespace “using System.Web.Services;” in code behind.
Code For: Default.aspx
Add jquery script reference in head section of aspx page
<script src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function AjaxCal() {
$.ajax({
type: 'POST',
url: "Default.aspx/MyMethod",
data: "{id:'1'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});
}
function AjaxSucceeded(response) {
alert(response.d.toString());
}
function AjaxFailed() {
}
</script>
Code for Body Section:
<body>
<form id="form1" runat="server">
<div>
<input type="text" value="Call" onclick="AjaxCal" />
</div>
</form>
</body>
</html>
Full Code of Aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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></title>
<script src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
function AjaxCal() {
$.ajax({
type: 'POST',
url: "Default.aspx/MyMethod",
data: "{id:'1'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});
}
function AjaxSucceeded(response) {
alert(response.d.toString());
}
function AjaxFailed() {
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" value="Call" onclick="AjaxCal" />
</div>
</form>
</body>
</html>
Write Following code on Sample.aspx.cs
Code behind
code: Default.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
public partial class _Default :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
[WebMethod(EnableSession
= false)]
public static string
MyMethod(string id)
{
return
System.DateTime.Now.ToString();
}
}
Great!
ReplyDeleteawesome dude
ReplyDelete