获取剑道窗口参数

Question

我有一个打开剑道窗口的 JavaScript 方法，这个窗口包含一个剑道网格，它有一个我想从我的控制器获取的数据源。为了让数据填充这个网格，我需要传递一个 ID。打开此窗口的 JavaScript 方法包含必要的数据，但是我不知道如何在我的 kendo-grid 中获取这些数据。我需要将我的 ID 放到我想用我的 ID 替换问号的 (read => read.Action("Read_Action", "ControlerName", new { linenum = ??? }) 部分。

JavaScript：

    function showDetails(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        console.log(dataItem.LineNum);
        var wnd = $("#Details").data("kendoWindow");
        wnd.center().open();
    }

剑道窗口：

@{Html.Kendo().Window().Name("Details")
    .Title("Location Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(800)
    .Height(600)
    .Content(                                
          Html.Kendo().Grid<TelerikMvcApp1.Models.BinLocationItemModel>()
               .Name("LocItemGrid")
               .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(m => m.BinLocationItemId))
                    .Read(read => read.Action("Read_Action", "ControlerName", new { linenum = ??? })))
                    .ToHtmlString()).Render();
}

Answer 1

您只能使用控制器将窗口内容作为局部视图打开。

设置你的控制器，它将渲染局部视图并将 id 添加到ViewBag 以在剑道窗口中检索，

public ActionResult GetKendoWindow(){
    ViewBag.Id = 123;
    return PartialView("_PartialView"); // Html file name
}

您的 "_PartialView" 文件现在将只包含从 ViewBag.Id 分配的 Id 的网格

Html.Kendo().Grid<TelerikMvcApp1.Models.BinLocationItemModel>()
               .Name("LocItemGrid")
               .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(m => m.BinLocationItemId))
                    .Read(read => read.Action("Read_Action", "ControlerName", new { linenum = ViewBag.Id }))

您的 kendo().window() 方法将更改为此（没有内容，因为它将从部分视图加载）

@{Html.Kendo().Window().Name("Details")
    .Title("Location Details")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(800)
    .Height(600)
    .LoadContentFrom("GetKendoWindow", "Controller")
    .ToHtmlString()).Render();
}

如果您的 ID 来自父页面（您从中打开窗口的页面），您需要将 ID 传递给控制器​​，然后您的 .LoadContentFrom("GetKendoWindow", "Controller") 将变为 .LoadContentFrom("GetKendoWindow?ID=123", "Controller")。

您的控制器声明将变为public ActionResult GetKendoWindow(int ID)

编辑： 当您从 JavaScript 事件中检索值时，为了简单起见，您最好希望使用 JavaScript 打开窗口，在您的事件中输入以下内容

$("#Details").kendoWindow({
    width: "620px",
    height: "620px",
    title: "Window Title",
    content: {
       url: "GetKendoWindow",
       type: "GET",
       data: {ID : dataItem.ID}
    }
});

完全删除你的Kendo().Window() Razor 函数，留下一个id为Details的空div，并使用$("#Details").data("kendoWindow").center().open()打开窗口

为简单起见，完整的代码：

<div id="Details"></div>

<script>
// Your event function where you retrieve the dataItem
$("#Details").kendoWindow({
    width: "620px",
    height: "620px",
    title: "Window Title",
    content: {
       url: "GetKendoWindow",
       type: "GET",
       data: {ID : dataItem.ID}
    }
});

$("#Details").data("kendoWindow").center().open()
//End the event function
</script>

然后从上面添加你的控制器方法。

public ActionResult GetKendoWindow(int ID){
    ViewBag.Id = ID;
    return PartialView("_PartialView"); // Html file name
}

Answer 2

你可以像这样使用Kendo DataSource additional data：

$("#grid").data("kendo-grid").dataSource.read({additional:"data"});

这是在网格演示页面上工作：http://demos.telerik.com/kendo-ui/grid/remote-data-binding。它将参数添加到请求中。

您可能可以在 dataSource 中设置返回附加数据的函数 - 请参阅文档：http://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-do-i-send-values-to-my-action-method-when-binding-the-grid?

编辑 1

您可以简单地通过设置网格的附加请求数据来实现：

 $("#grid").data("kendo-grid").dataSource.transport.options.read.data = { additional: "data"};

所以你用剑道网格打开窗口。选择具有典型$(...).data("kendoGrid") 的网格。然后将dataSource.transport.options.read.data 设置为您的线路ID。