In this article, I am going to write C# and JavaScript code examples to Call Server Side method from JavaScript Client Side code in ASP.NET using JQuery ajax.
Summary
- Call Server Side method from JavaScript using JQuery ajax
- Call Server Side method from JavaScript using JQuery ajax with Parameters
Call Server Side method from JavaScript in ASP.NET using JQuery ajax
You can call server side C# method from JavaScript client side using JQuery ajax method in ASP.NET.
Note: You need add reference for JQuery script file to use JQuery ajax.
Default.aspx:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Call Server Side method from JavaScript in ASP.NET using JQuery ajax</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
function GetServerDate() {
$.ajax({
type: "post",
url: "Default.aspx/GetServerDate",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
OnSuccess(result.d);
},
error: function (xhr, status, error) {
OnFailure(error);
}
});
}
function OnSuccess(dateTime) {
if (dateTime) {
document.getElementById("currentDate").innerHTML = dateTime;
}
}
function OnFailure(error) {
alert(error);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Show Server Time" onclick="GetServerDate()" />
<label id="currentDate">
This is current Date Time in Web Server</label>
</div>
</form>
</body>
</html>
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string GetServerDate()
{
return DateTime.Now.ToLocalTime().ToString();
}
Call Server Side method from JavaScript using JQuery ajax with Parameters
You can call server side C# method from JavaScript in ASP.NET using JQuery ajax method. Here, I have written JQuery ajax example to get current date time by passing parameters.
Default.aspx:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Call Server Side method from JavaScript in ASP.NET using JQuery ajax</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
function GetServerDate(format) {
$.ajax({
type: "post",
url: "Default.aspx/GetServerDate",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{"format":"' + format + '"}',
success: function (result) {
OnSuccess(result.d);
},
error: function (xhr, status, error) {
OnFailure(error);
}
});
}
function OnSuccess(dateTime) {
if (dateTime) {
document.getElementById("currentDate").innerHTML = dateTime;
}
}
function OnFailure(error) {
alert(error);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Show UTC Server Time" onclick="GetServerDate('utc')" />
<input type="button" value="Show Local Server Time" onclick="GetServerDate('local')" />
<label id="currentDate">
This is current Date Time in Web Server</label>
</div>
</form>
</body>
</html>
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string GetServerDate(string format)
{
if (format.Equals("utc"))
{
return DateTime.Now.ToUniversalTime().ToString();
}
else
{
return DateTime.Now.ToLocalTime().ToString();
}
}
Advertisement