更好的方式来加载MVC 2下拉 [英] better way to load 2 dropdown in mvc
本文介绍了更好的方式来加载MVC 2下拉的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这就是我如何加载页面加载州和城市下拉菜单：
我的控制器方法
这是被加载网页时被调用的第一个方法。
公众的ActionResult指数（）
{
无功状态=的getStates（）;
VAR城市= Enumerable.Empty＆LT; SelectListItem＆GT;（）;
ViewBag.States =状态;
ViewBag.Cities =城市;
}私人的IEnumerable＆LT; SelectListItem＆GT;的getStates（）
{
使用（VAR DB =新DataEntities（））
{
返回db.States.Select（D = gt;新建SelectListItem的{text = d.StateName，值= d.Id.ToString（）}）;
}
}[HTTPGET]
公众的ActionResult GetCities（INT ID）
{
使用（VAR DB =新DataEntities（））
{
VAR数据= db.Cities.Where（D =＆GT; d.StateId == ID）。选择。（D =＆gt;新建的{text = d.CityName，值= d.Id}）了ToList（）;
返回JSON（数据，JsonRequestBehavior.AllowGet）;
}
}
我查看
的IEnumerable＆LT; SelectListItem＆GT;美国= ViewBag.States;
IEnumerable的＆LT; SelectListItem＆GT;城市= ViewBag.Cities;@ Html.DropDownList（国家，美国国家选择，新平变化{=loadCities（本）}）
@ Html.DropDownListFor（M = GT; m.CityId，城市，选择城市，新{ID =ddlCity}）
功能loadCities（OBJ）{
$阿贾克斯（{
网址：/首页/ GetCities
数据：{ID：$（OBJ）.VAL（）}，
的contentType：应用/ JSON
成功：函数（性反应）{
VAR HTML ='＆LT;期权价值=0＆GT;选择城市＆LT; /选项＆GT;';
$（的反响）。每个（函数（）{
HTML + ='＆LT;期权价值=+ THIS.VALUE +'＆GT;'+ this.Text +'＆LT; /选项＆GT;'
}）;
$（＃ddlCity）HTML（HTML）;
}
}）;
}
什么更好的办法那么这个载入国家和城市的下拉列表？
公共类HomeController的：控制器
{
公共的ActionResult指数（中间体编号= 0）
{
Person模型= NULL;
VAR状态=的getStates（）了ToList（）。
VAR城市= Enumerable.Empty＆LT; SelectListItem＆GT;（）;
如果（ID大于0）
{
使用（VAR DB =新DataEntities（））
{
模型= db.People.Include（城市）FirstOrDefault（D =＆GT; d.Id == ID）;
如果（型号== NULL）
模型=新的Person（）;
其他
{
states.First（D =＆GT; d.Value == model.City.StateId.ToString（））。选择= TRUE;
城市= db.Cities.Where（D =＆GT; d.StateId == model.City.StateId）.ToList（）选择（D =方式＆gt;新SelectListItem的{text = d.CityName，值= d.Id.ToString （），选定= d.Id == model.CityId}）;
} }
}
其他
{
模型=新的Person（）;
}
ViewBag.States =状态;
ViewBag.Cities =城市;
ViewBag.Persons = GetPersons（）;
返回查看（模型）;
} [HTTPGET]
公众的ActionResult GetCities（INT ID）
{
使用（VAR DB =新DataEntities（））
{
VAR数据= db.Cities.Where（D =＆GT; d.StateId == ID）。选择。（D =＆gt;新建的{text = d.CityName，值= d.Id}）了ToList（）;
返回JSON（数据，JsonRequestBehavior.AllowGet）;
}
} 公众的ActionResult SavePersonDetail（[绑定（不包括=ID）Person模型）
{ // VAR employeeDal =新Emploee（）;
//employee.firstname=model。 如果（ModelState.IsValid）
{
变种n = model.Id;
int.TryParse（请求[ID]，走出ID）;
使用（VAR DB =新DataEntities（））
{
如果（ID和0）
{
变种人= db.People.FirstOrDefault（D =＆GT; d.Id == ID）;
如果（人！= NULL）
{
model.Id = ID;
db.People.ApplyCurrentValues（模型）;
}
}
其他
{
db.People.AddObject（模型）;
}
db.SaveChanges（）;
}
}
如果（！Request.IsAjaxRequest（））
{
ViewBag.States =的getStates（）;
ViewBag.Persons = GetPersons（）;
ViewBag.Cities = Enumerable.Empty＆LT; SelectListItem＆GT;（）;
返回查看（「指数」）;
}
其他
{
返回PartialView（_ personDetail，GetPersons（））;
}
} 公众的ActionResult删除（INT ID）
{
使用（VAR DB =新DataEntities（））
{
VAR模型= db.People.FirstOrDefault（D =＆GT; d.Id == ID）;
如果（型号！= NULL）
{
db.People.DeleteObject（模型）;
db.SaveChanges（）;
}
}
如果（Request.IsAjaxRequest（））
{
返回含量（id.ToString（））;
}
其他
{
ViewBag.States =的getStates（）;
ViewBag.Persons = GetPersons（）;
ViewBag.Cities = Enumerable.Empty＆LT; SelectListItem＆GT;（）;
返回查看（「指数」）;
}
} 私人的IEnumerable＆LT; SelectListItem＆GT;的getStates（）
{
使用（VAR DB =新DataEntities（））
{
返回db.States.ToList（）选择（D = gt;新建SelectListItem的{text = d.StateName，值= d.Id.ToString（）}）;
}
} 私人的IEnumerable＆LT;＆人GT; GetPersons（）
{
使用（VAR DB =新DataEntities（））
{
返回db.People.Include（城市），包括（City.State）了ToList（）。
}
} 公众的ActionResult HomeAjax（）
{
ViewBag.States =的getStates（）;
ViewBag.Cities = Enumerable.Empty＆LT; SelectListItem＆GT;（）;
使用（VAR DB =新DataEntities（））
{
。VAR数据= db.States.Include（城市）选择（D = gt;新建{ID = d.Id，名称= d.StateName，城市= d.Cities.Select（X =＆gt;新建{ID = x.Id，名称= x.CityName}）}）了ToList（）;
。ViewBag.CityStateJson =新System.Web.Script.Serialization.JavaScriptSerializer（）序列化（数据）;
}
ViewBag.Persons = GetPersons（）;
返回查看（）;
}
}
@model IEnumerable的＆LT;＆人GT;
＆LT; DIV＆GT;
＆LT;表＆gt;
＆所述; TR＆GT;
＆LT;第i个
名字
＆LT; /第i
＆LT;第i个
姓
＆LT; /第i
＆LT;第i个
电子邮件
＆LT; /第i
＆LT;第i个
市
＆LT; /第i
＆LT;第i个
州
＆LT; /第i
＆LT;第i个
编辑
＆LT; /第i
＆LT; / TR＆GT;
@if（Model.Count（）== 0）
{
＆所述; TR＆GT;
＆LT; TD合并单元格=6＆GT;
＆LT; H3＆GT;无可用数据和LT; / H3 GT＆;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
}
其他{
的foreach（在型号VAR项）{
＆所述; TR数据-ID =@ item.Id＆GT;
＆LT; TD数据-ID =FN＆GT; @ item.FirstName＆LT; / TD＆GT;
＆LT; TD数据-ID =LN＆GT; @ item.LastName＆LT; / TD＆GT;
＆LT; TD数据-ID =电子邮件＆GT; @ item.Email＆LT; / TD＆GT;
＆LT; TD数据-ID =CN＆GT; @ item.CityName＆LT;输入类型=隐藏值=@ item.CityId/＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT; @ item.StateName＆LT; / TD＆GT;
＆所述; TD＆GT;
@if（ViewBag.Title ==首页阿贾克斯|| Request.IsAjaxRequest（））
{
＆LT; A HREF =JavaScript的：无效（0）;的onclick =编辑（这一点，@ item.Id）;＆GT;更新和LT; / A＆GT;
＆LT;跨度＆GT; @ Ajax.ActionLink（删除，删除，新{ID = item.Id}，新AjaxOptions {的onSuccess =deleteSuccess，OnBegin =showLoader的onComplete =hideLoader}）＆LT; / SPAN＆GT; }
其他{
＆LT;跨度＆GT; @ Html.ActionLink（更新，索引，新{ID = item.Id}）LT; / SPAN＆GT;
＆LT;跨度＆GT; @ Html.ActionLink（删除，删除，新{ID = item.Id}）LT; / SPAN＆GT;
} ＆LT; / TD＆GT;
＆LT; / TR＆GT;
} }
＆LT; /表＆gt;
＆LT; / DIV＆GT;@model人@ {
ViewBag.Title =家Ajax的;
IEnumerable的＆LT;＆人GT;人= ViewBag.Persons;
IEnumerable的＆LT; SelectListItem＆GT;美国= ViewBag.States;
IEnumerable的＆LT; SelectListItem＆GT;城市= ViewBag.Cities;
IEnumerable的＆LT;州与GT; fullStates = ViewBag.CityStates;}@section功能{
＆lt;节类=精选＆GT;
＆LT; DIV CLASS =内容包装＆GT;
＆LT; hgroup类=标题＆GT;
＆LT; H1方式＆gt; @ ViewBag.Title＆LT; / H1＆GT;
＆LT; / hgroup＆GT;
＆LT; / DIV＆GT;
＆LT; /节＆gt;
}@section风格{
＆LT;风格类型=文/ CSS＆GT;
TD，TH {
边框：1px的固体;
填充：为5px 10px的;
} 选择 {
填充：2px的为5px;
宽度：310px;
字体大小：16像素;
}
＆LT; /风格＆GT;
}@section脚本{
@ Scripts.Render（〜/包/ jqueryval）
＆LT;脚本类型=文/ JavaScript的＆GT; VAR jsonArray = @ Html.Raw（ViewBag.CityStateJson） 功能clearValues（）{
$（输入[类型='文本']，选择）VAL（''）;
$（输入[类型=隐藏] [NAME ='ID']）VAL（0）;
} 功能loadCities（OBJ）{ 对于（VAR I = 0; I＆LT; jsonArray.length;我++）{
如果（jsonArray [I] .ID == parseInt函数（$（OBJ）.VAL（）））{
fillCity（jsonArray [I] .Cities）;
打破;
}
}
} 功能编辑（OBJ，ID）{
//警报（HI）
$（输入[类型=隐藏] [NAME ='ID']）VAL（ID）。
VAR TR = $（OBJ）.closest（TR）;
$（＃txtfirstName）VAL（$（TD [数据-ID =FN]，TR）的.text（）修剪（）。）。
$（＃txtlastName）VAL（$（TD [数据-ID =LN]，TR）的.text（）修剪（）。）。
$（＃txtemail）VAL（$（TD [数据-ID =电子邮件]，TR）的.text（）修剪（）。）。
VAR城市= $（TD [数据-ID ='CN']输入[类型=隐藏]，TR）.VAL（）;
VAR状态;
对于（VAR I = 0; I＆LT; jsonArray.length;我++）{
对于（VAR J = 0; J＆LT; jsonArray [I] .Cities.length; J ++）{
如果（jsonArray [I] .Cities [J] .ID == parseInt函数（市））{
状态= jsonArray [I] .ID;
打破;
}
}
如果（州）{
fillCity（jsonArray [I] .Cities）;
打破;
}
}
$（＃ddlState）VAL（州）。
$（＃ddlCity）VAL（市）。
} 功能fillCity（OBJ）{
VAR HTML ='＆LT;期权价值=0＆GT;选择城市＆LT; /选项＆GT;';
$（OBJ）。每个（函数（）{
HTML + ='＆LT;期权价值=+ this.Id +'＆GT;' + this.Name +'＆LT; /选项＆GT;'
}）;
$（＃ddlCity）HTML（HTML）;
} 功能deleteSuccess（性反应）{
警报（记录删除成功）;
$（TR [数据-ID ='+的反响+']），删除（）。
} 功能insertSuccess（）{
警报（记录保存成功）;
clearValues（）;
} 功能showLoader（）{
$（＃覆盖）显示（）。
}
功能hideLoader（）{
$（＃覆盖），隐藏（）。
}
＆LT; / SCRIPT＆GT;
}＆LT; H3＆gt;添加个人详情＆LT; / H3 GT＆;
@using（Ajax.BeginForm（SavePersonDetail，家，新AjaxOptions {列举HTTPMethod =POST，UpdateTargetId =personList的onSuccess =insertSuccess，OnBegin =showLoader的onComplete =hideLoader}））
{
@ Html.HiddenFor（M =＆GT; m.Id）;
＆LT; OL类=圆圆＆GT;
＆LT;立GT;
@ Html.LabelFor（M = GT; m.FirstName）
@ Html.TextBoxFor（M = GT; m.FirstName，新{ID =txtfirstName}）
@ Html.ValidationMessageFor（M = GT; m.FirstName）
＆LT; /李＆GT;
＆LT;立GT;
@ Html.LabelFor（M = GT; m.LastName）
@ Html.TextBoxFor（M = GT; m.LastName，新{ID =txtlastName}）
@ Html.ValidationMessageFor（M = GT; m.LastName）
＆LT; /李＆GT;
＆LT;立GT;
@ Html.LabelFor（M = GT; m.Email）
@ Html.TextBoxFor（M = GT; m.Email，新{ID =txtemail}）
@ Html.ValidationMessageFor（M = GT; m.Email）
＆LT; /李＆GT; ＆LT;立GT;
@ Html.Label（国家）
@ Html.DropDownList（国家，美国国家选择，新平变化{=loadCities（本）ID =ddlState}）
＆LT; /李＆GT;
＆LT;立GT;
@ Html.LabelFor（M = GT; m.CityId）
@ Html.DropDownListFor（M = GT; m.CityId，城市，选择城市，新{ID =ddlCity}）
@ Html.ValidationMessageFor（M = GT; m.CityId）
＆LT; /李＆GT;
＆LT; / OL＆GT;
＆LT;输入类型=提交值=保存/＆GT;
＆LT;输入类型=按钮值=取消的onclick =clearValues（）;/＆GT;
} ＆LT; H2＆GT;
人名单
＆LT; / H＆GT;
＆LT; DIV style=\"position:fixed;text-align:center;top:0;bottom:0;left:0;right:0;z-index:10;background-color:black;opacity:0.6;display:none;\" ID =叠加＆GT;
＆LT; IMG风格=的位置是：相对;顶端：370pxSRC =〜/图片/ AJAX-loader.gif/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =personList＆GT;
@ Html.Partial（_ personDetail，人）
＆LT; / DIV＆GT;
解决方案
你的方法使用AJAX是好的，但我会推荐一些较好的做法，包括使用具有属性视图模型为 STATEID ， CityID StateList 和 CityList ，并使用非侵入式JavaScript 而不是污染你的行为的标记，并产生了第一个（请）选项空价值，而不是 0 所以它可以用 [必需] 属性
HTML
@ Html.DropDownList（M = GT; m.StateID，美国国家选择）//删除的onchange
@ Html.DropDownListFor（M = GT; m.CityID，城市，选择城市）//为什么更改默认的ID？
SCRIPT
VAR URL ='@ Url.Action（GetCities，家）; //使用助手（不硬code）
VAR城市= $（'＃CityID'）; //缓存元素
$（'＃STATEID'）。改变（函数（）{
$ .getJSON（URL，{ID：$（本）.VAL（）}，函数（响应）{
//明确并添加默认值（NULL）选项
。cities.empty（）追加（$（'＆LT;选项＆GT;＆LT; /选项＆GT;'）。VAL（''）文本（'请选择'））;
$。每个（响应函数（指数，项目）{
cities.append（$（'＆LT;选项＆GT;＆LT; /选项＆GT;'）。VAL（item.Value）的.text（item.Text））;
}）;
}）;
}）;
如果你是渲染多个项目（说你问用户选择他们参观了他们的最后10个城市），你可以缓存在第一次调用的结果，以避免重复调用，他们的选择可能包括来自同一个国家的城市。
VAR缓存= {};
$（'＃STATEID'）。改变（函数（）{
VAR selectedState = $（本）.VAL（）;
如果（缓存[selectedState]）{
//渲染从缓存中的选项
}其他{
$ .getJSON（URL，{ID：selectedState}，函数（响应）{
//添加到缓存
缓存[selectedState] =响应;
.....
}）;
}
}）;
最后，为了响应您对这样做没有Ajax的意见，你可以通过所有城市的观点，并将它们分配到一个JavaScript数组。我想只有少数城市推荐这个，如果你有一个少数国家，每个。它是一种物质平衡略有多余的初始加载时间与在使Ajax调用略有延迟。
在控制器
model.CityList = db.Cities.Select（D =＆gt;新建{=城d.CountryID，文本= d.CityName，值= d.Id}）了ToList（。 ）;
在视图（脚本）
//将所有城市JavaScript数组
VAR allCities = JSON.parse（'@ Html.Raw（Json.En code（Model.CityList））'）;
$（'＃STATEID'）。改变（函数（）{
VAR selectedState = $（本）.VAL（）;
VAR城市= $ .grep（allCities，功能（项指数）{
返回item.CountryID == selectedState;
}）;
//基于城市价值构建选项
}）;
This is how i am loading on page load state and city dropdown:
My Controller method:
This is the first method which is calling when page is loaded.
public ActionResult Index()
{
var states = GetStates();
var cities = Enumerable.Empty<SelectListItem>();
ViewBag.States = states;
ViewBag.Cities = cities;
}
private IEnumerable<SelectListItem> GetStates()
{
using (var db = new DataEntities())
{
return db.States.Select(d => new SelectListItem { Text = d.StateName, Value =d.Id.ToString() });
}
}
[HttpGet]
public ActionResult GetCities(int id)
{
using (var db = new DataEntities())
{
var data = db.Cities.Where(d=>d.StateId==id).Select(d => new { Text = d.CityName, Value = d.Id }).ToList();
return Json(data, JsonRequestBehavior.AllowGet);
}
}
My View:
IEnumerable<SelectListItem> States = ViewBag.States;
IEnumerable<SelectListItem> Cities = ViewBag.Cities;
@Html.DropDownList("State", States, "Select State", new { onchange="loadCities(this)"})
@Html.DropDownListFor(m => m.CityId, Cities, "Select City", new { id="ddlCity"})
function loadCities(obj) {
$.ajax({
url: "/Home/GetCities",
data: { id: $(obj).val() },
contentType:"application/json",
success:function(responce){
var html = '<option value="0">Select City</option>';
$(responce).each(function () {
html += '<option value="'+this.Value+'">'+this.Text+'</option>'
});
$("#ddlCity").html(html);
}
});
}
Any better way then this to load state and city dropdown?
public class HomeController : Controller
{
public ActionResult Index(int id=0)
{
Person model = null;
var states = GetStates().ToList();
var cities = Enumerable.Empty<SelectListItem>();
if (id > 0)
{
using (var db = new DataEntities())
{
model = db.People.Include("City").FirstOrDefault(d => d.Id == id);
if (model == null)
model = new Person();
else
{
states.First(d => d.Value == model.City.StateId.ToString()).Selected = true;
cities = db.Cities.Where(d => d.StateId == model.City.StateId).ToList().Select(d => new SelectListItem { Text = d.CityName,Value=d.Id.ToString(),Selected=d.Id==model.CityId });
}
}
}
else
{
model = new Person();
}
ViewBag.States = states;
ViewBag.Cities = cities;
ViewBag.Persons = GetPersons();
return View(model);
}
[HttpGet]
public ActionResult GetCities(int id)
{
using (var db = new DataEntities())
{
var data = db.Cities.Where(d=>d.StateId==id).Select(d => new { Text = d.CityName, Value = d.Id }).ToList();
return Json(data, JsonRequestBehavior.AllowGet);
}
}
public ActionResult SavePersonDetail([Bind(Exclude = "Id")] Person model)
{
// var employeeDal= new Emploee();
//employee.firstname=model.
if (ModelState.IsValid)
{
var Id = model.Id;
int.TryParse(Request["Id"], out Id);
using (var db = new DataEntities())
{
if (Id > 0)
{
var person = db.People.FirstOrDefault(d => d.Id == Id);
if (person != null)
{
model.Id = Id;
db.People.ApplyCurrentValues(model);
}
}
else
{
db.People.AddObject(model);
}
db.SaveChanges();
}
}
if (!Request.IsAjaxRequest())
{
ViewBag.States = GetStates();
ViewBag.Persons = GetPersons();
ViewBag.Cities = Enumerable.Empty<SelectListItem>();
return View("Index");
}
else
{
return PartialView("_personDetail",GetPersons());
}
}
public ActionResult Delete(int id)
{
using (var db = new DataEntities())
{
var model = db.People.FirstOrDefault(d => d.Id == id);
if (model != null)
{
db.People.DeleteObject(model);
db.SaveChanges();
}
}
if (Request.IsAjaxRequest())
{
return Content(id.ToString());
}
else
{
ViewBag.States = GetStates();
ViewBag.Persons = GetPersons();
ViewBag.Cities = Enumerable.Empty<SelectListItem>();
return View("Index");
}
}
private IEnumerable<SelectListItem> GetStates()
{
using (var db = new DataEntities())
{
return db.States.ToList().Select(d => new SelectListItem { Text = d.StateName, Value =d.Id.ToString() });
}
}
private IEnumerable<Person> GetPersons()
{
using (var db = new DataEntities())
{
return db.People.Include("City").Include("City.State").ToList();
}
}
public ActionResult HomeAjax()
{
ViewBag.States = GetStates();
ViewBag.Cities = Enumerable.Empty<SelectListItem>();
using (var db = new DataEntities())
{
var data = db.States.Include("Cities").Select(d => new { Id = d.Id, Name = d.StateName, Cities = d.Cities.Select(x => new { Id=x.Id,Name=x.CityName}) }).ToList();
ViewBag.CityStateJson = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(data);
}
ViewBag.Persons = GetPersons();
return View();
}
}
@model IEnumerable<Person>
<div>
<table>
<tr>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Email
</th>
<th>
City
</th>
<th>
State
</th>
<th>
Edit
</th>
</tr>
@if (Model.Count() == 0)
{
<tr>
<td colspan="6">
<h3>No data available</h3>
</td>
</tr>
}
else {
foreach (var item in Model) {
<tr data-id="@item.Id">
<td data-id="fn">@item.FirstName</td>
<td data-id="ln">@item.LastName</td>
<td data-id="email">@item.Email</td>
<td data-id="cn">@item.CityName<input type="hidden" value="@item.CityId" /></td>
<td>@item.StateName</td>
<td>
@if (ViewBag.Title == "Home Ajax" || Request.IsAjaxRequest())
{
<a href="javascript:void(0);" onclick="Edit(this,@item.Id);">Update</a>
<span>@Ajax.ActionLink("Delete", "Delete", new { id = item.Id }, new AjaxOptions {OnSuccess="deleteSuccess",OnBegin="showLoader",OnComplete="hideLoader" })</span>
}
else {
<span>@Html.ActionLink("Update", "Index", new { id = item.Id })</span>
<span>@Html.ActionLink("Delete", "Delete", new { id = item.Id })</span>
}
</td>
</tr>
}
}
</table>
</div>
@model Person
@{
ViewBag.Title = "Home Ajax";
IEnumerable<Person> persons = ViewBag.Persons;
IEnumerable<SelectListItem> States = ViewBag.States;
IEnumerable<SelectListItem> Cities = ViewBag.Cities;
IEnumerable<State> fullStates=ViewBag.CityStates;
}
@section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
</hgroup>
</div>
</section>
}
@section styles{
<style type="text/css">
td,th {
border:1px solid;
padding:5px 10px;
}
select {
padding:5px 2px;
width:310px;
font-size:16px;
}
</style>
}
@section scripts{
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
var jsonArray = @Html.Raw(ViewBag.CityStateJson)
function clearValues() {
$("input[type='text'],select").val('');
$("input[type='hidden'][name='Id']").val(0);
}
function loadCities(obj) {
for (var i = 0; i < jsonArray.length; i++) {
if (jsonArray[i].Id == parseInt($(obj).val())) {
fillCity(jsonArray[i].Cities);
break;
}
}
}
function Edit(obj, Id) {
// alert("hi")
$("input[type='hidden'][name='Id']").val(Id);
var tr = $(obj).closest("tr");
$("#txtfirstName").val($("td[data-id='fn']", tr).text().trim());
$("#txtlastName").val($("td[data-id='ln']", tr).text().trim());
$("#txtemail").val($("td[data-id='email']", tr).text().trim());
var city = $("td[data-id='cn'] input[type='hidden']", tr).val();
var state;
for (var i = 0; i < jsonArray.length; i++) {
for (var j = 0; j < jsonArray[i].Cities.length; j++) {
if (jsonArray[i].Cities[j].Id == parseInt(city)) {
state = jsonArray[i].Id;
break;
}
}
if (state) {
fillCity(jsonArray[i].Cities);
break;
}
}
$("#ddlState").val(state);
$("#ddlCity").val(city);
}
function fillCity(obj) {
var html = '<option value="0">Select City</option>';
$(obj).each(function () {
html += '<option value="' + this.Id + '">' + this.Name + '</option>'
});
$("#ddlCity").html(html);
}
function deleteSuccess(responce) {
alert("record deleted successfully");
$("tr[data-id='" + responce + "']").remove();
}
function insertSuccess() {
alert("Record saved successfully");
clearValues();
}
function showLoader() {
$("#overlay").show();
}
function hideLoader() {
$("#overlay").hide();
}
</script>
}
<h3>Add Personal Detail</h3>
@using (Ajax.BeginForm("SavePersonDetail", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "personList" ,OnSuccess="insertSuccess",OnBegin="showLoader",OnComplete="hideLoader"}))
{
@Html.HiddenFor(m => m.Id);
<ol class="round">
<li>
@Html.LabelFor(m => m.FirstName)
@Html.TextBoxFor(m => m.FirstName, new { id = "txtfirstName" })
@Html.ValidationMessageFor(m => m.FirstName)
</li>
<li>
@Html.LabelFor(m => m.LastName)
@Html.TextBoxFor(m => m.LastName, new { id = "txtlastName" })
@Html.ValidationMessageFor(m => m.LastName)
</li>
<li>
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email, new { id = "txtemail" })
@Html.ValidationMessageFor(m => m.Email)
</li>
<li>
@Html.Label("State")
@Html.DropDownList("State", States, "Select State", new { onchange = "loadCities(this)", id = "ddlState" })
</li>
<li>
@Html.LabelFor(m => m.CityId)
@Html.DropDownListFor(m => m.CityId, Cities, "Select City", new { id = "ddlCity" })
@Html.ValidationMessageFor(m => m.CityId)
</li>
</ol>
<input type="submit" value="Save" />
<input type="button" value="Cancel" onclick="clearValues();"/>
}
<h2>
Person List
</h2>
<div style="position:fixed;text-align:center;top:0;bottom:0;left:0;right:0;z-index:10;background-color:black;opacity:0.6;display:none;" id="overlay">
<img style="position:relative;top:370px" src="~/Images/ajax-loader.gif" />
</div>
<div id="personList">
@Html.Partial("_personDetail", persons)
</div>
解决方案
You approach using ajax is fine although I would recommend a few better practices including using a view model with properties for StateID, CityID StateList and CityList, and using Unobtrusive JavaScript rather than polluting you markup with behavior, and generating the first ("please select") option with a null value rather than 0 so it can be used with the [Required] attribute
HTML
@Html.DropDownList(m => m.StateID, States, "Select State") // remove the onchange
@Html.DropDownListFor(m => m.CityID, Cities, "Select City") // why change the default ID?
SCRIPT
var url = '@Url.Action("GetCities", "Home")'; // use the helper (dont hard code)
var cities = $('#CityID'); // cache the element
$('#StateID').change(function() {
$.getJSON(url, { id: $(this).val() }, function(response) {
// clear and add default (null) option
cities.empty().append($('<option></option>').val('').text('Please select'));
$.each(response, function(index, item) {
cities.append($('<option></option>').val(item.Value).text(item.Text));
});
});
});
If you were rendering multiple items (say you were asking the user to select their last 10 cities they visited), you can cache the result of the first call to avoid repeated calls where their selections may include cities from the same state.
var cache = {};
$('#StateID').change(function() {
var selectedState = $(this).val();
if (cache[selectedState]) {
// render the options from the cache
} else {
$.getJSON(url, { id: selectedState }, function(response) {
// add to cache
cache[selectedState] = response;
.....
});
}
});
Finally, in response to your comments regarding doing it without ajax, you can pass all the cities to the view and assign them to a javascript array. I would only recommend this if you have a few countries, each with a few cities. Its a matter of balancing the slight extra initial load time vs the slight delay in making the ajax call.
In the controller
model.CityList = db.Cities.Select(d => new { City = d.CountryID, Text = d.CityName, Value = d.Id }).ToList();
In the view (script)
// assign all cities to javascript array
var allCities= JSON.parse('@Html.Raw(Json.Encode(Model.CityList))');
$('#StateID').change(function() {
var selectedState = $(this).val();
var cities = $.grep(allCities, function(item, index) {
return item.CountryID == selectedState;
});
// build options based on value of cities
});
这篇关于更好的方式来加载MVC 2下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
