如何在 .NET MVC 中使用 AJAX 绑定下拉数据 - JavaScript

在 .NET MVC 中，使用 AJAX 绑定下拉数据是一种非常常见的功能。使用 AJAX 绑定数据可以使网站变得更加动态和响应。

1. 在 MVC 中创建一个下拉框

下面是一个示例代码，在 .NET MVC 中如何生成一个下拉框：

@Html.DropDownListFor(m => m.SelectedDepartment, Model.Departments, "请选择一个部门", new { @class = "form-control" })

在这个例子中，我们使用了 MVC 的 DropDownListFor 帮助器方法来生成下拉框。第一个参数是一个 Lambda 表达式，它将选定的部门绑定到模型的 SelectedDepartment 属性。第二个参数是一个 SelectList 对象，它包含了数据。第三个参数是默认的占位符值。第四个参数是一个 HTML 属性对象。

2. 使用 AJAX 绑定数据

下面是一个示例代码，在 .NET MVC 中如何使用 AJAX 绑定下拉数据：

$(function () {
    $("#SelectedDepartment").change(function () {
        var url = "/Home/GetEmployeesByDepartmentId/";
        var departmentId = $(this).val();
        $.getJSON(url + departmentId, function (data) {
            var items = "<option>请选择一个雇员</option>";
            $.each(data, function (i, employee) {
                items += "<option value='" + employee.Value + "'>" + employee.Text + "</option>";
            });
            $("#SelectedEmployee").html(items);
        });
    });
});

在这个例子中，我们使用 jQuery 来绑定 AJAX 数据到下拉框上。当选定的部门改变时，change 事件将被触发。我们使用 AJAX 的 getJSON 方法来请求数据。我们将部门 ID 传递给服务器端的 GetEmployeesByDepartmentId 方法，并返回一个 JSON 格式的结果。然后我们遍历 JSON 结果，并创建新的 option 元素添加到下拉框中。

3. 在 MVC 控制器中创建一个方法

下面是一个示例代码，在 .NET MVC 中如何在控制器中创建一个 GetEmployeesByDepartmentId 方法来获取数据：

public JsonResult GetEmployeesByDepartmentId(int departmentId)
{
    var employees = GetEmployeesFromDatabase(departmentId);

    var result = employees.Select(e => new SelectListItem
    {
        Value = e.EmployeeId.ToString(),
        Text = e.Name
    });

    return Json(result, JsonRequestBehavior.AllowGet);
}

在这个例子中，我们创建一个名为 GetEmployeesByDepartmentId 的方法来获取下拉框需要的数据。我们从数据库中查询出当前部门 ID 所属的员工列表，然后把员工列表转化为 SelectListItems 格式的对象，返回一个 JSON 格式的结果。

结论

在 .NET MVC 中，使用 AJAX 绑定下拉数据是一种非常方便的方法，可以使网站变得更加动态和响应。本文中提供了一个完整的样例代码，希望对学习和使用 AJAX 绑定下拉数据在 .NET MVC 中有所帮助。