I have bound dropdown using jquery at the time of page load; but after selecting a text of that dropdown and submit a button to get the value of that dropdown it shows blank on the server side.
Can anyone help me to solve this problem.
Thanks in advance.
Here is the web service through which i am binding dropdown
[WebMethod]
public static CountryDetails[] BindDatatoDropdown()
{
DataTable dt = new DataTable();
List<countrydetails> details = new List<countrydetails>();
using (SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["connectionstring"].ConnectionString))
{
using (SqlCommand cmd = new SqlCommand("SELECT ID,Name FROM test", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dtrow in dt.Rows)
{
CountryDetails country = new CountryDetails();
country.ID = Convert.ToInt32(dtrow["ID"].ToString());
country.Name = dtrow["Name"].ToString();
details.Add(country);
}
}
}
return details.ToArray();
}
public class CountryDetails
{
public int ID { get; set; }
public string Name { get; set; }
}
and through this following JQuery i am binding dropdown and it works perferctly
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "AllAccomodation.aspx/BindDatatoDropdown",
data: "{}",
dataType: "json",
success: function (data) {
$.each(data.d, function (key, value) {
$("#ContentPlaceHolder1_typelisting").append($("<option></option>").val(value.ID).html(value.Name));
});
},
error: function (result) {
alert("Error");
}
});
});