How to pass data from Razor View Kendo UI DropDownList to Controller Variable?

Question

vs'12 , KendoUI, asp.net C# MVC4 Internet Application EF Code First

Would like to see how one would pass values form a KendoUI DropDownList to a MVC Controller from a Razor View

Controller

  [HttpPost]
  //[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Index(ViewModelCCTRST model) //, FormCollection  values)
    {

        if (ModelState.IsValid)
        {

            string clt = model.Clients;
            string cnt = model.Countys;
            string twn = model.TownShips;
            ...
             ...
            //string xx = values["Clients"];
            //       xx = values["Countys"];
            //       xx = values["TownShips"];
                     ...
                      ...

*clt,cnt,twn and other variables are always null... wherein lies my question why are these always null**

---

Razor View:

                @ @(Html.Kendo().DropDownListFor(m=>m.Ranges)
                      //.Name("ranges")
                      .HtmlAttributes(new { style = "width:300px"}) //, id = "ranges"})
                      .OptionLabel("Select Range...")
                      .DataTextField("RangeName")
                      .DataValueField("RangeID")
                      .DataSource(source => {
                          source.Read(read =>
                          {
                              read.Action("GetCascadeRanges", "AddCCCTRST")
                                  .Data("filterRanges");
                          })
                          .ServerFiltering(true);
                      })
                      .Enable(false)
                      .AutoBind(false)
                      .CascadeFrom("TownShips")
                )
                <script>
                    function filterRanges() {
                        return {
                            townShips: $("#TownShips").val()
                        };
                    }

Things i have tried

• setting var text = dropdownlist.text();
• setting var DDLtracts = $("#tracts").data("kendoDropDownList");

No matter what i try id wise or controller wise I cannot get the values to be "Read" in the Controller, nor can i grab and pass the values on in action links.

Please help!!

---

Updated Code Per Comments by mmillican help below

                string sct = model.Sections;
                string trt = model.Tracts;

Viewmodel

public class ViewModelCCTRST
{
    public string Clients { get; set; }
    public IEnumerable<dbClient> AvailableClients { get; set; }
    public string Countys { get; set; }
    public IEnumerable<dbCounty> AvailableCounties { get; set; }
    public string TownShips { get; set; }
    public IEnumerable<dbTownShip> AvailableTownShip { get; set; }
    public string Ranges { get; set; }
    public IEnumerable<dbRange> AvailableRanges { get; set; }
    public string Sections { get; set; }
    public IEnumerable<dbSection> AvailableSection { get; set; }
    public string Tracts { get; set; }
    public IEnumerable<dbTract> AvailableTracts { get; set; }
}

What we have done so far is:

• Removed [AcceptVerbs(HttpVerbs.Post)] and FormCollection values from controller
• Removed //.Name("Tracts") and optional .HtmlAttributes(new { id = "tracts"}) from each DropDownList
• Added DropDownListFor(m=>m.Tracts) for each DDL and imported @model OG.ModelView.ViewModelCCTRST CustomViewModel can be read below
• Renamed all lowercase .CascadeFrom("clients") (not just clients) to uppercase .CascadeFrom("Clients")

The tag below where it says alert("Select Tract to Upload:\n....); did actually alert 1 time during these changes, however the Model and variable attempting to send with an Actionlink form the Razor View are still both null and the alert stopped popping up.

    $(document).ready(function () {
        $("#get").click(function () {
            var clients = $("#Clients").data("kendoDropDownList"),
            countys = $("#Countys").data("kendoDropDownList"),
            TownShip = $("#TownShip").data("kendoDropDownList"),
            ranges = $("#Ranges").data("kendoDropDownList"),
            sections = $("#Sections").data("kendoDropDownList"),
            tracts = $("#Tracts").data("kendoDropDownList");

      var clientsInfo = "\nclients: { id: " + clients.value() + ", name: " + clients.text() + " }",
      countysInfo = "\ncountys: { id: " + countys.value() + ", name: " + countys.text() + " }",
       ....
        ....

      alert("Select Tract To Upload:\n" + clientsInfo + countysInfo + townShipsInfo + rangesInfo + sectionsInfo + tractsInfo);
           });
    });

Update

fixed syntax issue fixed the scipt error. Is now populating clientsInfo + countysInfo + townShipsInfo + rangesInfo + sectionsInfo + tractsInfo - does this help anyone help me get this to my controller?

Answer 1

You should use a ViewModel that has your properties in it such as:

Updated

public class MyViewModel
{
    public string Clients { get; set; }
    public IEnumerable<Client> AvailableClients { get; set; }
    public string Countys { get; set; }
    public IEnumerable<Client> AvailableCounties { get; set; }
    public string TownShips { get; set; }
    public IEnumerable<Client> AvailableTownShips { get; set; }
    public string Sections { get; set; }
    public IEnumerable<Client> AvailableSection { get; set; }
    public string Tracts { get; set; }
    public IEnumerable<Tract> AvailableTracts { get; set; }
}

Then your Kendo DropDownList would become a DropDownListFor<> as shown here:

@(Html.Kendo().DropDownListFor(m => m.Clients)
                  .HtmlAttributes(new { style = "width:300px"}) //, id = "clients"})
                  .OptionLabel("Select Client...")
                  .DataTextField("ClientName")
                  .DataValueField("ClientID")
                  .DataSource(source => {
                       source.Read(read => {
                           read.Action("GetCascadeClients", "ImageUpload");
                       });
                  })
                 ***1***
            )

And you can then post to your controller in the following way:

[HttpPost]
    public ActionResult Index(MyViewModel model)
    {

        if (ModelState.IsValid)
        {

            var newVar = model.Clients;

When you return the ViewModel to the View (from the Controller) and MyViewModel.Clients has the value "Client1", the DropDownList will pick that up and have it be the selected value.

Hopefully this is what you're looking for / makes sense.