我有两个下拉列表，一个用于国家，另一个用于州。当第一次呈现表单时，填充国家下拉列表并且禁用状态下拉列表。当用户选择国家时，jquery 会发生部分帖子，并调用一个控制器操作方法，该方法返回 json 数据。当用户选择国家时出现问题然后我看到我的重载索引方法被调用并返回 json 但萤火虫显示错误如网络错误。
在这里，我给出了我的控制器代码和 cshtml 代码。请告诉我那里出了什么问题
cshtml code
@{
ViewBag.Title = "Home Page";
}
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/jscript"></script>
<script type="text/jscript">
$(function () {
// $('#CountryID').change(function () {
// var URL = $('#FormID');
// alert(URL);
//// $.getJSON('/DDL/DistrictList/' + $('#State').val(), function (data) {
// });
// });
$('#CountryID').change(function () {
var dropdownID = $(this).val();
$.post('@Url.Action("Index", "Home")', { CountryID: dropdownID }, function (result) {
// result contains your State-List
var items = '<option>--Select State--</option>';
$.each(data, function (i, state) {
alert(i);
items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
});
$('#State').html(items);
});
});
});
</script>
@using (Html.BeginForm())
{
<fieldset>
<legend>DropDownList</legend>
@Html.Label("Country")
@Html.DropDownList("Country", ViewBag.Country as SelectList, "--Select Country--", new { id = "CountryID" })
@Html.Label("State")
@Html.DropDownList("State", ViewBag.Country as SelectList, "--Select State--", new { id = "StateID", @disabled = "disabled" })
<input type="submit" value="Create" id="SubmitId" />
</fieldset>
}
controller code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace CascadeTest.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to Cascade Test";
ViewBag.Country = new SelectList(CascadeTest.Models.Country.GetCountries(), "CountryID", "Name");
var State = from s in CascadeTest.Models.State.GetState()
where s.CountryID == ""
select s.Name;
ViewBag.State = new SelectList(State, "StateID", "Name");
return View();
}
[HttpPost]
public JsonResult Index(string CountryID)
{
var State = from s in CascadeTest.Models.State.GetState()
where s.CountryID == CountryID
select s.Name;
string xxx = Json(new SelectList(State.ToArray(), "StateID", "Name"), JsonRequestBehavior.AllowGet).ToString();
return Json(new SelectList(State.ToArray(), "StateID", "Name"), JsonRequestBehavior.AllowGet);
}
}
}
my model code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace CascadeTest.Models
{
public class Country
{
public string CountryID { get; set; }
public string Name { get; set; }
public static IQueryable<Country> GetCountries()
{
return new List<Country>
{
new Country {
CountryID = "CA",
Name = "Canada"
},
new Country{
CountryID = "US",
Name = "United States"
},
new Country{
CountryID = "UK",
Name = "United Kingdom"
},
new Country{
CountryID = "IN",
Name = "India"
}
}.AsQueryable();
}
}
public class State
{
public string StateID { get; set; }
public string Name { get; set; }
public string CountryID { get; set; }
public static IQueryable<State> GetState()
{
return new List<State>
{
// State declare for india
new State {
StateID = "WB",
Name = "West Bengal"
,CountryID="IN"
},
new State{
StateID = "BH",
Name = "Bihar"
,CountryID="IN"
},
new State{
StateID = "OR",
Name = "Orissa"
,CountryID="IN"
},
new State{
StateID = "MD",
Name = "Madhya Pradesh"
,CountryID="IN"
},
// State declare for USA
new State{
StateID = "AL",
Name = "Alabama"
,CountryID="US"
},
new State{
StateID = "FL",
Name = "Florida"
,CountryID="US"
},
new State{
StateID = "IA",
Name = "Iowa"
,CountryID="US"
},
new State{
StateID = "MS",
Name = "Mississippi"
,CountryID="US"
},
// State declare for UK
new State{
StateID = "AV",
Name = "Avon"
,CountryID="UK"
},
new State{
StateID = "BS",
Name = "Buckinghamshire"
,CountryID="UK"
},
new State{
StateID = "CH",
Name = "Cheshire"
,CountryID="UK"
},
new State{
StateID = "DS",
Name = "Dorset"
,CountryID="UK"
}
//No state define for canada
}.AsQueryable();
}
}
}
我认为问题出在下面的代码中
$('#CountryID').change(function () {
var dropdownID = $(this).val();
$.post('@Url.Action("Index", "Home")', { CountryID: dropdownID }, function (result) {
// result contains your State-List
var items = '<option>--Select State--</option>';
$.each(data, function (i, state) {
alert(i);
items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
});
$('#State').html(items);
});
});
这是Firefox显示的错误行
我无法理解我做错了什么。所以请帮我解决这个问题。谢谢
我的索引方法看起来如何
一个是默认的，没有参数，选择第二个索引方法在选择国家时填充状态。when country is selected then a partial post occur by jquery and second index method return json from server side which jquery parse to populate state dropdown. 请查看代码并告诉我需要更改的地方。谢谢
public ActionResult Index()
{
ViewBag.Message = "Welcome to Cascade Test";
ViewBag.Country = new SelectList(CascadeTest.Models.Country.GetCountries(), "CountryID", "Name");
var State = from s in CascadeTest.Models.State.GetState()
where s.CountryID == ""
select s.Name;
ViewBag.State = new SelectList(State, "StateID", "Name");
return View();
}
[HttpPost]
public JsonResult Index(string CountryID)
{
var State = from s in CascadeTest.Models.State.GetState()
where s.CountryID == CountryID
select s.Name;
string xxx = Json(new SelectList(State.ToArray(), "StateID", "Name"), JsonRequestBehavior.AllowGet).ToString();
return Json(new SelectList(State.ToArray(), "StateID", "Name"), JsonRequestBehavior.AllowGet);
}