Cascading DropDownListView not calling read.action? - asp.net-mvc

Question

I'm using Visual Studio 2012 Internet Application that I've enabled for Kendo UI. This is a MVC4 C# and Razor View Project.
I have more then 6 models i'm eventually going to cascade with these dropdowns
I have been following The Tutorial step by step ( actually copied it and renamed in code ).
When page loads the UI looks great, but NO data is bound to the DropdownLists(/comboboxes)
I'm really only focused on the first DropDownList atm wich is
<p>
<label for="clients">Clients:</label>
#(Html.Kendo().DropDownList()
.Name("clients")
.HtmlAttributes(new { style = "width:300px" })
.OptionLabel("Select Client...")
.DataTextField("Client")
.DataValueField("ClientID")
.DataSource(source => {
source.Read(read => {
read.Action("GetCascadeClients", "ComboBox");
});
})
)
</p>
when the code reaches
.DataSource(source => {
source.Read(read => {
read.Action("GetCascadeClients", "ComboBox");
});
})
it's supposed to call this action, but does not this action is located in the controller for this view
public JsonResult GetCascadeClients()
{
var Clients = db.Clients.AsQueryable();
return Json(db.Clients.Select(c => new { ClientID = c.ClientID, Client = c.Client }), JsonRequestBehavior.AllowGet);
}
My question is what am I doing wrong, it almost has to be something stupid.... ( Yes data is in the database, yes in other controls they bind fine.)
EDIT: Thought it was a little peculiar that the 2 dropdownboxes below show text and the top one doesnt?
Breakpoints not being hit here:
Also i have this scripttag that runs, possibly could be something wrong with it Keep in mind im only looking to fill the first ( if first works the rest should fall in )
<script>
$(document).ready(function () {
var clients = $("#clients").data("kendoDropDownList"),
countys = $("#countys").data("kendoDropDownList"),
townShips = $("#townShips").data("kendoDropDownList");
$("#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>

Answer 1

#Don Thomas Boyle,I was able to copy your code and use my controller to return json data and I get the Option Label to show "Select Client...". Are you able to get the json string returned by manually calling it in the browser address bar? What is the name of your Controller? "Combobox" sounds like a suspicious controller name to me.
<p>
<label for="clients">Clients:</label>
#(Html.Kendo().DropDownList()
.Name("clients")
.HtmlAttributes(new { style = "width:300px" })
.OptionLabel("Select Client...")
.DataTextField("SiteName")
.DataValueField("ID")
.DataSource(source => {
source.Read(read => {
read.Action("GetSites", "PlayGround");
});
})
)
Here is my controller:
namespace MyWebApp.Controllers
{
public class PlayGroundController : Controller
{
readonly MyEntities context = new MyEntities();
public JsonResult GetSites()
{
var sites = context.vSites.Select(s => new SitesVM
{
ID = s.ID,
SiteName = s.SiteName
}).OrderBy(s => s.SiteName);
return Json(sites, JsonRequestBehavior.AllowGet);
}
}

Answer 2

this line :
.DataTextField("Client")
should be:
.DataTextField("ClientName")