How to: View Data - from Razor View - KendoUI Drop Down List - in Controller / action Link from Razor view

[Don]

I have not been able to come across any documentation on how to "PASS" data from Razor View Drop Down Lists to My Controller or ActionLinks.

The Single DDL ( Drop Down List ) has been very successfull

• Razor
•   @(Html.Kendo().DropDownList()
                          .OptionLabel("Select Role...")
                          .Name("DDLRoles")
                          .DataTextField("RoleName")
                          .DataValueField("RoleID")
                          .BindTo(ViewBag.DDLRoles)                     
                          .AutoBind(true))
  
• Controller [POST]
• [HttpPost]
          [AcceptVerbs(HttpVerbs.Post)]
          public ActionResult ChangeRole(UserProfiles userprofiles, FormCollection values)
          {            
              
              string newRoleValue = values["DDLRoles"].Replace(",", "");
            
              string something2 = userprofiles.UserName;

FROM HERE DOWN IS THE CODE FROM CASCADING DROPDOWNLIST THAT ARE NOT WORKING.

What i would like to know is how to do this with ( Passing into [Post Controller] action ) cascading DDL and Possibly how to use this value in an ActionLink.

Here is my code:

• Controller
• using System;
  using System.Collections.Generic;
  using System.Data;
  using System.Data.Entity;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using OG.ModelData;
  using OG.Models;
  using System.IO;
  using Newtonsoft.Json;
  
  namespace OG.Controllers
  {
      [Authorize(Roles = "PM,Administrator,CLS WebManager")]
      public class AddCCCTRSTController : Controller
      {
          private OilNGasDB db = new OilNGasDB();
             public ActionResult Index()
              {
                  return View();
              }
              public JsonResult GetCascadeClients()
              {
                  var clnts = db.Clients.Select(c => new { ClientID = c.ClientID, ClientName = c.Client }).ToList();
                  ViewBag.DDLclients = clnts;
                  return Json(db.Clients.Select(c => new { ClientID = c.ClientID, ClientName = c.Client }), JsonRequestBehavior.AllowGet);
              }
              public JsonResult GetCascadeCountys(int clients)
              {
                  var Countys = db.Countys.AsQueryable();
  
                  if (0 != clients)
                  {
                      Countys = Countys.Where(p => p.ClientID == clients);
                  }
                  return Json(Countys.Select(p => new { CountyID = p.CountyID, CountyName = p.County }), JsonRequestBehavior.AllowGet);
              }
  
              public JsonResult GetCascadeTownships(int countys)
              {
                  var townships = db.TownShips.AsQueryable();
  
                  if (0 != countys)
                  {
                      townships = townships.Where(o => o.CountyID == countys);
                  }
  
                  return Json(townships.Select(o => new { TownshipID = o.TownshipID, TownshipName = o.Township }), JsonRequestBehavior.AllowGet);
              }       
          
              [HttpPost] (THIS IS WHERE I'd LIKE TO RETURN DATA TOO FROM THE DDL's )
              [AcceptVerbs(HttpVerbs.Post)]
              public ActionResult Index(FormCollection values)
              {   
                  if (ModelState.IsValid)
                  {                    
                      string more3 = values["clients"];
                      string more4 = values["text"];
                      string more5 = values["DDLtracts"];
                      string more6 = values["tracts"];
• 
  
•                 // Return an empty string to signify success
                  return Content(more3 + more4 + more5 + more6);
              }
              else
              {
                  return Content("");
              }
          }
  
  
          protected override void Dispose(bool disposing)
          {
              db.Dispose();
              base.Dispose(disposing);
          }
  
      }
  }
• RAZOR VIEW
• 
  <div class="demo-section">
      
      <div>             
                      <label for="clients">Client:</label>
                      @(Html.Kendo().DropDownList()
                            .Name("clients")
                            .HtmlAttributes(new { style = "width:300px"}) //, id = "clients"})
                            .OptionLabel("Select Client...")
                            .DataTextField("ClientName")
                            .DataValueField("ClientID")
                            .DataSource(source => {
                                 source.Read(read => {
                                     read.Action("GetCascadeClients", "AddCCCTRST");
                                 });
                            })
                          .Events(e => e
                                      .Select("dropdownlist_select")
                                      .Change("dropdownlist_change")
                                  )
                      )
                 
      </div>
  
      <div>            
                      <label for="countys">County:</label>
                      @(Html.Kendo().DropDownList()
                            .Name("countys")
                            .HtmlAttributes(new { style = "width:300px"}) //, id = "countys"})
                            .OptionLabel("Select County...")
                            .DataTextField("CountyName")
                            .DataValueField("CountyID")
                            .DataSource(source => {
                                source.Read(read =>
                                {
                                    read.Action("GetCascadeCountys", "AddCCCTRST")
                                        .Data("filterCountys");
                                })
                                .ServerFiltering(true);
                            })
                            .Enable(false)
                            .AutoBind(false)
                            .CascadeFrom("clients")
                      )
                      <script>
                          function filterCountys() {
                              return {
                                  clients: $("#clients").val()
                              };
                          }
                      </script>
      </div>
      
        
      <div>  
                     <label for="townships">Township:</label>
                      @(Html.Kendo().DropDownList()
                            .Name("townships")
                            .HtmlAttributes(new { style = "width:300px"}) //, id = "townships"})
                            .OptionLabel("Select Township...")
                            .DataTextField("TownshipName")
                            .DataValueField("TownshipID")
                            .DataSource(source => {
                                source.Read(read =>
                                {
                                    read.Action("GetCascadeTownships", "AddCCCTRST")
                                        .Data("filterTownships");
                                })
                                .ServerFiltering(true);
                            })
                            .Enable(false)
                            .AutoBind(false)
                            .CascadeFrom("countys")
                      )
                      <script>
                          function filterTownships() {
                              return {
                                  countys: $("#countys").val()
                              };
                          }
                      </script>
      </div>
      
        
      
  
  <script>
           $(document).ready(function () {
              $("#get").click(function () {
  
                  alert("$(document).ready(function ()")
  
              var clients = $("#clients").data("kendoDropDownList"),
                  countys = $("#countys").data("kendoDropDownList"),
                  townShips = $("#townShips").data("kendoDropDownList"),
                          
                  alert("$(''#get'').click(function ()")
  
                  var clientsInfo = "\nclients: { id: " + clients.value() + ", name: " + clients.text() + " }",
                      countysInfo = "\ncountys: { id: " + countys.value() + ", name: " + countys.text() + " }",
                      townShipsInfo = "\ntownShips: { id: " + townShips.value() + ", name: " + townShips.text() + " }",
                   
  
                      alert("Select Tract To Upload:\n" + clientsInfo + countysInfo + townShipsInfo);
          });
         });
  </script>
  
  
  @using (Html.BeginForm())
  {        
           <p>
•             <input type="submit" value="ok" id="get" class="k-button"/>
          </p>
  }
  
   

If you need any more information please let me know thanks.

 

[Daniel]

Hello,

I am not sure if I understand correctly the issue but the dropdownlists should be inside the form in order to post their values. Also, except the "clients" dropdownlist, the names used to access the from data does not seem to be the same as the dropdonwlists names.

Regards,
Daniel
Telerik

[Don]

My fault, placing the kendoUI into Forms tag worked.... to the 2nd question how would i create an action link with "Said" variables

[Daniel]

Hello Don,

I am not sure if I understand correctly your question. Do you wish to navigate to another view after posting the form or return a view that contains an action link with the dropdownlist values used for the URL route values? 

Regards,
Daniel
Telerik

[Don]

If you could imagine my view setup like so : 

ActionLink  |   Kendo Drop Down | ActionLink | ActionLink


All 3 actionlinks would do seperate things like adding to , removing from, or editing ( whatever item was selected in the DropDownList)

I can write the ActionLink to the Action,Controller,Variable -> The variable is what i would want to replace with the KendoUI selected Item ( id or name ) so the ActionLinks would work

*Not sure if this is possible since were doing all this from the view*

This any more clear?

[Daniel]

Hello again Don,

If the links should be updated when the form is posted then you could get the request values and set them as route values to the ActionLinks. If the parameter should be updated immediately after the value is changed then you should use JavaScript in the dropdownlist change event to update the link href attribute with the current value:

@Html.ActionLink("Edit", "MyAction", "MyController", null, new { id = "editLink" })

function onDropdownChange() {
    var link = $("#editLink"),
        href = link.attr("href");
    var value = this.value();
    if (href.indexOf('myParameterName') > -1) {
        href = href.replace(/myParameterName=([^&]*)/, 'myParameterName=' + value);
    } else {
        href += href.indexOf('?') > -1 ? '&myParameterName=' + value : '?myParameterName=' + value;
    }
    link.attr("href", href);
}

Regards,
Daniel
Telerik

[Don]

How would i implement this on the DropDownList? - Adding an Event, removes the dropdown when i (launch) debug the app


                  @Html.ActionImage("ADD", "Prospect", new { id="editLink_Prospect" } , "~/Images/Navigation/Add.PNG", "Add")
                </td>
                <td>
                    <label for="Prospects">Prospect:</label>
                    @(Html.Kendo().DropDownListFor(m => m.Prospects)
                           //.Name("clients")
                          .HtmlAttributes(new { style = "width:300px" }) //, id = "clients"})
                          .OptionLabel("Select Prospect...")
                          .DataTextField("ProspectName")
                          .DataValueField("ProspectID")
                          .DataSource(source =>
                          {
                              source.Read(read =>
                              {
                                  read.Action("GetCascadeProspects", "AddCCCTRST");
                              });
                          })
                          //.Events(e =>
                          //  {
                          //      e.Select("select_Prospect").DataBound("dataBound");
                          //  })
                     )
                </td>

 function select_Prospect() {
        var link = $("#editLink_Prospect"),
            href = link.attr("href");
        var value = this.value();
        if (href.indexOf('myParameterName') > -1) {
            href = href.replace(/myParameterName=([^&]*)/, 'myParameterName=' + value);
        } else {
            href += href.indexOf('?') > -1 ? '&myParameterName=' + value : '?myParameterName=' + value;
        }
        link.attr("href", href);
    }