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

7 posts, 0 answers
  1. Don
    Don avatar
    5 posts
    Member since:
    Aug 2013

    Posted 26 Aug 2013 Link to this post

    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.

     


  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 28 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Don
    Don avatar
    5 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

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

    Posted 30 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Don
    Don avatar
    5 posts
    Member since:
    Aug 2013

    Posted 30 Aug 2013 Link to this post

    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?
  7. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 03 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Don
    Don avatar
    5 posts
    Member since:
    Aug 2013

    Posted 03 Sep 2013 Link to this post

    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);
        }
Back to Top
UI for ASP.NET MVC is VS 2017 Ready