2016-04-01 10 views
0

は初めて制御し、私は次を達成する方法を知りたい:KendoUI MVCグリッドの更新操作

これは私のビューモデルである:

public class OrderViewModel 
{   
    public string ClientId { get; set; } 

    public List<Category> Categories { get; set; } 
    public Category MainCategory { get; set; } 

    public List<Item> Items { get; set; } 

    public OrderViewModel() 
    { 
     Items = new List<Item>(); Categories = new List<Category>(); 
    } 
} 

ですアイテム・クラス:

public class Category 
{ 
    public int CategoryId { get; set; } 
    public string Name { get; set; } 
} 
:これはCategoryクラスである

public class Item 
{ 
    [ScaffoldColumn(false)] 
    public int ItemId { get; set; } 

    [DisplayName("Name")] 
    public string ItemName { get; set; } 

    [DisplayName("Quantity")] 
    [DataType("Integer")] 
    public int Quantity { get; set; } 

    [DisplayName("Price")] 
    [DataType(DataType.Currency)] 
    public decimal Price { get; set; } 
} 

@(Html.Kendo().TextBox() 
      .Name("client") 
      .Value(@Model.ClientId) 
      .HtmlAttributes(new { style = "width: 100%" }) 
     ) 

@(Html.Kendo().DropDownList() 
      .Name("categories") 
      .DataTextField("Name") 
      .DataValueField("CategoryId") 
      .BindTo(@Model.Categories) 
      .Value(@Model.MainCategory.CategoryId.ToString()) 
      .HtmlAttributes(new { style = "width: 100%" }) 
     ) 
@(Html.Kendo().Grid(Model.Items) 
      .Name("items") 
      .Columns(columns => 
      { 
       columns.Bound(a => a.ItemId); 
       columns.Bound(a => a.ItemName); 
       columns.Bound(a => a.Price); 
       columns.Bound(a => a.Quantity); 
      }) 
      .ToolBar(toolBar => 
      { 
       toolBar.Save().SaveText("Send").CancelText("Cancel"); 
      }) 
      .Editable(editable => editable.Mode(GridEditMode.InCell)) 
      .Scrollable() 
      .Pageable(pageable => pageable 
       .ButtonCount(5) 
      ) 
      .HtmlAttributes(new { style = "height:550px;" }) 
      .DataSource(datasource => datasource 
       .Ajax() 
       .Batch(true) 
       .PageSize(30) 
       .ServerOperation(false) 
       .Model(model => 
       { 
        model.Id(a => a.ItemId); 
        model.Field(a => a.Name).Editable(false); 
        model.Field(a => a.Price).Editable(false); 
        model.Field(a => a.Quantity); 
       }) 
       .Update(update => update.Action("SendOrder","Orders")) 
      ) 
     ) 

情報が正しく表示され、ユーザーは、ClientIdのを入力してカテゴリを選択し、各項目に数量を入力する必要があります。私はDropDownListコントロールやグリッド、テキストボックスを使用して、その情報を表示したい

グリッド、グリッドツールバーの[保存]ボタンをクリックすると、ユーザーがコントロールに入力した情報を保存します。

更新されたモデルを「SendOrder」アクションに渡すにはどうすればよいですか?

[AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult SendOrder(....) 
    { 
     //Code to save the information 

     return View(); 
    } 
+0

[telerikサイトでこのデモをチェックしてください。](http://demos.telerik.com/aspnet-mvc/grid/editing) – TheUknown

+0

ありがとう、私はデモをチェックさせてください。 –

答えて

0

このdemoこのdocumentation

をチェックした後、私は、アクションにモデルからのデータを渡すことができ、これは私の最終的なコードです:

@(Html.Kendo().Grid(Model.Items) 
     .Name("items") 
     .Columns(columns => 
     { 
      columns.Bound(a => a.ItemId); 
      columns.Bound(a => a.ItemName); 
      columns.Bound(a => a.Price); 
      columns.Bound(a => a.Quantity); 
     }) 
     .ToolBar(toolBar => 
     { 
      toolBar.Save().SaveText("Send").CancelText("Cancel"); 
     }) 
     .Editable(editable => editable.Mode(GridEditMode.InCell)) 
     .Scrollable() 
     .Pageable(pageable => pageable 
      .ButtonCount(5) 
     ) 
     .HtmlAttributes(new { style = "height:550px;" }) 
     .DataSource(datasource => datasource 
      .Ajax() 
      .Batch(true) 
      .PageSize(30) 
      .ServerOperation(false) 
      .Model(model => 
      { 
       model.Id(a => a.ItemId); 
       model.Field(a => a.Name).Editable(false); 
       model.Field(a => a.Price).Editable(false); 
       model.Field(a => a.Quantity); 
      }) 
      .Update(update => update.Action("SendOrder","Orders").Data("getAdditionalData")) 
     ) 
    ) 

function getAdditionalData() { 

    var cat = $("#categories").val(); 
    var cli = $("#client").val(); 

    return { 
     clientId: cli, 
     categoryId: cat 
    } 
} 

追加パラメータを渡すには(クライアントIDをおよびカテゴリ)を、私がDataメソッドを使用するアクションに追加します。追加データとともにJavaScriptオブジェクトを返すJavaScript関数の名前を指定します。

アクション:

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult SendOrder([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]List<Item> items, string clientId, string categoryId) 
     { 
      //code to save information 

      return View(); 
     } 

これを達成するためのより良い方法があれば、私は知りませんが、これは私のために働いています。

関連する問題