如何將Kendo網格數據的選定行傳遞給控制器​​

Question

我有一個kendo網格，它附近有一個圖像，就像一個按鈕。按下後，它會調用控制器方法。我想將選定的行數據發送到該方法。

VIEW

<a href="#" id="ic_open" class="tooltip2" title="Abrir"> 
    <span title=""> 
     <img class="toolbar-icons" src="../../Images/open.png"/> 
    </span> 
</a> 
... 
<div id="datagrid"> 
    @(Html.Kendo().Grid(Model) 
     .Name("datagrid_Concessoes") 
     .Columns(columns => 
     { 
      columns.Bound(c => c.Id).Width(70); 
      columns.Bound(c => c.Code); 
      columns.Bound(c => c.Description); 
      columns.Bound(c => c.CreationDate); 
      columns.Bound(c => c.CreationUser); 
     }) 
     .HtmlAttributes(new { style = "height: 534px;" }) 
     .Scrollable() 
     .Sortable() 
     .Selectable() 
     .Pageable(pageable => pageable 
      .Refresh(true) 
      .ButtonCount(5)) 
     .DataSource(dataSource => dataSource 
      .Ajax() 
      .PageSize(15) 
      .Read(read => read.Action("GetConcessoes", "MasterData")) 
     ) 
    ) 
</div> 

而且腳本：

<script type="text/javascript"> 

    $(function() { 

     $('.tooltip2').click(function() { 

      var id = this.id; 

      $.get('@Url.Content("GetPartialView")', 
      { "id": id }, 
      function (data) { 
       $('#div-for-partial').html(data); 
      }); 

     }); 
    }); 

</script> 

這個腳本發送的鏈接的ID（ic_open）成功控制。我想通過這個相同的功能或者其他一些（無所謂）將選定的行數據發送給控制器，這樣我就可以處理這些信息。

編輯

控制方法

public ActionResult GetPartialView(string id) 
{ 
    switch (id) 
    { 
     case "": 
      return PartialView("_Concessoes"); 
     case "tab1": 
      return PartialView("_Concessoes"); 
     case "tab2": 
      return PartialView("_AutoEstradas"); 
     case "ic_open": 
      return PartialView("_NovaConcessao"); 

    } 

    return RedirectToAction("Index"); 

} 

Answer 1

你的腳本應該如下：

<script type="text/javascript"> 

    $(function() { 

     $('.tooltip2').click(function() { 

      var id = this.id; 

      var concessoesGrid = $("#datagrid_Concessoes").data("kendoGrid"); 
      var row = concessoesGrid.select();  

      $.get('@Url.Content("GetPartialView")', 
      { "id": id, "modelData":row }, 
      function (data) { 
       $('#div-for-partial').html(data); 
      }); 

     }); 
    }); 

</script> 

現在會有變化對你的控制方面也：

public ActionResult GetPartialView(string id, ModelClass modelData) 
    { 

     //here you can access the modelData Object which will have the value of Selcted row of Grid 
     switch (id) 
     { 
      case "": 
       return PartialView("_Concessoes"); 
      case "tab1": 
       return PartialView("_Concessoes"); 
      case "tab2": 
       return PartialView("_AutoEstradas"); 
      case "ic_open": 
       return PartialView("_NovaConcessao"); 

     } 

     return RedirectToAction("Index"); 

    } 

注意：如果你想傳遞多個選擇的網格記錄，然後控制器您將需要更改控制器參數以接受對象列表。

Answer 2

我使用KendoJS但我相信這也將在你的身邊工作過：

var grid = $("yourgrid's id or class"); 
var selectedRow; 
grid.change = function() 
{ 
    grid.select().each(function() { 
     var dataItem = grid.dataItem($(this)); 
      selectedRow = dataItem; 
    }); 
} 

我還發現this的劍道ASP .NET MVC：

@(Html.Kendo().Grid(Model) 
     .Name("grid") 
     .Events(e => e 
      .DataBound(@<text> 
       function() { 
        //Handle the dataBound event inline 
       } 
      </text>) 
      .Change(@<text> 
       var selectedRow; 
       function() { 
         var grid = this; 
         grid.select().each(function() { 
         var dataItem = grid.dataItem($(this)); 
         selectedRow = dataItem;       
        }); 
       } 
      </text>) 
    ) 
) 

獲得選定的行後，其餘的很容易。只需將您想要的值發送到cshtml頁面上的隱藏值元素，或者直接在您的JavaScript代碼中調用控制器的ajax方法即可。