在 mvc 中加载 2 下拉列表的更好方法
[英] better way to load 2 dropdown in mvc
本文介绍了在 mvc 中加载 2 下拉列表的更好方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我在页面加载状态和城市下拉列表中加载的方式:
我的控制器方法:
这是页面加载时调用的第一个方法.
public ActionResult Index(){var states = GetStates();var city = Enumerable.Empty();ViewBag.States = 状态；ViewBag.Cities = 城市；}私有 IEnumerable获取状态(){使用 (var db = new DataEntities()){返回 db.States.Select(d => new SelectListItem { Text = d.StateName, Value =d.Id.ToString() });}}[HttpGet]公共 ActionResult GetCities(int id){使用 (var db = new DataEntities()){var data = db.Cities.Where(d=>d.StateId==id).Select(d => new { Text = d.CityName, Value = d.Id }).ToList();返回 Json(data, JsonRequestBehavior.AllowGet);}}
我的观点:
IEnumerable状态 = ViewBag.States;IEnumerable城市 = ViewBag.Cities;@Html.DropDownList("State", States, "Select State", new { onchange="loadCities(this)"})@Html.DropDownListFor(m => m.CityId, Cities, "Select City", new { id="ddlCity"})函数 loadCities(obj) {$.ajax({url: "/Home/GetCities",数据:{ id: $(obj).val() },contentType:"应用程序/json",成功:功能(响应){var html = '<option value="0">选择城市</option>';$(responce).each(function () {html += '<option value="'+this.Value+'">'+this.Text+'</option>'});$("#ddlCity").html(html);}});}
还有更好的方法来加载州和城市下拉列表吗?
公共类 HomeController : 控制器{公共操作结果索引(int id=0){人物模型 = null;var states = GetStates().ToList();var city = Enumerable.Empty();如果 (id > 0){使用 (var db = new DataEntities()){模型 = db.People.Include("City").FirstOrDefault(d => d.Id == id);如果(模型==空)模型 = 新人()；别的{states.First(d => d.Value == model.City.StateId.ToString()).Selected = true;城市 = 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 });}}}别的{模型 = 新人()；}ViewBag.States = 状态；ViewBag.Cities = 城市；ViewBag.Persons = GetPersons();返回视图(模型)；}[HttpGet]公共 ActionResult GetCities(int id){使用 (var db = new DataEntities()){var data = db.Cities.Where(d=>d.StateId==id).Select(d => new { Text = d.CityName, Value = d.Id }).ToList();返回 Json(data, JsonRequestBehavior.AllowGet);}}public ActionResult SavePersonDetail([Bind(Exclude = "Id")] Person 模型){//var employeeDal= new Emploee();//employee.firstname=model.如果(模型状态.IsValid){var Id = model.Id;int.TryParse(Request["Id"], out Id);使用 (var db = new DataEntities()){如果 (Id > 0){var person = db.People.FirstOrDefault(d => d.Id == Id);如果(人！= null){模型.Id = Id;db.People.ApplyCurrentValues(模型)；}}别的{db.People.AddObject(模型)；}db.SaveChanges();}}如果 (!Request.IsAjaxRequest()){ViewBag.States = GetStates();ViewBag.Persons = GetPersons();ViewBag.Cities = Enumerable.Empty();返回视图(索引")；}别的{返回 PartialView("_personDetail",GetPersons());}}公共操作结果删除(int id){使用 (var db = new DataEntities()){var 模型 = db.People.FirstOrDefault(d => d.Id == id);如果(模型！= null){db.People.DeleteObject(模型)；db.SaveChanges();}}如果 (Request.IsAjaxRequest()){返回内容(id.ToString());}别的{ViewBag.States = GetStates();ViewBag.Persons = GetPersons();ViewBag.Cities = Enumerable.Empty();返回视图(索引")；}}私有 IEnumerable获取状态(){使用 (var db = new DataEntities()){返回 db.States.ToList().Select(d => new SelectListItem { Text = d.StateName, Value =d.Id.ToString() });}}私有 IEnumerable获取人(){使用 (var db = new DataEntities()){返回 db.People.Include("City").Include("City.State").ToList();}}公共 ActionResult HomeAjax(){ViewBag.States = GetStates();ViewBag.Cities = Enumerable.Empty();使用 (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();返回视图()；}}@model IEnumerable<div><表格><tr><th>名</th><th>姓</th><th>电子邮件</th><th>城市</th><th>状态</th><th>编辑</th></tr>@if (Model.Count() == 0){<tr><td colspan="6"><h3>无可用数据</h3></td></tr>}别的 {foreach(模型中的变量项目){<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);">更新<span>@Ajax.ActionLink("Delete", "Delete", new { id = item.Id }, new AjaxOptions {OnSuccess="deleteSuccess",OnBegin="showLoader",OnComplete="hideLoader" })</跨度>}别的 {<span>@Html.ActionLink("Update", "Index", new { id = item.Id })</span><span>@Html.ActionLink("Delete", "Delete", new { id = item.Id })}</td></tr>}}
@model 人@{ViewBag.Title = "首页 Ajax";IEnumerable人 = ViewBag.Persons;IEnumerable状态 = ViewBag.States;IEnumerable城市 = ViewBag.Cities;IEnumerable<状态>fullStates=ViewBag.CityStates;}@section 精选{<div class="content-wrapper"><hgroup class="title"><h1>@ViewBag.Title.</h1>
</节>}@节样式{<style type="text/css">td,th {边框:1px 实心；填充:5px 10px;}选择 {填充:5px 2px;宽度:310px；字体大小:16px；}</风格>}@section 脚本{@Scripts.Render("~/bundles/jqueryval")<script type="text/javascript">var jsonArray = @Html.Raw(ViewBag.CityStateJson)函数 clearValues() {$("input[type='text'],select").val('');$("input[type='hidden'][name='Id']").val(0);}函数 loadCities(obj) {for (var i = 0; i < jsonArray.length; i++) {if (jsonArray[i].Id == parseInt($(obj).val())) {fillCity(jsonArray[i].Cities);休息;}}}功能编辑(对象，Id){//警报(嗨")$("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();无功状态；for (var i = 0; i < jsonArray.length; i++) {for (var j = 0; j }<h3>添加个人详细信息</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>@Html.LabelFor(m => m.LastName)@Html.TextBoxFor(m => m.LastName, new { id = "txtlastName" })@Html.ValidationMessageFor(m => m.LastName)<li>@Html.LabelFor(m => m.Email)@Html.TextBoxFor(m => m.Email, new { id = "txtemail" })@Html.ValidationMessageFor(m => m.Email)<li>@Html.Label("状态")@Html.DropDownList("State", States, "Select State", new { onchange = "loadCities(this)", id = "ddlState" })<li>@Html.LabelFor(m => m.CityId)@Html.DropDownListFor(m => m.CityId, Cities, "Select City", new { id = "ddlCity" })@Html.ValidationMessageFor(m => m.CityId)</ol><input type="submit" value="保存"/><input type="button" value="Cancel" onclick="clearValues();"/>}<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:没有任何;"id="覆盖"><img style="position:relative;top:370px" src="~/Images/ajax-loader.gif"/>
<div id="personList">@Html.Partial("_personDetail", 人)
解决方案
您使用 ajax 的方法很好，尽管我会推荐一些更好的做法，包括使用带有 StateID 属性的视图模型，CityID StateList 和 CityList，并使用 Unobtrusive JavaScripta> 而不是用行为污染你的标记，并用 null 值而不是 0 生成第一个(请选择")选项，以便它可以与 [必需] 属性
HTML
@Html.DropDownList(m => m.StateID, States, "Select State")//移除 onchange@Html.DropDownListFor(m => m.CityID, Cities, "Select City")//为什么要更改默认 ID?
脚本
var url = '@Url.Action("GetCities", "Home")';//使用助手(不要硬编码)var city = $('#CityID');//缓存元素$('#StateID').change(function() {$.getJSON(url, { id: $(this).val() }, function(response) {//清除并添加默认(空)选项city.empty().append($('<option></option>').val('').text('请选择'));$.each(response, function(index, item) {city.append($('<option></option>').val(item.Value).text(item.Text));});});});
如果您要渲染多个项目(假设您要求用户选择他们最近访问过的 10 个城市)，您可以缓存第一次调用的结果，以避免重复调用，因为他们的选择可能包含来自同一州的城市.
var cache = {};$('#StateID').change(function() {var selectedState = $(this).val();如果(缓存[selectedState]){//从缓存中渲染选项} 别的 {$.getJSON(url, { id: selectedState }, function(response) {//添加到缓存缓存[selectedState] = 响应；.....});}});
最后，为了回应您关于在没有 ajax 的情况下执行此操作的评论，您可以将所有城市传递给视图并将它们分配给一个 javascript 数组.如果你有几个国家，我只会推荐这个，每个国家都有几个城市.这是一个平衡轻微额外的初始加载时间与进行 ajax 调用的轻微延迟的问题.
在控制器中
model.CityList = db.Cities.Select(d => new { City = d.CountryID, Text = d.CityName, Value = d.Id }).ToList();
在视图(脚本)中
//将所有城市分配给 javascript 数组var allCities= JSON.parse('@Html.Raw(Json.Encode(Model.CityList))');$('#StateID').change(function() {var selectedState = $(this).val();var city = $.grep(allCities, function(item, index) {返回 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屋！
