剑道网格根据 DropDownList 变化

Question

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

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

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

所以这是我试图遵循的教程。

这是我的控制器：

       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

那没那么难。 您需要做的是为您想要的每个操作更改数据源的 url。 因此，根据用户在 DDL 中选择的选项，您可以更改数据源。 检查这个演示。

您需要从上面的演示中更改的是，您的网格的 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);  
        }  

    } 

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