Hi gpiyush152,
I have created a sample which full fill your requirement
CS.aspx
<div>
<asp:DropDownList ID="ddlCustomers" runat="server">
</asp:DropDownList>
<br />
<asp:Button ID="btnSubmit" Text="Submit" OnClick="Display" runat="server" />
<asp:HiddenField ID="hfID" runat="server" />
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var ddlCustomers = $("[id*=ddlCustomers]");
ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
$.each(r.d, function () {
ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Value']));
});
}
});
$('[id*=ddlCustomers]').change(function () {
$('[id*=hfID]').val($(this).find("option:selected").text());
});
});
</script>
</div>
CS.aspx.cs
protected void Display(object sender, EventArgs e)
{
Response.Redirect("DisplayDetails.aspx?ID=" + hfID.Value);
}
[WebMethod]
public static List<ListItem> GetCustomers()
{
string query = "SELECT DISTINCT CustomerId, Name FROM Customers";
string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
List<ListItem> customers = new List<ListItem>();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new ListItem
{
Value = sdr["CustomerId"].ToString(),
Text = sdr["Name"].ToString()
});
}
}
con.Close();
return customers;
}
}
}
DisplayDetails.aspx
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
ID
</td>
<td>
<asp:Label ID="lblID" runat="server" />
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<asp:Label ID="lblName" runat="server" />
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
<asp:Label ID="lblCountry" runat="server" />
</td>
</tr>
</table>
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var id = window.location.href.split('?')[1].split('=')[1];
$.ajax({
type: "POST",
url: "DisplayDetails.aspx/GetCustomerDetail",
data: "{id:'" + id + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$('[id*=lblID]').html(r.d[0]);
$('[id*=lblName]').html(r.d[1]);
$('[id*=lblCountry]').html(r.d[2]);
}
});
});
</script>
</div>
DisplayDetails.aspx.cs
[WebMethod]
public static List<string> GetCustomerDetail(int id)
{
string query = "SELECT CustomerId, Name,Country FROM Customers WHERE CustomerId='" + id + "'";
string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
List<string> customerDetail = new List<string>();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
if (sdr.Read())
{
customerDetail.Add(sdr[0].ToString());
customerDetail.Add(sdr[1].ToString());
customerDetail.Add(sdr[2].ToString());
}
}
con.Close();
return customerDetail;
}
}
}
ScreenShot
Hope this works for you.
