[英]ASP.NET / Webforms / C# - populating 2nd dropdown based on 1st dropdown without postback with code behind binding
Please help. 请帮忙。
I have 3 dropdowns : 1. Country 2. Port 3. Company Name 我有3个下拉列表:1.国家2.端口3.公司名称
Once 1st dropdown (countries) is selected, 2nd dropdown should be populated with a list of specific ports, then based on 1st and 2nd dropdown, the 3rd dropdown will be populated also. 选择第一个下拉列表(国家/地区)后,应使用特定端口列表填充第二个下拉列表,然后根据第一个和第二个下拉列表,也将填充第三个下拉列表。
this is a one time key-in. 这是一次性键入。 Meaning once selection is done, the user will save it in db and the value should remain in the dropdown unless the user change. 这意味着选择完成后,用户会将其保存在db中,并且除非用户更改,否则该值应保留在下拉列表中。
Right now, i'm using OnSelectedIndexChanged which is very slow because of the postback. 现在,我正在使用OnSelectedIndexChanged,由于回发,它非常慢。
let me know if there's any other way of doing. 让我知道是否还有其他方法。
Thanks, Jack 谢谢杰克
there could have several ways to achieve this. 可能有几种方法可以实现这一目标。 One of the ways is using WebService [WebMethod]. 一种方法是使用WebService [WebMethod]。 Ajax and JSON. Ajax和JSON。
//You databinding method must be public and add [WebMethod] attribute
[WebMethod]
public static List<ListItem> GetCustomers()
{
string query = "SELECT CustId, CustName FROM Customers";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
List<ListItem> custListItem = new List<ListItem>();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
custListItem.Add(new ListItem
{
Value = Convert.ToString(sdr["CustId"]),
Text = Convert.ToString(sdr["CustName"])
});
}
}
con.Close();
return custListItem;
}
}
}
<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: "CustomerList.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['Text']));
});
}
});
});
</script>
You basically have 2 options, preload your values into a js structure (counties, ports and companies), or use a ajax/xmlhttprequest call to load just the relevant information (just the ports for a specific country). 您基本上有2个选择,将值预加载到js结构中(县,港口和公司),或使用ajax / xmlhttprequest调用仅加载相关信息(仅加载特定国家/地区的端口)。 If preloading the values, you can either mix it in with your html in the body of a script tag, or have it be a seperate file that is loaded via a src attribute. 如果要预加载值,则可以将其与脚本标记正文中的html混合使用,也可以将其作为通过src属性加载的单独文件。
Which is best to use will vary based upon your user base and data size, and how frequently the data changes. 哪种方法最适合使用,取决于您的用户群和数据大小以及数据更改的频率。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.