我目前需要创建级联下拉列表
<td>@Html.LabelFor(u => u.States)</td>
<td>
@Html.DropDownListFor(model => model.State, new SelectList(Model.States), new { style = "height:27px;border: 1px solid grey;", @id = "StateSelected" })
@Html.ValidationMessageFor(u => u.States)
@Html.HiddenFor(model => model.CustomerNumber)
</td>
</tr>
<tr>
<td></td>
<td>@Html.LabelFor(u => u.ShipToCode)</td>
<td>
@Html.DropDownListFor(model => model.ShipToCode, new SelectList(Model.Sites, "Code", "Address"), new { style = "height:27px;border: 1px solid grey;" })
@Html.ValidationMessageFor(u => u.Sites)
@Html.HiddenFor(model => model.CustomerNumber)
</td>
</tr>
选择第一个状态,将允许基于所选状态的更精确的地址
当前状态从控制器加载
private SitesModel GetDistinctStates(SitesModel model)
{
model.States = new List<string>();
using (NAVLIVEEntities entities = new NAVLIVEEntities())
{
try
{
List<GetServiceDeliveryAddress_Result> Addresses = entities.GetServiceDeliveryAddress(model.CustomerNumber).ToList();
IEnumerable<string> Addresses_Unique = Addresses.Select(x => x.County).Distinct();
List<string> Address_Unique_List = Addresses_Unique.ToList();
model.States.Add("ALL STATES");
foreach (string uniqueStates in Address_Unique_List)
{
model.States.Add(uniqueStates);
}
}
catch (Exception ex)
{
///Do nothing
}
}
return model;
}
private SitesModel GetSiteAddresses(SitesModel model, string state)
{
model.Sites = new List<SitesModel.SiteAddresses>();
using (NAVLIVEEntities entities = new NAVLIVEEntities())
{
try
{
List<GetServiceDeliveryAddress_Result> Addresses = entities.GetServiceDeliveryAddress(model.CustomerNumber).ToList();
foreach (var site in Addresses)
{
SitesModel.SiteAddresses address = new SitesModel.SiteAddresses();
address.Code = site.Code;
address.Address = site.Address + " " + site.Address_2 + ", " + site.City + " " + site.County + " " + site.Post_Code;
model.Sites.Add(address);
}
}
catch
{
}
return model;
}
第一个控制器将列出实体的不同状态。
第二个控制器的目标是根据第一个选择的状态显示列表。
有多种实现方式,但我似乎无法用这种方式解决这个问题。
修改
在我的javascript中,正如我所说的那样
<script type="text/javascript">
var localityUrl = '@Url.Action("FetchSites")';
var localities = $('#FetchSites');
$('#SelectedState').change(function () {
var txt = $(this).val();
alert(txt);
$.getJSON(localityUrl, { model: @Html.Raw(Json.Encode(Model)), State: $(this).val() }, function (data) {
if (!data) {
return;
}
localities.append($('<option></option>').val('').text('Please select'));
$.each(data, function (index, item) {
localities.append($('<option></option>').val(item.Value).text(item.Text));
});
});
})
</Script>
在控制器上执行此操作
[HttpGet]
public JsonResult FetchSites(SitesModel model, string State)
{
var data = model.Sites.Where(l => l.State == State).Select(l => l.Address);
return Json(data, JsonRequestBehavior.AllowGet);
}
但是,我似乎没有正确传递模型,因此传递数据进行过滤。有什么建议吗?
编辑2:网站人口
private SitesModel GetSiteAddresses(SitesModel model)
{
model.Sites = new List<SitesModel.SiteAddresses>();
using (NAVLIVEEntities entities = new NAVLIVEEntities())
{
try
{
List<GetServiceDeliveryAddress_Result> Addresses = entities.GetServiceDeliveryAddress(model.CustomerNumber).ToList();
foreach (var site in Addresses)
{
SitesModel.SiteAddresses address = new SitesModel.SiteAddresses();
address.Code = site.Code;
address.Address = site.Address + " " + site.Address_2 + ", " + site.City + " " + site.County + " " + site.Post_Code;
address.State = site.County;
model.Sites.Add(address);
}
}
catch
{
}
}
return model;
}