This is a migrated thread and some comments may be shown as answers.

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

6 Answers 924 Views

DropDownList

This is a migrated thread and some comments may be shown as answers.

Don asked on 26 Aug 2013, 08:53 PM

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.

6 Answers, 1 is accepted

answered on 03 Sep 2013, 11:14 AM

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!

answered on 03 Sep 2013, 12:13 PM

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