ASP.NET中如何根据DropDownList选择绑定员工信息至文本框？

你现在的需求是选下拉框里的员工后自动填充文本框，我给你两种实用的实现方式，一种是服务器端回发的方式（不用JS），另一种是无刷新的AJAX方式（体验更好），你可以根据场景选择：

方案一：服务器端SelectedIndexChanged事件（无需JS） #

这种方式依靠ASP.NET的回发机制，步骤很简单：

1. 修改DropDownList控件属性
   在你的ASPX页面里，给DropDownList加上AutoPostBack="true"和OnSelectedIndexChanged事件绑定，比如：

   <asp:DropDownList ID="ddlEmployee" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlEmployee_SelectedIndexChanged"></asp:DropDownList>
   

2. 编写事件处理代码
   在后台代码（.aspx.cs）里添加以下方法，当用户切换员工时，查询数据库并填充文本框：

   protected void ddlEmployee_SelectedIndexChanged(object sender, EventArgs e)
   {
       // 先判断是否选中有效员工（排除默认的"--Select Employee--"）
       if (ddlEmployee.SelectedValue != "0")
       {
           string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
           using (SqlConnection con = new SqlConnection(constr))
           {
               // 注意你的表字段有空格，查询时要加方括号包裹
               string query = "SELECT Employee_name, [Emp_Mobile Number], Emp_State FROM tbl_Employee WHERE Emp_ID = @EmpId";
               using (SqlCommand cmd = new SqlCommand(query))
               {
                   cmd.Parameters.AddWithValue("@EmpId", ddlEmployee.SelectedValue);
                   cmd.Connection = con;
                   con.Open();
                   SqlDataReader reader = cmd.ExecuteReader();
                   if (reader.Read())
                   {
                       // 把查询到的信息填充到对应文本框
                       txtname.Text = reader["Employee_name"].ToString();
                       txtMobile.Text = reader["Emp_Mobile Number"].ToString();
                       txtState.Text = reader["Emp_State"].ToString();
                   }
                   reader.Close();
                   con.Close();
               }
           }
       }
       else
       {
           // 选中默认选项时清空文本框
           txtname.Text = "";
           txtMobile.Text = "";
           txtState.Text = "";
       }
   }
   

3. 修正Page_Load里的SQL语句
   你原来的Page_Load中SQL和字段名和实际表不匹配，要改成：

   using (SqlCommand cmd = new SqlCommand("SELECT Emp_ID, Employee_name FROM tbl_Employee"))
   

   同时DataTextField和DataValueField也要对应调整：

   ddlEmployee.DataTextField = "Employee_name";
   ddlEmployee.DataValueField = "Emp_ID";
   

方案二：jQuery AJAX无刷新实现（体验更好） #

这种方式不会触发页面回发，用户体验更流畅，需要用到jQuery和后端接口：

1. 引入jQuery
   在ASPX页面的<head>里添加jQuery引用：

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   

2. 修改DropDownList属性
   不需要AutoPostBack，加上ClientIDMode="Static"方便JS直接定位控件：

   <asp:DropDownList ID="ddlEmployee" runat="server" ClientIDMode="Static"></asp:DropDownList>
   

3. 编写前端AJAX代码
   在页面里添加脚本，监听下拉框变化并发送请求：

   $(document).ready(function() {
       $("#ddlEmployee").change(function() {
           var empId = $(this).val();
           if (empId === "0") {
               // 选中默认选项时清空文本框
               $("#txtname").val("");
               $("#txtMobile").val("");
               $("#txtState").val("");
               return;
           }
           // 发送AJAX请求获取员工信息
           $.ajax({
               url: "GetEmployeeInfo.ashx",
               type: "GET",
               data: { empId: empId },
               success: function(response) {
                   if (response) {
                       var employee = JSON.parse(response);
                       $("#txtname").val(employee.EmployeeName);
                       $("#txtMobile").val(employee.MobileNumber);
                       $("#txtState").val(employee.State);
                   }
               },
               error: function() {
                   alert("获取员工信息失败，请重试！");
               }
           });
       });
   });
   

4. 创建后端ASHX处理程序
   在项目中添加一个Generic Handler（命名为GetEmployeeInfo.ashx），代码如下：

   using System;
   using System.Web;
   using System.Data.SqlClient;
   using System.Configuration;
   using System.Web.Script.Serialization;
   
   public class GetEmployeeInfo : IHttpHandler
   {
       public void ProcessRequest(HttpContext context)
       {
           context.Response.ContentType = "application/json";
           string empId = context.Request.QueryString["empId"];
           if (!string.IsNullOrEmpty(empId) && empId != "0")
           {
               string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
               using (SqlConnection con = new SqlConnection(constr))
               {
                   string query = "SELECT Employee_name, [Emp_Mobile Number], Emp_State FROM tbl_Employee WHERE Emp_ID = @EmpId";
                   using (SqlCommand cmd = new SqlCommand(query))
                   {
                       cmd.Parameters.AddWithValue("@EmpId", empId);
                       cmd.Connection = con;
                       con.Open();
                       SqlDataReader reader = cmd.ExecuteReader();
                       if (reader.Read())
                       {
                           var employee = new
                           {
                               EmployeeName = reader["Employee_name"].ToString(),
                               MobileNumber = reader["Emp_Mobile Number"].ToString(),
                               State = reader["Emp_State"].ToString()
                           };
                           JavaScriptSerializer serializer = new JavaScriptSerializer();
                           context.Response.Write(serializer.Serialize(employee));
                       }
                       reader.Close();
                   }
               }
           }
       }
   
       public bool IsReusable => false;
   }
   

   如果你不想用ASHX，也可以在后台页面写WebMethod替代，前端AJAX请求地址改成对应页面的WebMethod即可。

注意事项 #

• 你的表字段Emp_Mobile Number包含空格，SQL查询时必须用方括号[Emp_Mobile Number]包裹，否则会语法报错。
• 方案一适合简单场景，缺点是会刷新页面；方案二无刷新，用户体验更优，适合对交互要求高的场景。

内容的提问来源于stack exchange，提问作者rchau