每次在"万达影城"网上购票总会用到左上角选择城市的功能。如下：

今天就在ASP.NET MVC中实现一下。我想最好的方式应该是写一个插件，但自己在这方面的功力尚欠缺，如果大家在这方面有好的解决方案，希望在这一起交流，那将会更好。

大致思路如下：
○ 点击"更换"弹出div，用bootstrap来实现
○ div中的tabs，用jqueryui来实现
○ tab项中的城市，用jquery.tmpl.min.js模版来实现

有关城市的Model：

  1.     public class City
  2.  
  3.     {
  4.  
  5.         public int Id { get; set; }
  6.  
  7.         public string Name { get; set; }
  8.  
  9.         public string FirstLetter { get; set; }
  10.  
  11.     }

在Shared文件夹下的_Layout.cshtml中，引用jquery, jqueryui, bootstrap相关的css和js文件。

  1. <head>
  2.  
  3.     <meta charset="utf-8" />
  4.  
  5.     <meta name="viewport" content="width=device-width" />
  6.  
  7.     <title>@ViewBag.Title</title>
  8.  
  9.     @Styles.Render("~/Content/css")
  10.  
  11.     <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
  12.  
  13.     <link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  14.  
  15.     @RenderSection("styles", required: false)
  16.  
  17.     @Scripts.Render("~/bundles/jquery")
  18.  
  19.     <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
  20.  
  21.     <script src="~/bootstrap/js/bootstrap.min.js"></script>
  22.  
  23. </head>
  24.  
  25. <body>
  26.  
  27.     @RenderBody()
  28.  
  31.     @RenderSection("scripts", required: false)
  32.  
  33. </body>
  34.  


在Home/Index.cshtml视图中：


  1. @{
  2.  
  3.     ViewBag.Title = "Index";
  4.  
  5.     Layout = "~/Views/Shared/_Layout.cshtml";
  6.  
  7. }
  8.  
  10. @section styles
  11.  
  12. {
  13.  
  14.     <link href="~/Content/CitySelect.css" rel="stylesheet" />
  15.  
  16. }
  17.  
  19. <nav class="navbar navbar-default navbar-static">
  20.  
  21.     <div class="navbar-header">
  22.  
  23.         <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
  24.  
  25.             <span class="sr-only">Toggle navigation</span>
  26.  
  27.             <span class="icon-bar"></span>
  28.  
  29.             <span class="icon-bar"></span>
  30.  
  31.             <span class="icon-bar"></span>
  32.  
  33.         </button>
  34.  
  35.     </div>
  36.  
  39.     <div class="collapse navbar-collapse js-navbar-collapse">
  40.  
  41.         <ul class="nav navbar-nav">
  42.  
  43.             <li class="dropdown dropdown-large">
  44.  
  45.                 <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="dp">全国</span><span>[更换]</span> <b class="caret"></b></a>
  46.  
  48.                 <div class="dropdown-menu dropdown-menu-large row" id="cities">
  49.  
  50.                     <ul>
  51.  
  52.                         <li><a href="#tabs-1">ABCD</a></li>
  53.  
  54.                         <li><a href="#tabs-2">EFGH</a></li>
  55.  
  56.                         <li><a href="#tabs-3">IJKL</a></li>
  57.  
  58.                         <li><a href="#tabs-4">MNOP</a></li>
  59.  
  60.                         <li><a href="#tabs-5">QRST</a></li>
  61.  
  62.                         <li><a href="#tabs-6">UVWX</a></li>
  63.  
  64.                         <li><a href="#tabs-7">&nbsp;&nbsp;YZ</a></li>
  65.  
  66.                     </ul>
  67.  
  68.                     <div id="tabs-1">
  69.  
  70.                         <p></p>
  71.  
  72.                     </div>
  73.  
  74.                     <div id="tabs-2">
  75.  
  76.                         <p></p>
  77.  
  78.                     </div>
  79.  
  80.                     <div id="tabs-3">
  81.  
  82.                         <p></p>
  83.  
  84.                     </div>
  85.  
  86.                     <div id="tabs-4">
  87.  
  88.                         <p></p>
  89.  
  90.                     </div>
  91.  
  92.                     <div id="tabs-5">
  93.  
  94.                         <p></p>
  95.  
  96.                     </div>
  97.  
  98.                     <div id="tabs-6">
  99.  
  100.                         <p></p>
  101.  
  102.                     </div>
  103.  
  104.                     <div id="tabs-7">
  105.  
  106.                         <p></p>
  107.  
  108.                     </div>
  109.  
  110.                 </div>
  111.  
  114.             </li>
  115.  
  116.         </ul>
  117.  
  119.     </div>
  120.  
  121.     <!-- /.nav-collapse -->
  122.  
  123. </nav>
  124.  
  126. @section scripts
  127.  
  128. {
  129.  
  130.     <script src="~/Scripts/jquery.tmpl.min.js"></script>
  131.  
  132.     <script type="text/javascript">
  133.  
  134.         $(function () {
  135.  
  137.             //tabs
  138.  
  139.             $('#cities').tabs({
  140.  
  141.                 event: "mouseover"
  142.  
  143.             });
  144.  
  146.             //点击城市显示
  147.  
  148.             $('#cities').on("click", ".rc", function() {
  149.  
  150.                 $('#dp').empty().text($(this).text());
  151.  
  152.             });
  153.  
  155.             //加载ABCD开头的城市
  156.  
  157.             $.getJSON('@Url.Action("GetCitiesByABCD","Home")', function(data) {
  158.  
  159.                 if (data) {
  160.  
  161.                     $('#cityTemplate').tmpl(data).appendTo('#tabs-1 p');
  162.  
  163.                 }
  164.  
  165.             });
  166.  
  168.             //加载EFGH开头的城市
  169.  
  170.             $.getJSON('@Url.Action("GetCitiesByEFGH","Home")', function (data) {
  171.  
  172.                 if (data) {
  173.  
  174.                     $('#cityTemplate').tmpl(data).appendTo('#tabs-2 p');
  175.  
  176.                 }
  177.  
  178.             });
  179.  
  181.             //加载IJKL开头的城市
  182.  
  183.             $.getJSON('@Url.Action("GetCitiesByIJKL","Home")', function (data) {
  184.  
  185.                 if (data) {
  186.  
  187.                     $('#cityTemplate').tmpl(data).appendTo('#tabs-3 p');
  188.  
  189.                 }
  190.  
  191.             });
  192.  
  194.             //加载MNOP开头的城市
  195.  
  196.             $.getJSON('@Url.Action("GetCitiesByMNOP","Home")', function (data) {
  197.  
  198.                 if (data) {
  199.  
  200.                     $('#cityTemplate').tmpl(data).appendTo('#tabs-4 p');
  201.  
  202.                 }
  203.  
  204.             });
  205.  
  207.             //加载QRST开头的城市
  208.  
  209.             $.getJSON('@Url.Action("GetCitiesByQRST","Home")', function (data) {
  210.  
  211.                 if (data) {
  212.  
  213.                     $('#cityTemplate').tmpl(data).appendTo('#tabs-5 p');
  214.  
  215.                 }
  216.  
  217.             });
  218.  
  221.             //加载UVWX开头的城市
  222.  
  223.             $.getJSON('@Url.Action("GetCitiesByUVWX","Home")', function (data) {
  224.  
  225.                 if (data) {
  226.  
  227.                     $('#cityTemplate').tmpl(data).appendTo('#tabs-6 p');
  228.  
  229.                 }
  230.  
  231.             });
  232.  
  234.             //加载YZ开头的城市
  235.  
  236.             $.getJSON('@Url.Action("GetCitiesByYZ","Home")', function (data) {
  237.  
  238.                 if (data) {
  239.  
  240.                     $('#cityTemplate').tmpl(data).appendTo('#tabs-7 p');
  241.  
  242.                 }
  243.  
  244.             });
  245.  
  246.         });
  247.  
  248.     </script>
  249.  
  251.     <script id="cityTemplate" type="text/x-jQuery-tmpl">
  252.  
  253.         <a class="rc" href="#">${city}</a>
  254.  
  255.     </script>
  256.  
  257. }
  258.  


以上，


bootstrap显示导航菜单，点击"更换"，弹出一个id为cities的div，其中包含jqueryui的tab。然后异步加载json数据到id为cityTemplate的模版上，最后追加到对应的区域。


在HomeController中：


  1. using System.Linq;
  2.  
  3. using System.Web.Mvc;
  4.  
  7. namespace MvcApplication1.Controllers
  8.  
  9. {
  10.  
  11.     public class HomeController : Controller
  12.  
  13.     {
  14.  
  15.         //
  16.  
  17.         // GET: /Home/
  18.  
  20.         public ActionResult Index()
  21.  
  22.         {
  23.  
  24.             return View();
  25.  
  26.         }
  27.  
  29.         //获取首字母是ABCD的城市
  30.  
  31.         public ActionResult GetCitiesByABCD()
  32.  
  33.         {
  34.  
  35.             var cities =
  36.  
  37.                 Database.GetCities()
  38.  
  39.                     .Where(
  40.  
  41.                         c =>
  42.  
  43.                             c.FirstLetter == "A" || c.FirstLetter == "B" || c.FirstLetter == "C" || c.FirstLetter == "D");
  44.  
  45.             var result = from c in cities
  46.  
  47.                 select new {city = c.Name};
  48.  
  49.             return Json(result, JsonRequestBehavior.AllowGet);
  50.  
  51.         }
  52.  
  54.         //获取首字母是EFGH的城市
  55.  
  56.         public ActionResult GetCitiesByEFGH()
  57.  
  58.         {
  59.  
  60.             var cities =
  61.  
  62.                 Database.GetCities()
  63.  
  64.                     .Where(
  65.  
  66.                         c =>
  67.  
  68.                             c.FirstLetter == "E" || c.FirstLetter == "F" || c.FirstLetter == "G" || c.FirstLetter == "H");
  69.  
  70.             var result = from c in cities
  71.  
  72.                          select new { city = c.Name };
  73.  
  74.             return Json(result, JsonRequestBehavior.AllowGet);
  75.  
  76.         }
  77.  
  79.         //获取首字母是IJKL的城市
  80.  
  81.         public ActionResult GetCitiesByIJKL()
  82.  
  83.         {
  84.  
  85.             var cities =
  86.  
  87.                 Database.GetCities()
  88.  
  89.                     .Where(
  90.  
  91.                         c =>
  92.  
  93.                             c.FirstLetter == "I" || c.FirstLetter == "J" || c.FirstLetter == "K" || c.FirstLetter == "L");
  94.  
  95.             var result = from c in cities
  96.  
  97.                          select new { city = c.Name };
  98.  
  99.             return Json(result, JsonRequestBehavior.AllowGet);
  100.  
  101.         }
  102.  
  104.         //获取首字母是MNOP的城市
  105.  
  106.         public ActionResult GetCitiesByMNOP()
  107.  
  108.         {
  109.  
  110.             var cities =
  111.  
  112.                 Database.GetCities()
  113.  
  114.                     .Where(
  115.  
  116.                         c =>
  117.  
  118.                             c.FirstLetter == "M" || c.FirstLetter == "N" || c.FirstLetter == "O" || c.FirstLetter == "P");
  119.  
  120.             var result = from c in cities
  121.  
  122.                          select new { city = c.Name };
  123.  
  124.             return Json(result, JsonRequestBehavior.AllowGet);
  125.  
  126.         }
  127.  
  129.         //获取首字母是QRST的城市
  130.  
  131.         public ActionResult GetCitiesByQRST()
  132.  
  133.         {
  134.  
  135.             var cities =
  136.  
  137.                 Database.GetCities()
  138.  
  139.                     .Where(
  140.  
  141.                         c =>
  142.  
  143.                             c.FirstLetter == "Q" || c.FirstLetter == "R" || c.FirstLetter == "S" || c.FirstLetter == "T");
  144.  
  145.             var result = from c in cities
  146.  
  147.                          select new { city = c.Name };
  148.  
  149.             return Json(result, JsonRequestBehavior.AllowGet);
  150.  
  151.         }
  152.  
  154.         //获取首字母是UVWX的城市
  155.  
  156.         public ActionResult GetCitiesByUVWX()
  157.  
  158.         {
  159.  
  160.             var cities =
  161.  
  162.                 Database.GetCities()
  163.  
  164.                     .Where(
  165.  
  166.                         c =>
  167.  
  168.                             c.FirstLetter == "U" || c.FirstLetter == "V" || c.FirstLetter == "W" || c.FirstLetter == "X");
  169.  
  170.             var result = from c in cities
  171.  
  172.                          select new { city = c.Name };
  173.  
  174.             return Json(result, JsonRequestBehavior.AllowGet);
  175.  
  176.         }
  177.  
  179.         //获取首字母是YZ的城市
  180.  
  181.         public ActionResult GetCitiesByYZ()
  182.  
  183.         {
  184.  
  185.             var cities =
  186.  
  187.                 Database.GetCities()
  188.  
  189.                     .Where(
  190.  
  191.                         c =>
  192.  
  193.                             c.FirstLetter == "Y" || c.FirstLetter == "Z");
  194.  
  195.             var result = from c in cities
  196.  
  197.                          select new { city = c.Name };
  198.  
  199.             return Json(result, JsonRequestBehavior.AllowGet);
  200.  
  201.         }
  202.  
  203.     }
  204.  
  205. }
  206.  


最后呈现的效果：




有关CitySelect.css文件：


  1. 展开.dropdown-large {
  2.   position: static !important;
  3. }
  4. .dropdown-menu-large {
  5.   margin-left: 16px;
  6.   margin-right: 16px;
  7.   padding: 20px 0px;
  8. }
  9. .dropdown-menu-large > li > ul {
  10.   padding: 0;
  11.   margin: 0;
  12. }
  13. .dropdown-menu-large > li > ul > li {
  14.   list-style: none;
  15. }
  16. .dropdown-menu-large > li > ul > li > a {
  17.   display: block;
  18.   padding: 3px 20px;
  19.   clear: both;
  20.   font-weight: normal;
  21.   line-height: 1.428571429;
  22.   color: #333333;
  23.   white-space: normal;
  24. }
  25. .dropdown-menu-large > li ul > li > a:hover,
  26. .dropdown-menu-large > li ul > li > a:focus {
  27.   text-decoration: none;
  28.   color: #262626;
  29.   background-color: #f5f5f5;
  30. }
  31. .dropdown-menu-large .disabled > a,
  32. .dropdown-menu-large .disabled > a:hover,
  33. .dropdown-menu-large .disabled > a:focus {
  34.   color: #999999;
  35. }
  36. .dropdown-menu-large .disabled > a:hover,
  37. .dropdown-menu-large .disabled > a:focus {
  38.   text-decoration: none;
  39.   background-color: transparent;
  40.   background-image: none;
  41.   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  42.   cursor: not-allowed;
  43. }
  44. .dropdown-menu-large .dropdown-header {
  45.   color: #428bca;
  46.   font-size: 18px;
  47. }
  48. @media (max-width: 768px) {
  49.   .dropdown-menu-large {
  50.     margin-left: 0 ;
  51.     margin-right: 0 ;
  52.   }
  53.   .dropdown-menu-large > li {
  54.     margin-bottom: 30px;
  55.   }
  56.   .dropdown-menu-large > li:last-child {
  57.     margin-bottom: 0;
  58.   }
  59.   .dropdown-menu-large .dropdown-header {
  60.     padding: 3px 15px !important;
  61.   }
  62. }
  63.  
  64. #cities {
  65.     width: 620px;
  66.     padding: 10px;
  67. }
  68.  
  69. #cities ul {
  70.     width: 600px;
  71. }
  72.  
  73. #cities div {
  74.     width: 600px;
  75. }
  76.  
  77. #cities li{
  78.     text-align: center;
  79.     width: 80px;
  80.     height: 30px;
  81.     padding: 5px;
  82. }
  83.  
  84. .rc {
  85.     margin-right: 20px;
  86. }



有关Database类：


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


											
在ASP.NET MVC中实现区域或城市选择的更多相关文章
	

    
								
  1. 在ASP.NET MVC中使用区域来方便管理controller和view
		
    在ASP.NET MVC中使用区域来方便管理controller和view 在mvc架构中,一般在controllers和views中写所有控制器和视图, 太多控制器时候,为了方便管理,想要将关于pe ...
    
		
    2. 
						
  2. 关于 ASP.NET MVC 中的视图生成
		
    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...
    
		
    3. 
						
  3. asp.net mvc 中 一种简单的 URL 重写
		
    asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...
    
		
    4. 
						
  4. 在ASP.NET MVC中使用Area
		
    前言: 这段时间小猪花了不少功夫在研究ASP.NET MVC的源码上面,可谓思想是了解了不少,用的上用不上却是另外一回事了.! 应用场景: ASP.NET MVC中,是依靠某些文件夹以及类的固定命名规 ...
    
		
    5. 
						
  5. 关于ASP.NET MVC中的视图生成
		
    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据.   从控制器到视图 ...
    
		
    6. 
						
  6. ASP.NET MVC中Area的另一种用法
		
    ASP.NET MVC中Area的另一种用法 [摘要]本文只是为一行代码而分享 context.MapRoute("API", "api/{controller}/{ac ...
    
		
    7. 
						
  7. ASP.NET MVC 中的视图生成
		
    关于 ASP.NET MVC 中的视图生成 在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Mode ...
    
		
    8. 
						
  8. Asp.net mvc 中View 的呈现(二)
		
    [toc] 上一节介绍了 Asp.net mvc 中除 ViewResult 外的所有的 ActionResult,这一节介绍 ViewResult. ViewResultBase ViewResul ...
    
		
    9. 
						
  9. ASP.NET MVC 中 View 的设计
		
    1. 前言  感觉有好长时间没有接触View 了,周末闲来无事,翻翻书桌上的书来回顾回顾ASP.NET MVC中View的相关内容. 2. View概述  View 通过应用程序在Action 中返回 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. HttpClient使用之下载远程服务器中的文件(注意目录遍历漏洞)
			
    参考文献: http://bbs.csdn.net/topics/390952011 http://blog.csdn.net/ljj_9/article/details/53306468 1.下载地 ...
    
			
    2. 
						
  2. 小白学习安全测试（一）——Http协议基础
			
    Http协议基础 Web技术发展[http://www.cnblogs.com/ProgrammerGE/articles/1824657.html] 静态WEB[网页] 动态WEB 属于一种应用程序 ...
    
			
    3. 
						
  3. [原创]Python/Django使用富文本编辑器XHeditor上传本地图片
			
    前言 为了在Django框架下使用Xheditor上传图片,居然折腾了我一个晚上.期间也遇到种种问题,网上相关资料极少.现在把经验分享给大家. 正文 xheditor篇 1.下载http://xhed ...
    
			
    4. 
						
  4. jQuery下的onChange事件在某些情况下无效
			
    onChage无效的原因: 虽然表面上感觉是当内容发生变化时,就会触发onchange事件,但是那只能在页面上操作.而如果通过dom对象去修改它的value则什么事也不会发生. onchange触发原 ...
    
			
    5. 
						
  5. java 多重继承
			
    接口不仅仅只是一种更纯粹形式的抽象类,它的目标比这更高,因为接口是根本没有任何具体实现的--也就是说,没有任何与接口相关的存储,因此也就无法阻止多个接口的组合, 在导出类中,不强制要求必须有一个抽象的 ...
    
			
    6. 
						
  6. hdu 5007  水题 （2014西安网赛A题）
			
    题意:出现Apple.iPod.iPhone.iPad时输出MAI MAI MAI!,出现Sony,输出SONY DAFA IS GOOD! Sample InputApple bananaiPad  ...
    
			
    7. 
						
  7. CSS3&HTML5各浏览器支持情况一览表
			
    http://fmbip.com/ CSS3性质(CSS3 Properties) 平台 MAC WIN 浏览器 CHROME FIREFOX OPERA SAFARI CHROME FIREFOX  ...
    
			
    8. 
						
  8. 图学ES6-5.正则的扩展
			
    
			
    9. 
						
  9. fiddler抓https 关于证书一项
			
    由于我之前电脑装过fiddler然后这次弄证书也没有理解明白,导致失败了.然后就百度到了下面的教程. https://www.cnblogs.com/joshua317/p/8670923.html  ...
    
			
    10. 
						
  10. js跨越请求的2中实现  JSONP /后端接口设置运行跨越header
			
    由于浏览器同源策略,a域名的js向b域名ajax请求会被禁止.JS实现跨越访问接口有2中办法. 1.后端接口设置允许跨越的header头. //header('Access-Control-Allow ...
    
			
    11.