剣道グリッドを介してビューモデルのデータをコントローラに渡す

Question

これまでのところ、私はケンドグリッドをインスタンス化して、ビューモデルの値を渡そうとしています。 vb.netのTelerikのドキュメントから次のコードを入手しました。つまり、.Grid - > "グリッドビルダ（t）のパブリック上書き可能オーバーロード関数グリッド（Tのクラス）の型パラメータは推論できません"

Html.Kendo .Grid（）。名前（ "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 

Answer 1

最後に、作成のためのハックを使用して作業をしたい、そして読書のためにajaxを使用しました。なぜこれが動作するのか全然わからないので、もう少し調べてみる必要があります。 kendogridに接続されているコントローラー、特に読み取り操作と作成操作にパラメーターを渡す必要がありました。インデックスモデルから取得した値を格納するビューモデルを作成し、ビューモデルを使用してkendogridの値を読み取りおよび作成操作コントローラに渡しました。何らかの理由で、私はajaxを使用してパラメータを読み込み操作に渡すことしかできませんでした。

注：まだ最適なソリューションではありません。それはreadDataコントローラを2回呼び出すので、私はそれを望んでいません。

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 

Answer 2

http://docs.telerik.com/kendo-ui/aspnet-mvc/vb#grid からVBグリッド構文は次のとおりです。

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

は、あなたがオブジェクトの種類グリッドを伝える部分が欠落していますあなたは（ "Of NameOfYourClass"の部分にバインドしています。

グリッド定義全体を投稿する必要があります。

また、C＃の構文はsoooooのほうがはるかにクリーンです（私は役に立たないと思います）。

編集

OKので、この質問は、もはや正しいVB.NETカミソリの構文に関するものではありません....

これは、コントローラのメソッドに渡される「余分な」データを取得する方法ですあなたがオブジェクトを使用して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 
      } 
     }, 

ソースから

parameterToPassToReadAction、サーバーメソッドのパラメータの名前であり、valueYouWantToPassToReadActionはあなたがそれを可能にする値である

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

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

...ときにページがロードされ、あなたがそれを保存場所を、これまで保存されている：関数を使う

。それはあなたのvbhtmlファイルのViewModelににあり、あなたのjavascriptが同じファイルのスクリプトブロック内にある場合、構文は次のようになります：

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

しかし、あなたは保存され、この値を持ってどこかは明らかではありません。