ASP.NET MVC实现区域或城市选择_实用技巧_

 public class City { public int Id { get; set; } public string Name { get; set; } public string FirstLetter { get; set; } }

 @Styles.Render("~/Content/css")  @RenderSection("styles", required: false) @Scripts.Render("~/bundles/jquery")  @RenderBody() @RenderSection("scripts", required: false) 

@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section styles {  }  @section scripts {  }

using System.Linq; using System.Web.Mvc; namespace MvcApplication1.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } //获取首字母是ABCD的城市 public ActionResult GetCitiesByABCD() { var cities = Database.GetCities() .Where( c => c.FirstLetter == "A" || c.FirstLetter == "B" || c.FirstLetter == "C" || c.FirstLetter == "D"); var result = from c in cities select new {city = c.Name}; return Json(result, JsonRequestBehavior.AllowGet); } //获取首字母是EFGH的城市 public ActionResult GetCitiesByEFGH() { var cities = Database.GetCities() .Where( c => c.FirstLetter == "E" || c.FirstLetter == "F" || c.FirstLetter == "G" || c.FirstLetter == "H"); var result = from c in cities select new { city = c.Name }; return Json(result, JsonRequestBehavior.AllowGet); } //获取首字母是IJKL的城市 public ActionResult GetCitiesByIJKL() { var cities = Database.GetCities() .Where( c => c.FirstLetter == "I" || c.FirstLetter == "J" || c.FirstLetter == "K" || c.FirstLetter == "L"); var result = from c in cities select new { city = c.Name }; return Json(result, JsonRequestBehavior.AllowGet); } //获取首字母是MNOP的城市 public ActionResult GetCitiesByMNOP() { var cities = Database.GetCities() .Where( c => c.FirstLetter == "M" || c.FirstLetter == "N" || c.FirstLetter == "O" || c.FirstLetter == "P"); var result = from c in cities select new { city = c.Name }; return Json(result, JsonRequestBehavior.AllowGet); } //获取首字母是QRST的城市 public ActionResult GetCitiesByQRST() { var cities = Database.GetCities() .Where( c => c.FirstLetter == "Q" || c.FirstLetter == "R" || c.FirstLetter == "S" || c.FirstLetter == "T"); var result = from c in cities select new { city = c.Name }; return Json(result, JsonRequestBehavior.AllowGet); } //获取首字母是UVWX的城市 public ActionResult GetCitiesByUVWX() { var cities = Database.GetCities() .Where( c => c.FirstLetter == "U" || c.FirstLetter == "V" || c.FirstLetter == "W" || c.FirstLetter == "X"); var result = from c in cities select new { city = c.Name }; return Json(result, JsonRequestBehavior.AllowGet); } //获取首字母是YZ的城市 public ActionResult GetCitiesByYZ() { var cities = Database.GetCities() .Where( c => c.FirstLetter == "Y" || c.FirstLetter == "Z"); var result = from c in cities select new { city = c.Name }; return Json(result, JsonRequestBehavior.AllowGet); } } }

.dropdown-large { position: static !important; } .dropdown-menu-large { margin-left: 16px; margin-right: 16px; padding: 20px 0px; } .dropdown-menu-large > li > ul { padding: 0; margin: 0; } .dropdown-menu-large > li > ul > li { list-style: none; } .dropdown-menu-large > li > ul > li > a { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333333; white-space: normal; } .dropdown-menu-large > li ul > li > a:hover, .dropdown-menu-large > li ul > li > a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } .dropdown-menu-large .disabled > a, .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus { color: #999999; } .dropdown-menu-large .disabled > a:hover, .dropdown-menu-large .disabled > a:focus { text-decoration: none; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); cursor: not-allowed; } .dropdown-menu-large .dropdown-header { color: #428bca; font-size: 18px; } @media (max-width: 768px) { .dropdown-menu-large { margin-left: 0 ; margin-right: 0 ; } .dropdown-menu-large > li { margin-bottom: 30px; } .dropdown-menu-large > li:last-child { margin-bottom: 0; } .dropdown-menu-large .dropdown-header { padding: 3px 15px !important; } } #cities { width: 620px; padding: 10px; } #cities ul { width: 600px; } #cities div { width: 600px; } #cities li{ text-align: center; width: 80px; height: 30px; padding: 5px; } .rc { margin-right: 20px; }

using System.Collections.Generic; using MvcApplication1.Models; namespace MvcApplication1 { public class Database { public static IEnumerable GetCities() { return new List() { new City(){Id = 1, Name = "包头", FirstLetter = "B"}, new City(){Id = 2, Name = "北京", FirstLetter = "B"}, new City(){Id = 3, Name = "长春", FirstLetter = "C"}, new City(){Id = 4, Name = "大同", FirstLetter = "D"}, new City(){Id = 5, Name = "福州", FirstLetter = "F"}, new City(){Id = 6, Name = "广州", FirstLetter = "G"}, new City(){Id = 7, Name = "哈尔滨", FirstLetter = "H"}, new City(){Id = 8, Name = "济南", FirstLetter = "J"}, new City(){Id = 9, Name = "昆明", FirstLetter = "K"}, new City(){Id = 10, Name = "洛阳", FirstLetter = "L"}, new City(){Id = 11, Name = "马鞍山", FirstLetter = "M"}, new City(){Id = 12, Name = "南京", FirstLetter = "N"}, new City(){Id = 13, Name = "青岛", FirstLetter = "Q"}, new City(){Id = 14, Name = "深圳", FirstLetter = "S"}, new City(){Id = 15, Name = "天津", FirstLetter = "T"}, new City(){Id = 16, Name = "威海", FirstLetter = "W"}, new City(){Id = 17, Name = "西安", FirstLetter = "X"}, new City(){Id = 18, Name = "烟台", FirstLetter = "Y"}, new City(){Id = 19, Name = "郑江", FirstLetter = "Z"} }; } } }