劍道網格根據 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);  
        }  

    } 

這應該允許您根據下拉列表更改表格。