Download 100% FREE Office Document APIs for .NET
DotNetFunda.com
Online: 1031
Home > Forums > jQuery >

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

Posted by Amatya under jQuery on 2/16/2016 | Points: 10 | Views : 14189 | Status : [Member] | Replies : 2
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
How to call C# code behind method using JQuery. Share the code.

Feel free to share informations.
mail Id ' adityagupta200@gmail.com
Thanks

Reply | Reply with Attachment
Alert Moderator 

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] Silver | 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

Latest Posts