Сетка кендо меняется в зависимости от DropDownList

Question

Перед тем, как начать, я просто скажу, что перед публикацией я посмотрел другие ответы, и ни один из них не помог мне.

Мне нужно создать сетку пользовательского интерфейса Kendo в ASP.NET MVC, которая меняется в зависимости отчто пользователи выбирают из 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, верно? В этом URL вы изменяете желаемое действие:

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

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

Он будет читать новый URL, извлекать данные в таблицу и обновлять их.

UPDATE

Транспортный 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) Удалите сетку из этого представления и создайте новое частичное представление, и просто поместите сетку в это.

Теперь это может быть одним из двух способов.Либо онклик через выпадающий список, либо 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) Получите значение раскрывающегося списка и передайте его методу контроллера, который вызывает это новое частичное представление, отправив ему идентификатор в модели

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);  
        }  

    } 

Это должно позволить вам изменить таблицу на основе раскрывающегося списка.