通过kendo网格将视图模型中的数据传递给控制器

时间:2016-10-25 17:41:40

标签: vb.net model-view-controller kendo-ui

到目前为止,我只是尝试实例化我的kendogrid并从我的视图模型中传递值。我从Telerik的vb.net文档中获得了以下代码。问题是,从.Grid抛出异常 - > “公共可覆盖重载函数网格(T作为类)的类型参数作为网格构建者(t)无法推断”

Html.Kendo()。网格()。名称( “kendogrid”)

我不确定这个错误意味着什么,我不知道如何修复它。

查看

$(document).ready(function () {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "TestAjax",
                dataType: "json",
                type: "GET",
            },
            update: {
                url: "update",
                dataType: "json",
                type: "POST"
            },
            create: {
                url: "CreateInvoiceRecord",
                dataType: "json",
                type: "GET",
            },
            parameterMap: function (options, operation) {
                console.log(operation);
                console.log(options);
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
            }
        },
        batch: true,
        pageSize: 20,
        schema: {
            model: {
                id: "itemID",
                fields: {
                    ItemName: { type: "string" },
                    Amount: { type: "number", editable: false, validation: { required: true } },
                    ProductLine: { type: "string" },
                    Status: { type: "string" },
                }
            }
        },
        aggregate: [{ field: "Amount", aggregate: "sum" }
        ]
    });
    $("#kendogrid").kendoGrid({
        DataSource: dataSource,
        pageable:  true,
        height: 550,
        toolbar: ["create", "save"],
        columns: [
            { field: "ItemName", title: "Item", width: "150px" },
            { field: "Amount", title: "Amount", format: "{0:c}", width: "100px", aggregates: ["sum"], footerTemplate: "Total Amount: #=sum#" },
            { field: "ProductLine", title: "Product Line", width: "150px", editor: productLineDropDownEditor},
            { field:  "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
            { command:  "Update", title: "Update" , width:"150px"}],
        editable: true
        });
});

模型

Public Class MyViewModel
    Public Property id As String
    Public Property id2 As String
End Class

2 个答案:

答案 0 :(得分:0)

来自http://docs.telerik.com/kendo-ui/aspnet-mvc/vb#grid的VB网格语法 是:

Html.Kendo().Grid(Of YourViewModelClassThatYouWantToBindTheGridTo)() _
    .Name("grid") _
    ...additional configuration.

您缺少告诉网格您要绑定的对象类型的部分(" NameOfYourClass"部分。

您应该发布整个网格定义。

另外...... C#语法太清晰了(我知道这没什么用)。

修改

好的,所以这个问题不再适用于正确的VB.NET Razor语法....

这就是你得到的"额外"从dataSource传递给控制器​​方法的数据:您使用dataSource.transport.read.data配置(http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data

使用对象:

transport: {
        read: {
            url: "TestAjax",
            dataType: "json",
            type: "GET",
            data: {
                parameterToPassToReadAction: valueYouWantToPassToReadAction
            }
        },

使用功能:

transport: {
        read: {
            url: "TestAjax",
            dataType: "json",
            type: "GET",
            data: extraDataFunction
        },

function extraDataFunction () {
    return {
        parameterToPassToReadAction: valueYouWantToPassToReadAction
    };
}

其中parameterToPassToReadAction是服务器方法中参数的名称,valueYouWantToPassToReadAction是您希望它的值...它存储在页面加载时存储的位置。如果它位于vbhtml文件的ViewModel中,并且您的javascript位于同一文件的脚本块中,则语法如下:

function extraDataFunction () {
    return {
        parameterToPassToReadAction: @Model.FieldYouWantToSend
    };
}

但目前尚不清楚存储此值的位置。

答案 1 :(得分:0)

最后得到了我想要使用hack进行创建然后使用ajax进行读取的工作。不完全确定为什么它的工作方式如此,所以我需要再研究一下。我需要将参数传递给连接到kendogrid的控制器 - 特别是读取和创建操作。我创建了一个视图模型来存储我从索引控制器获得的值,然后使用视图模型将值从kendogrid传递给read和create操作控制器。出于某种原因,我只能使用ajax将参数传递给读取操作。

注意:仍然不是最好的解决方案。它调用readData控制器两次,我不希望这样。

的Javascript

<Script>
    $(document).ready(function () {
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {    
                    url: "readData",
                    dataType: "json",
                    type: "GET",                  
                },
                create: {
                    url: "CreateInvoiceRecord?trxid=@Model.id2&bcid=@Model.id",
                    dataType: "json",
                    type: "GET",
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "itemID",
                    fields: {
                        ItemName: { type: "string" },
                        Amount: { type: "number", validation: { required: true } },
                        ProductLine: { type: "string" },
                        Status: { type: "string" }
                    }
                }
            },
            aggregate: [{ field: "Amount", aggregate: "sum" }]
        });
        $("#kendogrid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable:  true,
            height: 550,
            toolbar: ["create", "save"],
            columns: [
                { field: "ItemName", title: "Item", width: "150px" },
                { field: "Amount", title: "Amount", format: "{0:c}", width: "100px", aggregates: ["sum"], footerTemplate: "Total Amount: #=sum#" },
                { field: "ProductLine", title: "Product Line", width: "150px", editor: productLineDropDownEditor},
                { field:  "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
                { command:  "Update", title: "Update" , width:"150px"}],
            editable: true
        });
    });
    function productLineDropDownEditor(container, options) {
            $('<input required name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({              
                autoBind: false,
                valuePrimitive: true,
                dataTextField: "name",
                dataValueField: "name",
                dataSource: {
                    transport: {
                        read: {
                            url: "/Customs/getProdLines",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data: "Data",
                        model: {
                            fields: {}
                        }
                    },
                }
            });
    }
    function statusDropDownEditor(container, options) {
            var data = [
                { text: "Active", value: "1" },
                { text: "Paid", value: "2" },
                { text: "Cancelled", value: "3" }
            ]
            $('<input required name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                valuePrimitive: true,
                dataTextField: "text",
                dataValueField: "value",
                autobind: false,
                dataSource: data
            });
    }
    //function testAjax() {     
    //}
    //data: { 'name': ItemName, 'amount': Amount, 'prodline': ProductLine, 'status': Status },
    $.ajax({
        type: "Get",
        data: { id: "@Model.id", id2:"@Model.id2" },
        url: "readData/",
        dataType: "json",
        success: function (itemList) {
            console.log(itemList);
        }
    });
</script>

模型

Public Class MyViewModel
    Public Property id As String
    Public Property id2 As String
End Class