Call ASP.Net Page Method using jQuery AJAX Example

By: Suresh Dasari Aug 2, 2016

Introduction:

Here I will explain how to call asp.net page method using jQuery ajax example or jQuery ajax call asp.net page method with example or asp.net page method using jQuery ajax with example or jQuery ajax bind dropdownlist using asp.net page method with example.

Description:

In previous articles I explained jQuery load more data when click on button in asp.net, jQuery autocomplete textbox with master page in asp.net, jQuery ajax json example in asp.net, Bind gridview using JQuery in asp.net, AutoComplete textbox with JQuery using asp.net and many articles related to jQuery, asp.net and ajax. Now I will explain how to call asp.net page using jQuery ajax with example.

We will learn how to call asp.net page method using jQuery ajax with dropdownlist binding from database for that first design table in database and give name as Country as shown below

Column Name	Data Type	Allow Nulls
CountryId	int(set identity property=true)	No
CountryName	varchar(50)	Yes

After completion table design enter some of Country details in database to work for our sample and write the following code in your aspx page

<title>Bind Dropdownlist with JQuery in asp.net</title>

$(document).ready(function() {

$.ajax({

type: "POST",

contentType: "application/json; charset=utf-8",

url: "Default.aspx/BindDatatoDropdown",

data: "{}",

dataType: "json",

success: function(data) {

$.each(data.d, function(key, value) {

$("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));

});

},

error: function(result) {

alert("Error");

}

});

</script>

</head>

<body>

<div>

<asp:DropDownList ID="ddlCountry" runat="server" />

</div>

</form>

</body>

</html>

If you observe above code in header section I added script file link by using that file we have a chance to interact with JQuery. If you want to know about script function mentioned in header section check these posts JQuery AutoComplete textbox with database in asp.net and call asp.net page methods in JQuery.

Now open code behind file and add following namespaces

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Web.Services;

After that write the following code

C#.NET Code

protected void Page_Load(object sender, EventArgs e)

{

}

[WebMethod]

public static CountryDetails[] BindDatatoDropdown()

{

DataTable dt = new DataTable();

List<CountryDetails> details = new List<CountryDetails>();

using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true"))

{

using (SqlCommand cmd = new SqlCommand("SELECT CountryID,CountryName FROM Country", con))

{

con.Open();

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(dt);

foreach (DataRow dtrow in dt.Rows)

{

CountryDetails country = new CountryDetails();

country.CountryId = Convert.ToInt32(dtrow["CountryId"].ToString());

country.CountryName = dtrow["CountryName"].ToString();

details.Add(country);

}

return details.ToArray();

}

public class CountryDetails

{

public int CountryId { get; set; }

public string CountryName { get; set; }

}

VB.NET Code:

Imports System.Collections.Generic

Imports System.Data

Imports System.Data.SqlClient

Imports System.Web.Services

Partial Class _Default

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub

<WebMethod()> _

Public Shared Function BindDatatoDropdown() As CountryDetails()

Dim dt As New DataTable()

Dim details As New List(Of CountryDetails)()

Using con As New SqlConnection("Data Source=SureshDasari;Initial Catalog=MySampleDB;Integrated Security=true")

Using cmd As New SqlCommand("SELECT CountryID,CountryName FROM Country", con)

con.Open()

Dim da As New SqlDataAdapter(cmd)

da.Fill(dt)

For Each dtrow As DataRow In dt.Rows

Dim country As New CountryDetails()

country.CountryId = Convert.ToInt32(dtrow("CountryId").ToString())

country.CountryName = dtrow("CountryName").ToString()

details.Add(country)

End Using

Return details.ToArray()

End Function

Public Class CountryDetails

Public Property CountryId() As Integer

Get

Return m_CountryId

End Get

Set(ByVal value As Integer)

m_CountryId = Value

End Set

End Property

Private m_CountryId As Integer

Public Property CountryName() As String

Get

Return m_CountryName

End Get

Set(ByVal value As String)

m_CountryName = Value

End Set

End Property

Private m_CountryName As String

End Class

If you observe above example we are calling [Web Method] in asp.net page using jQuery ajax method. Now run your application and check the output that would be like this