MVC Kendo UI - 將視圖數據傳遞給控制器​​

Question

我是MVC Kendo的新手。我正在用一個Datetimepicker，兩個組合框和網格創建一個示例程序。當我選擇我想要填充Grid的下拉框數據和日期時間選擇器日期時，我想知道什麼。我已經完成了一些工作，但是當我單擊「搜索」按鈕時，我無法找到將選定的下拉列表和datetimepicker值發送到控制器的方式。如果有人知道請讓我知道。

剃刀視圖 -

@using PortalModels 

<table> 
    <tr> 
     <td>@Html.Label("Date")</td> 
     <td></td> 
     <td>@Html.Kendo().DatePicker().Name("DTPicker")</td> 
    </tr> 
    <tr> 
     <td>@Html.Label("District")</td> 
     <td></td> 
     <td> 
     @(Html.Kendo().ComboBox() 
       .Name("Districts") 
       .HtmlAttributes(new { style = "width:300px" }) 
       .Placeholder("Select category...") 
       .DataTextField("CdNm") 
       .DataValueField("CdKy") 
       .Filter(FilterType.Contains) 
       .DataSource(source => 
       { 
        source.Read(read => 
        { 
         read.Action("GetCascadeDistrict", "MarketInfo"); 
        }); 
       }) 
     ) 
     </td> 
    </tr> 
    <tr> 
     <td>@Html.Label("Market")</td> 
     <td></td> 
     <td> 
     @(Html.Kendo().ComboBox() 
       .Name("Markets") 
       .HtmlAttributes(new { style = "width:300px" }) 
       .Placeholder("Select product...") 
       .DataTextField("CdNm") 
       .DataValueField("CdKy") 
       .Filter(FilterType.Contains) 
       .DataSource(source => { 
        source.Read(read => 
        { 
         read.Action("GetCascadeMarket", "MarketInfo") 
          .Data("filterMarkets"); 
        }) 
        .ServerFiltering(true); 
       }) 
       .Enable(false) 
       .AutoBind(false) 
       .CascadeFrom("Districts") 
     ) 
     <script> 
      function filterMarkets() { 
       return { 
        categories: $("#Districts").val(), 
        productFilter: $("#Markets").data("kendoComboBox").input.val() 
       }; 
      } 
     </script> 
     </td> 
     <td><input type="submit" id="Submittbn" /></td> 
    </tr> 
</table> 

@(Html.Kendo().Grid<PortalModels.MarketInfoModel>() 
     .Name("grid") 
     .Columns(columns => 
     { 
      columns.Bound(m => m.ItmNm).Width(400); 
      columns.Bound(m => m.Unit).Width(150); 
      columns.Bound(m => m.Unit).Width(150); 
     }) 
     .DataSource(dataSource => 
      dataSource.Ajax() 
      .ServerOperation(false) 
      .Read(read => read.Action("ReadMarketInfoDetails", "MarketInfo").Data("MarketData")) 
      .Create(create => create.Action("FamilyDetails", "Home").Data("FamilyData")) 
      .PageSize(150)// Action method invoked when the grid needs data 

    ) 
     .Pageable() 
     .Sortable() // Enable sorting 
) 


<script> 
    $(function() { 
     var MarketGrid = $('#grid').data("kendoGrid"); 
     $("#Submittbn").click(function() { 
      MarketGrid.dataSource.read(); 
     }) 
    }); 

    function MarketData() { 
     var EffectiveDtValue = $("#DTPicker").data("kendoDatePicker") 
     var DistrictValue = $('#Districts').data("kendoComboBox") 
     var MarketValue = $('#Markets').data("kendoComboBox") 
     return { 
      intEmpky: EffectiveDt.value(), 
      intAdrKy: DistrictValue.value(), 
      strCode: MarketValue.value() 
     } 
    } 
</script> 

Answer 1

請與下面的代碼片段嘗試。

VIEW

<table> 
<tr> 
    <td>@Html.Label("Date") 
    </td> 
    <td> 
    </td> 
    <td>@Html.Kendo().DatePicker().Name("DTPicker") 
    </td> 
</tr> 
<tr> 
    <td>@Html.Label("District") 
    </td> 
    <td> 
    </td> 
    <td> 
     @(Html.Kendo().ComboBox() 
      .Name("Districts") 
      .HtmlAttributes(new { style = "width:300px" }) 
      .Placeholder("Select category...") 
        .DataTextField("Text") 
          .DataValueField("Value") 
      .Filter(FilterType.Contains) 
      .DataSource(source => 
      { 
       source.Read(read => 
       { 
        read.Action("GetCascadeDistrict", "Home"); 
       }); 
      }) 
    ) 
    </td> 
</tr> 
<tr> 
    <td>@Html.Label("Market") 
    </td> 
    <td> 
    </td> 
    <td> 
     @(Html.Kendo().ComboBox() 
      .Name("Markets") 
      .HtmlAttributes(new { style = "width:300px" }) 
      .Placeholder("Select product...") 
        .DataTextField("Text") 
        .DataValueField("Value") 
      .Filter(FilterType.Contains) 
      .DataSource(source => 
      { 
       source.Read(read => 
       { 
        read.Action("GetCascadeMarket", "Home") 
         .Data("filterMarkets"); 
       }) 
       .ServerFiltering(true); 
      }) 
      .Enable(false) 
      .AutoBind(false) 
      .CascadeFrom("Districts") 
    ) 
    </td> 
    <td> 
     <input type="submit" id="Submittbn" /> 
    </td> 
</tr> 

@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>() 
    .Name("grid") 
    .Columns(columns => 
    { 
     columns.Bound(m => m.ID).Width(100); 
     columns.Bound(m => m.Name).Width(700); 
    }) 
    .DataSource(dataSource => 
     dataSource.Ajax() 
     .ServerOperation(false) 
         .Read(read => read.Action("GridRead", "Home").Data("MarketData")) 
     .PageSize(150) 

) 
    .Pageable() 
    .Sortable()) 

控制器

public class HomeController : Controller 
{ 

    public ActionResult GridRead([DataSourceRequest] DataSourceRequest request, string intEmpky, string intAdrKy, string strCode) 
    { 
     List<TestModels> models = new List<TestModels>(); 


     for (int i = 1; i < 6; i++) 
     { 

      TestModels model = new TestModels(); 
      model.ID = i; 
      model.Name = intEmpky + "_" + intAdrKy + "_" + strCode; 
      models.Add(model); 

     } 

     return Json(models.ToDataSourceResult(request)); 
    } 

    [HttpGet] 
    public JsonResult GetCascadeDistrict() 
    { 
     List<SelectListItem> models = new List<SelectListItem>(); 


     for (int i = 1; i < 6; i++) 
     { 

      SelectListItem model = new SelectListItem(); 
      model.Value = i.ToString(); 
      model.Text = "text" + i; 
      models.Add(model); 

     } 

     return Json(models, JsonRequestBehavior.AllowGet); 
    } 

    [HttpGet] 
    public JsonResult GetCascadeMarket(string categories, string productFilter) 
    { 
     List<SelectListItem> models = new List<SelectListItem>(); 


     for (int i = 1; i < 6; i++) 
     { 

      SelectListItem model = new SelectListItem(); 
      model.Value = i.ToString(); 
      model.Text = "text" + i; 
      models.Add(model); 

     } 

     return Json(models, JsonRequestBehavior.AllowGet); 
    } 

} 

注：請更新 「MarketData（）」 在您的JS代碼的功能。

讓我知道是否有任何問題。

Answer 2

查看

• 重要的是使用@using (Html.BeginForm())和表單標籤
• @(Html.Kendo().DropDownListFor(m => m.Prospects)中附上劍道控制（任何模特屬性）//你想使用DropDownListFor綁定模型
• 你想保留.Name("Prospects")屬性分配給你的DropDownListFor（不是你的問題，但仍然重要）

視圖模型

public class ViewModelCCTRST 
    { 
     . 
     .. 
     public string Prospects { get; set; } 
     public IEnumerable<dbProspect> AvailableProspects { get; set; } 
     . 
     .. 
     ... 
    } 

POST方法

[HttpPost] 
    public ActionResult Index(ViewModelCCTRST model) 
    { 

     if (ModelState.IsValid) 
     { 
      string pro = model.Prospects; 
      string cnt = model.Countys; 
      string twn = model.TownShips; 
      string rng = model.Ranges; 
      string sct = model.Sections; 
      string trt = model.Tracts; 

如果按照這些步驟，你會發現你的價值觀綁定到模型！

希望這會有幫助