Hi EmadKhan,
If you want to fetch the data asynchronously then you need to code at client side using jquery or other option is using update panel.
I have used Northwind database Customers and Orders table records for sample you can get database from below article.
Refer below sample code and modify it according to your need.
HTML
<div>
<asp:DropDownList ID="ddlCustomers" runat="server">
</asp:DropDownList>
<br />
<span class="card-data-title">OrderID: <label id="lblOrderID" class="billDesc"></label></span>
<br />
<span class="card-data-title">Freight: <label id="lblFreight" class="billAmount"></label></span>
</div>
<div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=ddlCustomers]').change(function () {
var customerId = $(this).val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '<%=ResolveUrl("Default.aspx/GetOrderDetail") %>',
data: '{"customerId": "' + customerId + '"}',
dataType: "json",
success: function (response) {
$('[id*=lblOrderID]').html('');
$('[id*=lblFreight]').html('');
var xml = $.parseXML(response.d);
var orderDetail = $(xml).find("OrderDetail");
var orderId = $(orderDetail).find("OrderID").text();
var freight = $(orderDetail).find("Freight").text();
$('[id*=lblOrderID]').html(orderId);
$('[id*=lblFreight]').html(freight);
},
error: function (a, b, c) {
alert(a.responseText);
}
});
});
});
</script>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT TOP 10 CustomerID,ContactName FROM Customers", con))
{
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
sda.Fill(dt);
ddlCustomers.DataSource = dt;
ddlCustomers.DataTextField = "ContactName";
ddlCustomers.DataValueField = "CustomerID";
ddlCustomers.DataBind();
ddlCustomers.Items.Insert(0, (new ListItem("Please Select", "")));
}
}
}
}
}
[System.Web.Services.WebMethod]
public static string GetOrderDetail(string customerId)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
SqlConnection con = new SqlConnection(constr);
SqlCommand cmd = new SqlCommand("SELECT TOP 1 OrderID ,Freight FROM Orders WHERE CustomerID = @CustomerID", con);
cmd.Parameters.AddWithValue("@CustomerID", customerId);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable("OrderDetail");
sda.Fill(dt);
DataSet ds = new DataSet();
ds.Tables.Add(dt);
return ds.GetXml();
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand("SELECT TOP 10 CustomerID,ContactName FROM Customers", con)
Using sda As New SqlDataAdapter(cmd)
Dim dt As New DataTable()
sda.Fill(dt)
ddlCustomers.DataSource = dt
ddlCustomers.DataTextField = "ContactName"
ddlCustomers.DataValueField = "CustomerID"
ddlCustomers.DataBind()
ddlCustomers.Items.Insert(0, (New ListItem("Please Select", "")))
End Using
End Using
End Using
End If
End Sub
<System.Web.Services.WebMethod()> _
Public Shared Function GetOrderDetail(customerId As String) As String
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim con As New SqlConnection(constr)
Dim cmd As New SqlCommand("SELECT TOP 1 OrderID ,Freight FROM Orders WHERE CustomerID = @CustomerID", con)
cmd.Parameters.AddWithValue("@CustomerID", customerId)
Dim sda As New SqlDataAdapter(cmd)
Dim dt As New DataTable("OrderDetail")
sda.Fill(dt)
Dim ds As New DataSet()
ds.Tables.Add(dt)
Return ds.GetXml()
End Function
ScreenShot