데이터 그리드 devextreme 컨트롤러에 asp.net mvc 게시하는 방법

Question

나는 devextreme 함께 DataGrid 사용하고 있습니다. 어떻게 asp.net mvc 컨트롤러에 DataGrid를 보낼 수 있습니까? 내가보기에이 시도 :

@using (Html.BeginForm("action-name", "controller-name", FormMethod.Post)) 
      { 
       <div id="frm"></div> 
       <div id="grid"></div> 
       <div class="submit-button" id="submitBtn"></div> 
      } 

을이 내 모델 : 내 콘트롤에

public class class-name 
    { 
     public int id { get; set; } 
     public string Name { get; set; } 
     public string FName { get; set; } 
     public ContactInfo ContactInfo { get; set; } 
    } 

public class ContactInfo 
    { 
     public string type { get; set; } 
     public string value { get; set; } 
    } 

난 내 폼 데이터 (클래스 이름)하지만 그리드 데이터 (CONTACTINFO)를 얻을 수있다 null

Answer 1

귀하의 경우에는 ASP.NET MVC Wrappers for DevExtreme을 사용할 수 있습니다.

@(Html.DevExtreme().DataGrid() 
    .DataSource(ds => ds 
     .WebApi() 
     .Controller("GridData") 
     .Key("OrderID") 
     .LoadAction("GetAllOrders") 
     .InsertAction("InsertOrder") 
     .UpdateAction("UpdateOrder") 
     .DeleteAction("RemoveOrder") 
    ) 
) 

그리고 컨트롤러 :이 경우 당신이이 같은 WebApi 컨트롤러에 그리드 바인딩 할 수

public class DataGridWebApiController : ApiController { 

    [HttpGet] 
    public HttpResponseMessage GetAllOrders(DataSourceLoadOptions loadOptions) { 
     //... 
    } 

    [HttpPost] 
    public HttpResponseMessage InsertOrder(FormDataCollection form) { 
     //... 
    } 

    [HttpPut] 
    public HttpResponseMessage UpdateOrder(FormDataCollection form) { 
     //... 
    } 

    [HttpDelete] 
    public void RemoveOrder(FormDataCollection form) { 
     //... 
    } 
} 

글쎄, 서버에 모든 데이터 그리드 데이터를 보낼 필요가 없습니다 측면. 업데이트 된 데이터 만 관리하면됩니다.

this article에는 데이터 바인딩에 대한 추가 정보가 있습니다.

this demo도 살펴보십시오.

Answer 2

내 질문에 대한 내 길을 발견했다. 여기에 해결책이 있습니다. https://www.devexpress.com/Support/Center/Question/Details/T489645 덕분에 최선의 지원을 받았습니다.

Answer 3

모든 열에 대해 cellTemplate을 사용할 수 있으며 숨겨진 입력을 사용해야하는 cellTemplate에서 사용할 수 있습니다. 예를 들어 다음 코드를 가정합니다.

factory.Add().DataField("Mobile") 
      .CellTemplate(@<text> 
       <%= text %> 
       <input type='hidden' name='Addresses[<%= rowIndex %>].Mobile' value='<%= value %>' /> 
       </text>); 

텍스트, rowIndex, 값은 DevExtreme 개체입니다. 자세한 내용은 cellInfo 링크 섹션을 확인하십시오. https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/columns/?search=columns