在ASP.NET MVC中实现区域或城市选择
每次在"万达影城"网上购票总会用到左上角选择城市的功能。如下：
今天就在ASP.NET MVC中实现一下。我想最好的方式应该是写一个插件，但自己在这方面的功力尚欠缺，如果大家在这方面有好的解决方案，希望在这一起交流，那将会更好。
大致思路如下：
○ 点击"更换"弹出div，用bootstrap来实现
○ div中的tabs，用jqueryui来实现
○ tab项中的城市，用jquery.tmpl.min.js模版来实现
有关城市的Model：
public class City{public int Id { get; set; }public string Name { get; set; }public string FirstLetter { get; set; }}
在Shared文件夹下的_Layout.cshtml中，引用jquery, jqueryui, bootstrap相关的css和js文件。
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>@ViewBag.Title</title>@Styles.Render("~/Content/css")<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" /><link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />@RenderSection("styles", required: false)@Scripts.Render("~/bundles/jquery")<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script><script src="~/bootstrap/js/bootstrap.min.js"></script></head><body>@RenderBody()@RenderSection("scripts", required: false)</body>
在Home/Index.cshtml视图中：
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}@section styles{<link href="~/Content/CitySelect.css" rel="stylesheet" />}<nav class="navbar navbar-default navbar-static"><div class="navbar-header"><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div><div class="collapse navbar-collapse js-navbar-collapse"><ul class="nav navbar-nav"><li class="dropdown dropdown-large"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="dp">全国</span><span>[更换]</span> <b class="caret"></b></a><div class="dropdown-menu dropdown-menu-large row" id="cities"><ul><li><a href="#tabs-1">ABCD</a></li><li><a href="#tabs-2">EFGH</a></li><li><a href="#tabs-3">IJKL</a></li><li><a href="#tabs-4">MNOP</a></li><li><a href="#tabs-5">QRST</a></li><li><a href="#tabs-6">UVWX</a></li><li><a href="#tabs-7"> YZ</a></li></ul><div id="tabs-1"><p></p></div><div id="tabs-2"><p></p></div><div id="tabs-3"><p></p></div><div id="tabs-4"><p></p></div><div id="tabs-5"><p></p></div><div id="tabs-6"><p></p></div><div id="tabs-7"><p></p></div></div></li></ul></div><!-- /.nav-collapse --></nav>@section scripts{<script src="~/Scripts/jquery.tmpl.min.js"></script><script type="text/javascript">$(function () {//tabs$('#cities').tabs({event: "mouseover"});//点击城市显示$('#cities').on("click", ".rc", function() {$('#dp').empty().text($(this).text());});//加载ABCD开头的城市$.getJSON('@Url.Action("GetCitiesByABCD","Home")', function(data) {if (data) {$('#cityTemplate').tmpl(data).appendTo('#tabs-1 p');}});//加载EFGH开头的城市$.getJSON('@Url.Action("GetCitiesByEFGH","Home")', function (data) {if (data) {$('#cityTemplate').tmpl(data).appendTo('#tabs-2 p');}});//加载IJKL开头的城市$.getJSON('@Url.Action("GetCitiesByIJKL","Home")', function (data) {if (data) {$('#cityTemplate').tmpl(data).appendTo('#tabs-3 p');}});//加载MNOP开头的城市$.getJSON('@Url.Action("GetCitiesByMNOP","Home")', function (data) {if (data) {$('#cityTemplate').tmpl(data).appendTo('#tabs-4 p');}});//加载QRST开头的城市$.getJSON('@Url.Action("GetCitiesByQRST","Home")', function (data) {if (data) {$('#cityTemplate').tmpl(data).appendTo('#tabs-5 p');}});//加载UVWX开头的城市$.getJSON('@Url.Action("GetCitiesByUVWX","Home")', function (data) {if (data) {$('#cityTemplate').tmpl(data).appendTo('#tabs-6 p');}});//加载YZ开头的城市$.getJSON('@Url.Action("GetCitiesByYZ","Home")', function (data) {if (data) {$('#cityTemplate').tmpl(data).appendTo('#tabs-7 p');}});});</script><script id="cityTemplate" type="text/x-jQuery-tmpl"><a class="rc" href="#">${city}</a></script>}
以上，
bootstrap显示导航菜单，点击"更换"，弹出一个id为cities的div，其中包含jqueryui的tab。然后异步加载json数据到id为cityTemplate的模版上，最后追加到对应的区域。
在HomeController中：
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 citiesselect 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 citiesselect 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 citiesselect 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 citiesselect 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 citiesselect 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 citiesselect 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 citiesselect new { city = c.Name };return Json(result, JsonRequestBehavior.AllowGet);}}}
最后呈现的效果：
有关CitySelect.css文件：
展开.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;
}
有关Database类：
展开using System.Collections.Generic;
using MvcApplication1.Models; namespace MvcApplication1
{
public class Database
{
public static IEnumerable<City> GetCities()
{
return new List<City>()
{
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"}
};
} }
}
在ASP.NET MVC中实现区域或城市选择的更多相关文章
- 在ASP.NET MVC中使用区域来方便管理controller和view
在ASP.NET MVC中使用区域来方便管理controller和view 在mvc架构中,一般在controllers和views中写所有控制器和视图, 太多控制器时候,为了方便管理,想要将关于pe ...
- 关于 ASP.NET MVC 中的视图生成
在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...
- asp.net mvc 中 一种简单的 URL 重写
asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...
- 在ASP.NET MVC中使用Area
前言: 这段时间小猪花了不少功夫在研究ASP.NET MVC的源码上面,可谓思想是了解了不少,用的上用不上却是另外一回事了.! 应用场景: ASP.NET MVC中,是依靠某些文件夹以及类的固定命名规 ...
- 关于ASP.NET MVC中的视图生成
在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 ...
- ASP.NET MVC中Area的另一种用法
ASP.NET MVC中Area的另一种用法 [摘要]本文只是为一行代码而分享 context.MapRoute("API", "api/{controller}/{ac ...
- ASP.NET MVC 中的视图生成
关于 ASP.NET MVC 中的视图生成 在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Mode ...
- Asp.net mvc 中View 的呈现(二)
[toc] 上一节介绍了 Asp.net mvc 中除 ViewResult 外的所有的 ActionResult,这一节介绍 ViewResult. ViewResultBase ViewResul ...
- ASP.NET MVC 中 View 的设计
1. 前言 感觉有好长时间没有接触View 了,周末闲来无事,翻翻书桌上的书来回顾回顾ASP.NET MVC中View的相关内容. 2. View概述 View 通过应用程序在Action 中返回 ...
随机推荐
- thymeleaf：访问静态方法
<p class="left tel" th:if="${#strings.startsWith(T(net.common.util.tool.common.Req ...
- Windows 安装 Go语言开发环境以及使用
下载安装包 下载地址:http://www.golangtc.com/download 32 位请选择名称中包含 windows-386 的 msi 安装包,64 位请选择名称中包含 windows- ...
- 【oracle】入门学习（一）
一直想学oracle但都没有下定决心.这次借了书,一定要学好oracle. 目前学习 <Oracle从入门到精通> 明日科技 的Oracle 11g 版本 关系型数据库的基本理论 数据模型 ...
- 浅谈SpringMVC
M--模型(实体vo[视图对象]与页面对面) V--视图(JSP,,velocity,FreeMarker,html,thymeleaf) C--控制器(servlet,if语句控制M数据跳转到V进行 ...
- Little-endian和Big-endian
谈到字节序的问题,必然牵涉到两大CPU派系.那就是Motorola的PowerPC系列CPU和Intel的x86系列CPU.PowerPC系列采用big endian方式存储数据,而x86系列则采用l ...
- hdu 1700 （圆的内接三角形 要周长最大）
以原点为圆心,给出圆上的一点,要求圆上的另外两点,使得这三个点的距离和最大,很容易想到这是一个等边三角形然后有这两个公式 点a为已知点a*b=|a|*|b|*cos(120); x*x+y*y=r*r ...
- #Plugin 中国省市选择插件
中国省市选择插件 ChineseCities 1.原生JS,不依赖jquery,zepto 2.前端学习交流群:814798690 源码查看 点击下载 https://github.com/chao ...
- [转] impress.js学习
引子 断断续续用了好几天,终于把 impress.js 源码看完,作为刚入门的前端菜鸟,这是我第一次看 js 源码,最初还是比较痛苦的.不过还好,impress.js源码的注释相当清楚,每个函数和事件 ...
- NET Core中使用Angular2的Token base身份认证
下载本文提到的完整代码示例请访问:How to authorization Angular 2 app with asp.net core web api 在ASP.NET Core中使用Angula ...
- Codeforces 336D Dima and Trap Graph 并查集
Dima and Trap Graph 枚举区间的左端点, 然后那些左端点比枚举的左端点小的都按右端点排序然后并查集去check #include<bits/stdc++.h> #defi ...