Introduction:

In this article we 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:

Here we will learn how to call asp.net  page method using jQuery ajax with dropdownlist binding from server side in asp.net c# web page, so write the following code in your aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="TutorialsAsp.Net.WebForm1" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Bind Dropdownlist with JQuery in asp.net</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js">
</script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "WebForm1.aspx/BindDatatoDropdown",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    result =$.parseJSON(data.d);
                    for (i = 0; i <result.length; i++) {
                        $("#ddlUser").append($("<option></option>")
                        .val(result[i].UserId).html(result[i].UserName));
                    };
                },
                error: function (result) {
                    alert("Error");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h3>Bind Dropdownlist with JQuery in asp.net</h3>
        <div>
           <asp:DropDownList ID="ddlUser" runat="server" ClientIDMode="Static" />
        </div>
    </form>
</body>
</html>

 

Now open code behind file and add following below code:

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace TutorialsAsp.Net
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }
        [WebMethod]
        public static string BindDatatoDropdown()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("UserId", typeof(Int32));
            dt.Columns.Add("UserName", typeof(string));
 
            dt.Rows.Add(1, "Satinder Singh");
            dt.Rows.Add(2, "Amit Sarna");
            dt.Rows.Add(3, "Andrea Ely");
            dt.Rows.Add(4, "Leslie Mac");
            dt.Rows.Add(5, "Vaibhav Adhyapak");
 
            string JSONresult = JSONresult = JsonConvert.SerializeObject(dt);
            return JSONresult;
        }
    }
}

in 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

How to Call ASP.Net Page Method using jQuery AJAX Example


I hope it will help to you.


0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like