Ajax Call Example Using Jquery in Asp.net
In my previous tutorials, I'd explained ajax introduction with example, how to call server-side method from javascript, how to call javascript function from code-behind and more cracking tutorials on Ajax, Asp.net, JavaScript and jQuery here.
Now here in this tutorial, I'll explain how to call server-side function using jquery ajax call from .aspx page as well as how to call code-behind method in c# or vb.net with example code.
To call code-behind function or method with parameters from jquery ajax, we need to use following function on and bind it on button click event using jquery:
<script type="text/javascript"> $(document).ready(function () { $("#btnSubmit").click(function () { //first get all parameters if any var FirstName = $('#txtFirstName').val(), LastName = $('#txtLastName').val(); $.ajax({ type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", //url: "yourpagename.aspx/yourmethodnamewithoutbracesandparameters" url: "CallMethodUsingJson.aspx/callFunction", //Be carefull about single quotation marks while parsing parameters //If function have no parameters, parse blank "data" for eg, data: "{ }", data: "{'FirstName':'" + FirstName + "', 'LastName':'" + LastName + "'}", success: function (success) { //called on ajax call success alert("Success: " + success.d); }, //call on ajax call failure error: function (xhr, textStatus, error) { //called on ajax call error alert("Error: " + error); } }); }); }); </script> Call Server-side Function using jQuery Ajax Call – [.aspx]
Following is the complete HTML Markup code that I used to call server-side function using jquery ajax call for my .aspx page:
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Call code-behind methods using json jquery example</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#btnSubmit").click(function () { //first get all parameters if any var FirstName = $('#txtFirstName').val(), LastName = $('#txtLastName').val(); $.ajax({ type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", //url: "yourpagename.aspx/yourmethodnamewithoutbracesandparameters" url: "CallMethodUsingJson.aspx/callFunction", //Be carefull about single quotation marks while parsing parameters //If function have no parameters, parse blank "data" for eg, data: "{ }", data: "{'FirstName':'" + FirstName + "', 'LastName':'" + LastName + "'}", success: function (success) { //called on ajax call success alert("Success: " + success.d); }, //call on ajax call failure error: function (xhr, textStatus, error) { //called on ajax call error alert("Error: " + error); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <h4>Call code-behind methods using json</h4> FirstName: <asp:TextBox ID="txtFirstName" runat="server" ClientIDMode="Static" /> LastName: <asp:TextBox ID="txtLastName" runat="server" ClientIDMode="Static" /> <asp:Button ID="btnSubmit" Text="Submit" runat="server" ClientIDMode="Static" OnClientClick="return false;" /> </div> </form> </body> </html> Call Code-behind Function Using jQuery Ajax Call – [C#]
First add following namespace:
using System.Web.Services;
then add the following method to your aspx.cs page:
[WebMethod] public static string callFunction(string FirstName, string LastName) { return "Your name is " + FirstName + " " + LastName + ""; } Call Code-behind Function Using jQuery Ajax Call – [Vb.net]
First add following namespace:
Imports System.Web.Services
then add the following method to your aspx.vb page:
<WebMethod()> Public Shared Function callFunction(ByVal FirstName As String, ByVal LastName As String) As String Return "Your name is " & FirstName & " " & LastName & "" End Function
Note: You must need to make server method as static [WebMethod] as shown in above example code.
Example Result
Download Example
Git Repo
Ajax Call Example Using Jquery in Asp.net
Source: https://www.aspneto.com/how-to-call-server-side-function-or-method-using-jquery-ajax-in-asp-net
0 Response to "Ajax Call Example Using Jquery in Asp.net"
Post a Comment