В попытке сделать каскадное выпадающее меню я следовал этому хорошему учебнику.Но я сделал несколько изменений в процессе.Подводя итог, у меня есть два выпадающих списка, где один должен контролировать другой.Первый работает хорошо, он возвращает данные, которые я ожидаю.Второй, он возвращает правильную сумму, которую я ожидаю, однако все различные элементы отображаются как «неизвестные».
Например, я выбираю имя в 1-м раскрывающемся списке, во 2-м раскрывающемся списке изменяется на правильную сумму.элементов, связанных с первым выпадающим списком, но информация / элементы неизвестны.
В моем .cshtml у меня есть
<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>
Кроме того, в моем .cshtml есть часть, гдеЯ создаю сценарий jquery:
@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>
}
В этом файле .cshtml я указываю на @model, который определяет переменные следующим образом:
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") "происходит (это в контроллере):
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);
}
Кроме того, на этом же контроллере у меня есть:
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();
}
Это аналогичная проблема, упомянутая здесь и здесь .
В одном из комментариев меня попросили (и это тоже хорошая идея) сделать "console.log (семейства)" внутри успеха .ajax.Он возвращает информацию, которая мне нужна: Пожалуйста, обратите внимание, что она печатает 4 раза, потому что я поставил "консоль".до и после .ajax успеха "каждое" утверждение.Если я просто ставлю после успеха и перед $ .each, он возвращает массив.