ASP.NET MVC Html.DropDownList 通过 Ajax 调用控制器填充

Ajax

使用 ASP.NET MVC 开发网页应用程序时，经常会遇到需要通过 Ajax 调用控制器来填充下拉列表框的需求。ASP.NET MVC 提供了一个方便的方法来实现这个功能，即使用 Html.DropDownList 辅助方法以及 Ajax 调用。

使用 Html.DropDownList 填充下拉列表框

在 ASP.NET MVC 中，我们可以使用 Html.DropDownList 辅助方法来生成下拉列表框。可以将一个 SelectList 对象作为参数传递给这个方法，SelectList 对象包含了下拉列表框中的选项和值。

首先，在控制器中创建一个 SelectList 对象，包含要显示的选项和对应的值。例如，我们创建一个名为 "countries" 的 SelectList 对象，它包含了一些国家的选项和对应的国家代码：

csharp
List<SelectListItem> countriesList = new List<SelectListItem>
{
    new SelectListItem { Text = "China", Value = "CN" },
    new SelectListItem { Text = "United States", Value = "US" },
    new SelectListItem { Text = "United Kingdom", Value = "UK" },
    // 其他国家的选项...
};
SelectList countries = new SelectList(countriesList, "Value", "Text");

然后，在视图中使用 Html.DropDownList 方法来生成下拉列表框：

csharp
@Html.DropDownList("Country", countries, "Select a country")

上述代码中，"Country" 是下拉列表框的名称，countries 是 SelectList 对象，"Select a country" 是默认选项的文本。

通过 Ajax 调用控制器填充下拉列表框

有时候，我们希望在用户进行某些操作后，动态地填充下拉列表框的选项。这时，可以使用 Ajax 调用控制器来实现。

首先，在视图中添加一个用于触发 Ajax 请求的元素，例如一个按钮：

csharp
<input type="button" id="refreshButton" value="Refresh" />

然后，在 JavaScript 代码中，为按钮的点击事件添加一个 Ajax 请求：

Javascript
$(document).ready(function() {
    $("#refreshButton").click(function() {
        $.Ajax({
            url: "@Url.Action("Getcountries", "Home")",
            type: "GET",
            success: function(data) {
                // 将返回的数据填充到下拉列表框中
                $("#Country").html(data);
            }
        });
    });
});

上述代码中，"Getcountries" 是控制器中的一个方法，负责返回下拉列表框的选项。"Home" 是控制器的名称。

在控制器中，实现 Getcountries 方法来返回下拉列表框的选项：

csharp
public ActionResult Getcountries()
{
    List<SelectListItem> countriesList = new List<SelectListItem>
    {
        new SelectListItem { Text = "China", Value = "CN" },
        new SelectListItem { Text = "United States", Value = "US" },
        new SelectListItem { Text = "United Kingdom", Value = "UK" },
        // 其他国家的选项...
    };
    SelectList countries = new SelectList(countriesList, "Value", "Text");
    return PartialView("_CountriesDropdown", countries);
}

上述代码中，"_CountriesDropdown" 是一个局部视图，用于渲染下拉列表框的选项。

示例代码

下面是一个完整的示例，演示了如何使用 Html.DropDownList 和 Ajax 调用控制器来填充下拉列表框：

csharp
// 控制器代码
using System.Collections.Generic;
using System.Web.Mvc;
namespace MvcApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Getcountries()
        {
            List<SelectListItem> countriesList = new List<SelectListItem>
            {
                new SelectListItem { Text = "China", Value = "CN" },
                new SelectListItem { Text = "United States", Value = "US" },
                new SelectListItem { Text = "United Kingdom", Value = "UK" },
                // 其他国家的选项...
            };
            SelectList countries = new SelectList(countriesList, "Value", "Text");
            return PartialView("_CountriesDropdown", countries);
        }
    }
}
// 视图代码
@model SelectList
@{
    ViewBag.Title = "Home Page";
}
<h2>下拉列表框示例</h2>
@Html.DropDownList("Country", Model, "Select a country")
<input type="button" id="refreshButton" value="Refresh" />
<script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
<script>
    $(document).ready(function() {
        $("#refreshButton").click(function() {
            $.Ajax({
                url: "@Url.Action("Getcountries", "Home")",
                type: "GET",
                success: function(data) {
                    // 将返回的数据填充到下拉列表框中
                    $("#Country").html(data);
                }
            });
        });
    });
</script>
// 局部视图代码 "_CountriesDropdown.cshtml"
@model SelectList
@Html.DropDownList("Country", Model, "Select a country")

本文介绍了如何使用 ASP.NET MVC 的 Html.DropDownList 辅助方法和 Ajax 调用控制器来填充下拉列表框。通过 Html.DropDownList 方法可以快速生成下拉列表框，而通过 Ajax 调用控制器可以动态地填充下拉列表框的选项。这种方法为开发者提供了一种便捷的方式来实现这一功能，方便用户进行选择操作。