在ASP.NET页面中,经常需要根据用户的选择动态更新页面内容。例如,当用户从一个下拉列表中选择一个州时,希望自动填充另一个下拉列表,显示该州的所有城市。为了实现这个功能,可以使用AJAX技术。AJAX允许在不重新加载整个页面的情况下,与服务器进行数据交换和更新部分网页内容。
首先,需要在ASP.NET页面中创建两个下拉列表。第一个下拉列表用于显示州的列表,第二个下拉列表用于显示城市。可以使用ASP.NET的DropDownList控件来创建这两个下拉列表。在页面加载时,需要从数据库中读取州的列表,并将其绑定到第一个下拉列表中。
<select id="statelist" runat="server" onchange="showCity()" style="width: 160px">
<option></option>
</select>
<asp:DropDownList ID="citylist" runat="server" Width="184px">
</asp:DropDownList>
接下来,需要编写JavaScript代码来处理用户选择州后自动填充城市的逻辑。当用户从第一个下拉列表中选择一个州时,需要发送一个AJAX请求到服务器,请求该州的所有城市。服务器处理请求后,将返回一个包含所有城市名称的字符串。然后,将这个字符串分割成一个数组,并使用这个数组来填充第二个下拉列表。
在服务器端,需要编写一个处理AJAX请求的方法。当收到AJAX请求时,需要从数据库中查询指定州的所有城市,并将这些城市名称拼接成一个字符串,然后返回给客户端。在ASP.NET中,可以使用SqlDataReader对象来读取数据库查询结果,并使用Response.Write方法将结果字符串发送回客户端。
SqlConnection con = new SqlConnection("data source = MY\\SQLEXPRESS; initial catalog = try; integrated security=true");
protected void Page_Load(object sender, EventArgs e) {
if (!Page.IsPostBack) {
con.Open();
SqlCommand cmd = new SqlCommand("select * from test", con);
SqlDataReader dr;
dr = cmd.ExecuteReader();
statelist.DataSource = dr;
statelist.DataTextField = "state";
statelist.DataBind();
dr.Close();
con.Close();
}
if (Request.QueryString["name"] != null) {
string name = Request.QueryString["name"];
Response.Clear();
con.Open();
SqlCommand cmd = new SqlCommand("select * from test where state=@state", con);
cmd.Parameters.AddWithValue("@state", name);
SqlDataReader dr;
dr = cmd.ExecuteReader();
string str = "";
int a = 0;
while (dr.Read()) {
if (a == 0)
str += dr["city"].ToString();
else
str += "," + dr["city"].ToString();
a++;
}
Response.Write(str);
Response.End();
con.Close();
}
}
通过以上步骤,就可以实现在ASP.NET页面中,当用户选择一个州后,自动填充该州的所有城市到第二个下拉列表中。这个功能可以提高用户体验,让用户更方便地进行选择。