剑道网格根据 DropDownList 变化

Question

在我开始之前，我只想说我在发布之前查看了其他答案，但没有一个特别帮助我。

我需要在 ASP.NET MVC 中创建一个 Kendo UI 网格，该网格会根据用户从 DropDownList 中选择的内容而变化。我最终将使用数据库中的数据，但目前我正在尝试使用随机硬编码数据进行学习。

我在网上找到了一个教程，该教程向我展示了如何使用示例数据库中的数据进行操作，但由于无法解释的原因，我无法进行设置。因此，我正在尝试调整该教程中的代码以与我的控制器和模型一起使用。这可能设置完全错误，因为我对 ASP.NET MVC 比较陌生。

所以here's 我正在尝试遵循的教程。

这是我的控制器：

       public class LookupValueController : Controller
        {
            private List<LookupModel> tables = new 
List<LookupModel>()
                { new LookupModel() { TableName = "Table1", 
Description = "Table 1" },
                  new LookupModel() { TableName = "Table2", 
Description = "Table 2" } };

        private List<LookupValueModel> values = new List<LookupValueModel>()
            { new LookupValueModel() { TableName = "Table1", Description = "Value 1", LookupCode = "1" },
              new LookupValueModel() { TableName = "Table2", Description = "Value 2", LookupCode = "2"} };


        // GET: LookupValue
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetAllTableA()
        {
            try
            {

                var table = tables;

                return Json(table, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }

        }

        public ActionResult GetAllTableB()
        {
            try
            {

                var value = values;

                return Json(value, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }

        }
    } 

然后是我的 2 个模型：

    public class LookupValueModel
    {
        public string TableName { get; set; }
        public string LookupCode { get; set; }
        public string Description { get; set; }
    } 

    public class LookupModel
    {
        public string TableName { get; set; }
        public string Description { get; set; }
    }

我已经尝试在教程中更改视图中的值，但它不起作用，因为我相信它不像更改一些文本那么简单。

我很困惑如何做到这一点，不知道从哪里开始。我知道这是一篇包含大量代码的冗长文章，但我非常感谢一些帮助。

我在调整教程代码时哪里出错了？我必须进行哪些更改才能使其与硬编码数据一起使用？

Answer 1

这并不难。您需要做的是为您想要的每个 Action 更改 DataSource 的 url。因此，根据用户在 DDL 中选择的选项，您可以更改 DataSource。检查this demo。

您需要从上面的演示中更改的是，您的网格的 DataSource 将调用 url 而不是硬编码的 json，对吗？在该网址中，您可以更改所需的操作：

let changeTableData = function changeTableData(option) {
    let dataSource = new kendo.data.DataSource({
          transport: {
              url: "MyApp/" + option
          }
        });

    $("#grid").data("kendoGrid").setDataSource(dataSource);
};

它将读取新的 url 并将数据提取到网格中并更新它。

更新

传输 url 或你的操作的 url 路径，例如

let url;
if (option == "A") {
    url = "@Url.Action("TableA")";
} 
else if (option == "B") {
    url = "@Url.Action("TableB")";
}

let dataSource = new kendo.data.DataSource({
    transport: {
        url: url
    }
});

Answer 2

1) 从此视图中移除网格并创建一个新的局部视图，然后将网格放在其中。

现在这可以是两种方式之一。通过下拉列表的 onclick 或 onchange。你的选择

function Getdropdown()
{
    var id = $("#//dropdownID").val();  //Get the dropdown value

    var json = '{dropdownId: ' + id + '}';
    $.ajax({
        url:'@Url.Action("ViewGrid", "//Controller")',
        type:'POST',
        data:json,
        contentType:'Application/json',
        success:function(result){
            $("//The Id of of the div you want the partial to be displayed in in the cshtml").html(result);
        }
    });

}

2) 获取下拉列表的值并将其传递给调用此新局部视图的控制器方法，将模型中的 ID 发送给它

public ActionResult ViewGrid(int dropdownId)
{
    AModel model = new AModel
    {
        DropDownID = dropdownId
    };

    return PartialView("_theGridPartial", model);
}

3) 将网格更改为如下所示：

 @(Html.Kendo().Grid<KendoMvcApp.Models.EmployeeA>()  
    .Name("EmpGrid")  
    .Selectable()  
    .Columns(columns =>  
    {  

        columns.Bound(c => c.FirstName);  
        columns.Bound(c => c.LastName);  

    })  
    .DataSource(dataSource => dataSource  
        .Ajax()  
        .Read(read => read.Action("GetAllEmployee", "GridDataSource", new {id = Model.DropDownID}))  
    )  
) 

4) 这是读取的新控制器

    public ActionResult GetAllEmployee([DataSourceRequest]DataSourceRequest request, int id)  
    {  
        try  
        {  
            //Have a call that gets the table data based on the id you are passing into here. This id will be the table id you have got from your dropdown list 
        }  
        catch (Exception ex)  
        {  
            return Json(ex.Message);  
        }  

    } 

这应该允许您根据下拉列表更改表格。