如何让 ASP.NET Core MVC Kendo 网格显示并绑定部分视图中的下拉菜单

Question

我想在 ASP.NET Core Kendo Grid 中显示下拉菜单。在

CarsViewModel

中，我已经有了需要在下拉列表中显示的值，因此我不需要执行 Ajax 调用来获取下拉值。我只想调用我的部分，它应该呈现下拉列表。

这是我的网格代码：

@model CarsViewModel

<div>
    @(
        Html.Kendo().Grid<CarRowViewModel>(Model.Car)
        .Name("car-grid")
        .Columns(columns =>
        {
            //Columns
            columns.Template(
            $"<partial name=\"_Model\" model=\"#= @item #\" />"
            ).Title("Model Number").Width(200);
        })
        .Scrollable(s => s.Enabled(true).Height("auto"))
        .Sortable()
        .Filterable()
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable(p => p.PageSizes(true))
        .ToolBar(toolbar =>
        {
            toolbar.Excel();
            toolbar.Search();
        })
        .Excel(excel =>
        {
            excel.FileName($"{Model.Cars}.xlsx");
            excel.AllPages(true);
        }))

</div>

这是我所调用的部分视图。

@model CarRowViewModel

<select asp-for="SelectedModelNumber" asp-items="@Model.CarModelNumber"
        class="form-select" id="modeNumbers" title="Decision">
    <option selected disabled hidden>----- Select -----</option>
</select> 

当我运行此代码时，它不会显示型号列的下拉列表。如何在剑道网格中渲染部分视图下拉列表并使其绑定？

Answer 1

最好使用“外部Kendo UI模板”。

我通常更喜欢 Ajax Call 在 Kendo Grid 中提供数据，但对于这个使用模型填充数据的问题，让我们考虑以下代码。这些代码只是为了说明这一点的示例。当然，这些代码需要根据实际程序进行修改和完善。

ASP .NET Core 页面：

@model CarsViewModel
<div>
    <script id= "ColumnTemplate" type="text/x-kendo-template">
        @Html.Partial("_ModelNumber", Model.Cars.First())
    </script>
    <script>   
        var ColumnTemplateFunction = kendo.template($('#ColumnTemplate').html());
    </script> 
    @(
        Html.Kendo().Grid<CarRowViewModel>()
        .Name("car-grid")
            .Columns(columns =>
            {
            columns.Bound(p => p.CarName);
            columns.Template("#=ColumnTemplateFunction(\"\")#").Title("Model Number").Width(200);
            })
        .Scrollable(s => s.Enabled(true).Height("auto"))
        .Sortable()
        .Filterable()
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable(p => p.PageSizes(true))
        .ToolBar(toolbar =>
        {
            toolbar.Excel();
            toolbar.Search();
        })
        .Excel(excel =>
        {
            excel.FileName($"{Model.CarListName}.xlsx");
            excel.AllPages(true);
        })
        .BindTo(Model.Cars)
        )
</div>

CarRowView模型：

public class CarRowViewModel
{
    public int CarId { get; set; }
    public string CarName { get; set; }
    public string? SelectedModelNumber { get; set; } = string.Empty;
    public IEnumerable<Microsoft.AspNetCore.Mvc.Rendering.SelectListItem>? CarModelNumber
    { 
        get
        {
            return GetCarModels(CarName);
        }
    }
    public static List<Microsoft.AspNetCore.Mvc.Rendering.SelectListItem> GetCarModels(string CarName)
    {
        if (string.IsNullOrEmpty(CarName))
            CarName = "Car";
        return new List<Microsoft.AspNetCore.Mvc.Rendering.SelectListItem>() {
            new Microsoft.AspNetCore.Mvc.Rendering.SelectListItem() { Text = CarName + "_Model_1", Value = CarName + "_1" } ,
            new Microsoft.AspNetCore.Mvc.Rendering.SelectListItem() { Text = CarName + "_Model_2", Value = CarName + "_2" } ,
            new Microsoft.AspNetCore.Mvc.Rendering.SelectListItem() { Text = CarName + "_Model_3", Value = CarName + "_3" } ,
        };
    }
    public CarRowViewModel(int carId, string carName, string selectedModelNumber = "")
    {
        CarId = carId;
        CarName = carName;
        SelectedModelNumber = selectedModelNumber;
    }
    public CarRowViewModel()
    {
        CarId = 0;
        CarName = "";
        SelectedModelNumber = "";
    }
}

汽车视图模型：

public class CarsViewModel
{
    public int CarListId { get; set; }
    public string CarListName { get; set; }
    public IEnumerable<CarRowViewModel>? Cars { get; set; }
    public CarsViewModel(int carListId, string carListName, IEnumerable<CarRowViewModel>? cars)
    {
        CarListId = carListId;
        CarListName = carListName;
        Cars = cars;
    }
    public CarsViewModel()
    {
        CarListId = 0;
        CarListName = "";
        Cars = null;
    }
}

行动方法：

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var Cars = new CarsViewModel
        (
            1, 
            "FirstList", 
            new List<CarRowViewModel>()
            {
                new CarRowViewModel(1, "Car 1"),
                new CarRowViewModel(2, "Car 2"),
                new CarRowViewModel(3, "Car 3"),
                new CarRowViewModel(4, "Car 4"),
            }
        );
        return View(Cars);
    }
}