Hi
When I click on the first dropdown it finds the children for that category, but the values is showing in plain text and not in my partial views dropdown. What am I doing wrong??
I want to make cascading dropdowns with the partial view, so when I click on the dropdown list it will automatic fill the dropdown list with the children of that category. But I am a little bit stuck on this one.
I am really new on this one.
This is my code that I have been trying.
My Controller :
[HttpGet]
public JsonResult CategoryList(int catId)
{
var subcategories = (from s in db.Categories where s.ParentCategoryId == catId select new SelectListItem {
Text = s.Name, Value = s.ParentCategoryId.ToString()
});
return Json(subcategories, JsonRequestBehavior.AllowGet);
}
My partial view :
@model ASPNetMarketplace.Models.Listing
@Html.DropDownList("dynamicContent", new SelectList(string.Empty, "Value", "Text"), "Please select a Subcategory", new { @class = "form-control" })
My Indexview :
@Html.DropDownList("CategoryId", ViewBag.CategoryId as SelectList, "Select a Category", new { id = "CategoryId", @class = "form-control" })<br />
<div id="dynamicContent">
@{
Html.RenderPartial("DropDownList", Model);
}
</div>
The script on the indexview :
<script>
jQuery(document).ready(function ($) {
$("#CategoryId").change(function () {
var id = $(this).val()
$.ajax({
type: 'GET',
url: '@Url.Action("CategoryList", "Manage")',
data: { catId: id },
success: function (data) {
$.each(data, function (id, data) { (($('#dynamicContent').html($('<option></option>').val(data.Value).html(data.Text));
});
}
});
});
});
</script>