ASP.NET MVC层叠DropDownLists的Javascript问题 [英] ASP.NET MVC Cascading DropDownLists Javascript Issues
问题描述
审查很多教程和各种方法来层叠DropDownLists后，我决定创建一个视图模型为我的视图，然后填充基于这个帖子我DropDownLists：
MVC3 AJAX级联DropDownLists
的目标位置是最基础的，涉及很多教程，但我仍然无法得到它完全正确......根据国家下拉值填充下拉城市。
编辑：
由于发帖求助申请，我发现萤火虫（是的，这是我在做任何类型的节目如何利用新的），我能够确定，我成功地叫着我的控制器，并拉动必要的数据。我相信这个问题是我的JavaScript的数据返回给我的浏览下半年。
这是我的观点：
＆LT;标签＆gt;应在此处：＆LT; /标签＆gt;
@ Html.DropDownListFor（X =＆GT; x.States，Model.States，新{@class =chzn选ID =STATEID}）
＆LT; BR /＆GT;＆LT; BR /＆GT;
＆LT;标签＆gt; CITY位置：＆LT; /标签＆gt;
@ Html.DropDownListFor（X =＆GT; x.Cities，Enumerable.Empty＆LT; SelectListItem＆GT;（），新的{ID =cityID}）
这里是我的视图中的JavaScript和不知何故我没有正确处理我的结果，一旦我让他们：
$（函数（）{
$（＃STATEID）。改变（函数（）{
VAR STATEID = $（本）.VAL（）;
//并把它作为AJAX请求到新创建行动
$阿贾克斯（{
网址：'@ Url.Action（GetCities）'，
输入：GET，
数据：{ID：STATEID}，
缓存：'假'， 成功：函数（结果）{
VAR citySelect = $（'＃cityID'）;
$（citySelect）.empty（）; //当AJAX成功刷新DDL容器 $。每个（结果，功能（结果）{
$（citySelect）
.append（$（'＆LT;选项/＆GT;'，{值：this.simpleCityID}）
的.text（this.cityFull））; }）;
}，
错误：功能（结果）{
警报（'发生的错误'）;
}
}）;
}）;
}）;
下面是由JavaScript调用我的控制器：
公共JsonResult GetCities（INT标识）
{
返回JSON（GetCitySelectList（ID），JsonRequestBehavior.AllowGet）;
} 私人的SelectList GetCitySelectList（INT标识）
{
变种城市= simpleDB.simpleCity.Where（X =＆GT; x.simpleStateId == Id）的.ToList（）; 结果的SelectList =新的SelectList（市，simpleCityId，cityFull）;
返回结果;
}
下面是Firbug，我的结果，告诉我，我构建和获取数据没有问题，只是不正确填充的DropDownList我：
<$p$p><$c$c>[{\"Selected\":false,\"Text\":\"Carmel\",\"Value\":\"IN001\"},{\"Selected\":false,\"Text\":\"Fishers\",\"Value\":\"IN002\"}]如果任何人有任何建议，为什么JavaScript的未填充dropdrown，请发表评论，谢谢！
感谢您的帮助，
原来，在下面我的JavaScript，我试图直接引用 simpleCityID 和 cityFull 与我的数据模型相关的字段：
$。每个（结果，功能（结果）{
$（citySelect）
.append（$（'＆LT;选项/＆GT;'，{值：this.simpleCityID}）
的.text（this.cityFull））;
相反，我需要保持它通用的内嵌引用的值和文字的JavaScript的标准
$。每个（modelData，功能（指数的ItemData）{
select.append（$（'＆LT;选项/＆GT;'，{
值：itemData.Value，
文本：itemData.Text
After reviewing many tutorials and various approaches to Cascading DropDownLists, I decided to create a ViewModel for my View and then populate my DropDownLists based on this post: MVC3 AJAX Cascading DropDownLists
The goal here is the most basic and covered in many tutorials, but I still can't get it quite right... to populate a City dropdown based on the value of a State dropdown.
EDIT:
Since posting this request for help, I discovered Firebug (yes, that's how new I am to doing any sort of programming), and I was able to determine that I am successfully calling my controller, and pulling the necessary data. I believe the problem is the second half of my JavaScript that returns the data to my View.
Here is my View:
<label>STATE HERE:</label>
@Html.DropDownListFor(x => x.States, Model.States, new { @class = "chzn-select", id = "stateID" })
<br /><br />
<label>CITY HERE:</label>
@Html.DropDownListFor(x => x.Cities, Enumerable.Empty<SelectListItem>(), new { id = "cityID" })
Here is the JavaScript within my View, and somehow I'm not handling my results correctly once I get them:
$(function () {
$("#stateID").change(function () {
var stateId = $(this).val();
// and send it as AJAX request to the newly created action
$.ajax({
url: '@Url.Action("GetCities")',
type: 'GET',
data: { Id: stateId },
cache: 'false',
success: function (result) {
var citySelect = $('#cityID');
$(citySelect).empty();
// when the AJAX succeeds refresh the ddl container with
$.each(result, function (result) {
$(citySelect)
.append($('<option/>', { value: this.simpleCityID })
.text(this.cityFull));
});
},
error: function (result) {
alert('An Error has occurred');
}
});
});
});
Here is my controller called by the JavaScript:
public JsonResult GetCities(int Id)
{
return Json(GetCitySelectList(Id), JsonRequestBehavior.AllowGet);
}
private SelectList GetCitySelectList(int Id)
{
var cities = simpleDB.simpleCity.Where(x => x.simpleStateId == Id).ToList();
SelectList result = new SelectList(cities, "simpleCityId", "cityFull");
return result;
}
Here are my results from Firbug, which tell me I'm building and getting the data without issue, just not populating my DropDownList correctly:
[{"Selected":false,"Text":"Carmel","Value":"IN001"},{"Selected":false,"Text":"Fishers","Value":"IN002"}]
If anyone has any suggestions as to why the JavaScript fails to populate the dropdrown, please comment, thanks!
Thank you for your assistance,
It turns out that in my JavaScript below, I was attempting to directly reference the simpleCityID and cityFull fields associated with my data model:
$.each(result, function (result) {
$(citySelect)
.append($('<option/>', { value: this.simpleCityID })
.text(this.cityFull));
Instead, I needed to keep it generic and inline with JavaScript standards of referencing Value and Text:
$.each(modelData, function (index, itemData) {
select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
这篇关于ASP.NET MVC层叠DropDownLists的Javascript问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
