In an attempt of doing a cascading dropdown, I followed this good tutorial. But I made a few changes through out the process. Summing up, I have two dropdowns where one should control the other. The first one is working well, it returns the data that I expect. The second one, it returns the correct amount that I expect, however, all the different items come as "unknown".
For example, I choose a name on the 1st dropdown the 2nd dropwdown changes to the correct amountt of items related to the 1st dropdown but the information/items comes as unknown.
On my .cshtml, I have
<div class="editor-label">
@Html.LabelFor(model => model.VId, "vendor")
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.VId, ViewBag.VendorName as SelectList, "--Select Vendor--", new { @class = "form-control" })
</div>
<div class="editor-label">
@Html.LabelFor(model => model.IFID, "family")
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.IFID, ViewBag.FamilyName as SelectList, "--Select Family--", new { @class = "form-control" })
</div>
Also, on my .cshtml, I have the part where I am creating the jquery script:
@section scripts {
<script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
<script>
$(document).ready(function ()
{
//Dropdownlist Selectedchange event
$("#VId").change(function ()
{
$("#IFID").empty();
$.ajax({
type:'POST',
url: '@Url.Action("SelectFamilies")',
dataType: 'json',
data: { id: $("#VId").val() },
success: function (families)
{
alert($("#VId").val());
alert(families.dataType);
$.each(families, function (i, family)
{
$("#IFID").append('<option value="'
+ family.IFID + '">'
+ family.IndexFamilyName + '</option>');
});
},
error: function (ex)
{
alert('Failed to retrieve states.' + ex.responseText);
}
});
return false;
})
});
</script>
}
On this .cshtml, I am pointing to a @model that defines the variables this way:
public virtual ICollection<IFDto> families { get; set; }
public virtual ICollection<VDto> vendors { get; set; }
public virtual VDto vendor { get; set; }
public virtual IFDto family { get; set; }
"@Url.Action("SelectFamilies")" comes from (this is in a controller):
public JsonResult SelectFamilies(int id)
{
//IEnumerable<IFDto> families = db.states.Where(stat => stat.country_id == id);
IEnumerable<IFDto> families = _indexfamilyDataGateway.GetFamiliesByVendor(id);
return Json(families);
}
Also, on this same controller I have:
public ActionResult Create()
{
//ViewBag.VendorName = GetVendorSelectItems();
//ViewBag.FamilyName = GetFamilySelectItems();
ViewBag.VendorName = new SelectList(_vendorDataGateway.GetAll(), "VId", "AbbrevAndName");
ViewBag.FamilyName = new SelectList(_indexfamilyDataGateway.GetAll(), "IFID", "IFName");
return View();
}
This is a similar problem mentioned here and here.
In one of the comments, it was requested (and also a good idea) for me to do a "console.log(families)" inside the .ajax success. It is returning the information that I need:
Please, noticed that it is printing 4 times because I put the "console." before and after the .ajax success "each" statement. If I just put after success and before the $.each it returns an array.
