MVC Kendo UI - Pass view data to controller

Question

I am new to MVC Kendo. I am creating a sample programme with one Datetimepicker, two combo boxes and grid. What I want to know when I select the dropdownboxes data and datetime picker date I want to populate Grid. I have done some work, but I can't find the way to send selected dropdown and datetimepicker values to controller when I click the Search button. If any one knows please let me know.

Razor View-

@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

• Important to use @using (Html.BeginForm()) and to enclose your Kendo Controls ( any model properties ) within the form tag
• @(Html.Kendo().DropDownListFor(m => m.Prospects) // you want to use DropDownListFor to bind to model
• You want to keep the .Name("Prospects") property assigned to your DropDownListFor ( Not ur issue but still important)

View Model

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

Post Method

    [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;

If you follow these steps you should find your values bound to your model!

Hope this helps

Answer 2

Please try with the below code snippet.

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())

CONTROLLER

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);
    }

}

Note : Please update "MarketData()" function in your JS code.

Let me know if any concern.