How to use AJAX with ASP.NET Webform

Last modified: February 25, 2022
Step 1

Create an ASP.NET Web Form application.

createproject createproject createproject

Step 2

Delete the content of the Default.aspx and we left with below.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAX._Default" %> <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> </asp:Content>
Step 3

RouteConfig.cs file in the App_Start folder, we need to modify the file. For RegisterRoutes, we need to replace with the following code otherwise the AJAX will return 401.

public static void RegisterRoutes(RouteCollection routes) { var settings = new FriendlyUrlSettings(); settings.AutoRedirectMode = RedirectMode.Off; routes.EnableFriendlyUrls(settings); }

In AJAX call, we have couple of HTTP Verbs. Most common are below.

  • GET - equals to get the data from server
  • POST - equals to sending the data to server to insert
  • PUT - equals to sending the data to server to update
  • DELETE- equals to sending the data to server to delete

It is very import that we put [WebMethod] on top of method, otherwise we can't call in AJAX.

Create a class called Mobile with below properties
public class Mobile { public string ModelName { get; set; } public decimal Price { get; set; } }
Step 4 GET
[WebMethod] [ScriptMethod(UseHttpGet = true)] public static List<Mobile> GetMobileList() { var mobileList = new List<Mobile>() { new Mobile{ModelName= "Iphone12", Price = 600}, new Mobile{ModelName= "Iphone12Pro", Price = 700}, new Mobile{ModelName= "Iphone13", Price = 800}, new Mobile{ModelName= "Iphone13Pro", Price = 900}, new Mobile{ModelName= "Iphone12", Price = 1000}, }; return mobileList; }
Step 5 POST
[WebMethod] // POST public static string SayHello(string name) { return "Hello " + name; }
Step 6 PUT

Both PUT and DELETE in ASP.NET Webform use POST Verbs

Step 5

We create a button to trigger the AJAX call when it is click. We are using JQuery AJAX methods.

  • type: type of verb of the method e.g. POST, GET
  • url: the endpoint of the method to call
  • data: the date to send from User Interface to Code Behind method
  • contentType: type of content format we are sending
  • dataType: type of conent when receiving

We need to use msg.d to get the message.

<br /> <button type="button" id="SayHello">Say Hello</button> <br /><br /><br /> <button type="button" id="GetMobileList">Get Mobile List</button> <br /><br /><br /> <button type="button" id="UpdateMobilePrice">Update Mobile Price</button> <br /><br /><br /> <table class="tblMobileList table"> <thead> <tr> <th> <b>Name</b> </th> <th> <b>Price</b> </th> </tr> </thead> <tbody> <tr> <td><span class="name"></span></td> <td><span class="price"></span></td> </tr> </tbody> </table> <script type="text/javascript"> $("#SayHello").click(function () { $.ajax({ type: "POST", //POST url: "Default.aspx/SayHello", data: "{name: 'Mark'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { console.log(msg.d); }, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); }); $("#GetMobileList").click(function () { $.ajax({ type: "GET", //GET url: "Default.aspx/GetMobileList", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { DrawTable(msg.d); }, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); }); function DrawTable(mobiles) { $.each(mobiles, function (i, item) { var $tr = $('<tr>').append( $('<td>').text(item.ModelName), $('<td>').text(item.Price), ).appendTo('.tblMobileList') }); }