如何将Kendo UI ComboBoxFor控件替换为对应MVC控件

针对你的需求，分两种实现方案说明，对应不同的数据源加载方式：

方案一：同步加载（Index Action提前获取数据源） #

如果希望页面加载时就渲染好下拉选项，确实需要在Index Action中调用接口获取数据，具体步骤如下：

1. 扩展ViewModel #

添加用于存储下拉选项的集合属性：

public class YourViewModel
{
    public int ProductId { get; set; }
    // 新增下拉列表数据源属性
    public IEnumerable<SelectListItem> ProductOptions { get; set; }
}

2. 修改Index Action #

在Action中调用GetProductForProject接口（注意原接口为POST类型，需构造对应过滤参数），将返回数据转换为SelectListItem集合并绑定到ViewModel：

public ActionResult Index()
{
    var model = new YourViewModel();
    
    // 构造原Kendo控件中hierarchy.filterProduct返回的过滤参数
    // 示例：假设需要传递当前项目ID，可从Session/路由等渠道获取
    var filterParams = new 
    { 
        ProjectId = Session["CurrentProjectId"]?.ToString(),
        // 若需要默认过滤条件，可在此补充
    };

    // 调用接口获取产品数据（同项目内可直接调用Action方法，跨项目则用HttpClient）
    var products = GetProductForProject(filterParams);
    
    // 转换为下拉选项格式
    model.ProductOptions = products.Select(p => new SelectListItem
    {
        Value = p.ProductId.ToString(),
        Text = p.Name
    });

    return View(model);
}

// 原GetProductForProject接口（示例）
[HttpPost]
public JsonResult GetProductForProject(FilterRequestModel filter)
{
    // 从数据库/业务层获取过滤后的产品数据
    var productList = _productService.GetProductsByFilter(filter);
    return Json(productList);
}

3. 视图中渲染DropDownListFor #

@Html.DropDownListFor(model => model.ProductId, Model.ProductOptions, "请选择产品", new { style = "width:100%" })

方案二：异步加载（保留原Kendo的动态过滤特性） #

如果想保持原控件“用户输入后动态加载数据”的行为，无需在Index Action提前加载，通过Ajax动态填充下拉选项即可：

1. 视图中渲染空的DropDownListFor #

@Html.DropDownListFor(model => model.ProductId, new List<SelectListItem>(), "请选择产品", new { style = "width:100%", id = "GreenProduct" })

2. 添加JavaScript异步加载逻辑 #

监听输入事件，调用接口获取数据并填充下拉选项：

$(function() {
    $("#GreenProduct").on("input", function() {
        var inputVal = $(this).val();
        // 获取原Kendo控件的过滤参数
        var filterParams = hierarchy.filterProduct();
        // 补充输入框的过滤文本
        filterParams.FilterText = inputVal;

        $.ajax({
            url: '@Url.Action("GetProductForProject", "Product")',
            type: "POST",
            data: filterParams,
            success: function(res) {
                var $dropdown = $("#GreenProduct");
                $dropdown.empty();
                // 添加默认选项
                $dropdown.append($("<option>").text("请选择产品").val(""));
                // 遍历数据添加选项
                $.each(res, function(idx, item) {
                    $dropdown.append($("<option>").text(item.Name).val(item.ProductId));
                });
            },
            error: function() {
                alert("产品数据加载失败");
            }
        });
    });
});

两种方案对比 #

• 同步加载：实现简单，页面加载时即有数据，适合数据量小的场景；但无法实时根据用户输入过滤（需刷新页面），数据量大时会增加页面加载耗时。
• 异步加载：保留原Kendo的动态过滤特性，页面加载更快，适合数据量大的场景；但需额外编写JavaScript处理异步逻辑。

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