How to call C# code behind method using JQuery? [Resolved]

Posted by Amatya under jQuery on 2/16/2016 | Points: 10 | Views : 2190 | Status : [Member] | Replies : 2
How to call C# code behind method using JQuery. Share the code.

Feel free to share informations 9731764134
Thanks



Responses

Posted by: Rajnilari2015 on: 2/16/2016 [Member] [Microsoft_MVP] [MVP] Platinum | Points: 50

Up
0
Down

Resolved
@Amatya Sir,
For this reason we need to take help of Ajax.

Long time back , I wrote an article CRUD Operation using Web API and MVC4 (http://www.dotnetfunda.com/articles/show/2340/crud-operation-using-web-api-and-mvc4 ) where we demonstrated this feature. You can have a look in that article for a better understanding.

An excerpt from the article is presented below -

Some code piece

GET Method
function GetAllEmployees() {
jQuery.support.cors = true;
$.ajax({
url: 'http://localhost:41207/api/employee',
type: 'GET',
dataType: 'json',
success: function (data) {
WriteResponses(data);
},
error: function (x, y, z) {
alert(x + '\n' + y + '\n' + z);
}
});


For Update
function UpdateEmployee() {
var employee = {
id: $('#txtEmployeeId').val(),
name: $('#txtEmployeeName').val(),
gender: $('#optGender').val(),
age: $('#txtEmployeeAge').val(),
salary: $('#txtEmployeeSalary').val()
};

$.ajax({
url: 'http://localhost:41207/api/employee/' + $('#txtEmployeeId').val(),
type: 'PUT',
data: JSON.stringify(employee),
contentType: "application/json;charset=utf-8",
success: function (data) {
alert('Employee updated Successfully');
GetAllEmployees();
},
error: function () {
alert('Employee could not be updated');
}
});
}


Delete
function DeleteEmployee() {

jQuery.support.cors = true;
var id = $('#txtEmpId').val()

$.ajax({
url: 'http://localhost:41207/api/employee/' + id,
type: 'DELETE',
contentType: "application/json;charset=utf-8",
success: function (data) {
WriteResponsesForAllEmployees(data);
},
error: function (x, y, z) {
alert(x + '\n' + y + '\n' + z);
}
});
}


Insert
function AddEmployee() {
var employee = {
id: $('#txtEmployeeId').val(),
name: $('#txtEmployeeName').val(),
gender: $('#optGender').val(),
age: $('#txtEmployeeAge').val(),
salary: $('#txtEmployeeSalary').val()
};

$.ajax({
url: 'http://localhost:41207/api/employee/',
type: 'POST',
data: JSON.stringify(employee),
contentType: "application/json;charset=utf-8",
success: function (data) {
alert('Employee added Successfully');
GetAllEmployees();
},
error: function () {
alert('Employee not Added');
}
});
}


Hope this helps

--
Thanks & Regards,
RNA Team

Amatya, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 2/16/2016 [Member] [MVP] Bronze | Points: 25

Up
0
Down
You can also use JQuery Ajax Method to Call a sever side method from Client Side.

Sample Implementation

HTML:
<!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="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

function CountDownTick() {

$.ajax({
type: "POST",
url: "JqueryAjaxPost.aspx/GetCurrentTime",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: onSuccess,
failure: function (AjaxResponse) {
alert("Failed: " + AjaxResponse.d);
}
});
function onSuccess(AjaxResponse) {
$("#Result").html("The time is: " + AjaxResponse.d);
alert(AjaxResponse.d);
}

}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="btnGetTime" type="button" value="Show Current Time" onclick="CountDownTick()" />
</div>
</form>
</body>
</html>


C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace EmptyWebApp
{
public partial class JqueryAjaxPost : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
//Server Side Method which will get called from Client Side
//Ensure that you have declared the method like WebMethod
[System.Web.Services.WebMethod]
public static string GetCurrentTime()
{
return "Data from Server : "+ DateTime.Now.ToString();

}
}

}


You can check this url for more details

http://www.aspsnippets.com/Articles/Call-ASPNet-Page-Method-using-jQuery-AJAX-Example.aspx
http://forums.asp.net/p/1986716/5698961.aspx


Thanks,
A2H
My Blog

Amatya, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response