ASP.NET MVC实现区域或城市选择
作者:Darren Ji 发布时间:2023-07-13 17:50:00
标签: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="external nofollow" rel="stylesheet" />
<link href="~/bootstrap/css/bootstrap.min.css" rel="external nofollow" 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="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" >ABCD</a></li>
<li><a href="#tabs-2" rel="external nofollow" >EFGH</a></li>
<li><a href="#tabs-3" rel="external nofollow" >IJKL</a></li>
<li><a href="#tabs-4" rel="external nofollow" >MNOP</a></li>
<li><a href="#tabs-5" rel="external nofollow" >QRST</a></li>
<li><a href="#tabs-6" rel="external nofollow" >UVWX</a></li>
<li><a href="#tabs-7" rel="external nofollow" > 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="#" rel="external nofollow" rel="external nofollow" >${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 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);
}
}
}
最后呈现的效果:
有关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"}
};
}
}
}
来源:https://www.cnblogs.com/darrenji/p/4166771.html
0
投稿
猜你喜欢
- 是什么能让一个设计看上去是协调的,有条理的,专业的?答案是”色彩”.不是所有的项目都要用那种浅的”公司蓝”(corporate blue)才
- CSS代码更清晰高效的一些经验是许多网页制作者与开发者都关心的问题。但是大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,合理的
- 这里的等价不是说function的toString相同,也不是说function的引用相同,而是说对于两个function A和B,如果它们
- 如何在ASP.NET中使用ADO.NET连接数据库?以连接Access数据库为例,步骤如下:一、我们来用有源ODBC DSN的方法和无源OL
- 用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS:DIV#divBox p span.red
- MySQL是一个非常流行的小型关 系型数据库管理系统,2008年1月16号被Sun公司收购。目前MySQL被广泛地应用在Internet上的
- 例如:JSON字符串:var str1 = '{ "name": "cxh", "
- Microsoft SQL Server 2000的会话上下文信息使应用程序得以设置二进制值,以便在同一会话或连接上运行的多个批处理、存储过
- 一、目的之前在博文SQL Server数据库最小宕机迁移方案中提到了使用了完全备份+差异备份的功能完成了数据库的转移,但是这个方法在遇到了7
- 一个网站能切换不同的CSS风格大家应该都了解,像众所周知的腾讯在今年改版时也增加了切换皮肤的功能。根据时间自动调整站点风格是不错的想法,这种
- 嵌套SELECT语句也叫子查询,形如:SELECT name FROM bbc WHERE region = (SELECT region
- 看下面的Java代码,目的是为了当i是3的时候,就不做输出,直接跳到下一个循环。int i = 0; 
- 我不知道有多少人在使用浏览器的书签,这东东有时候实在是很有用的,比如现在说到的jQuerify书签。jQuerify书签的功能很简单,那就是
- 这个问题对于规模稍微大些的项目而言,显得尤其重要了,数据库中如果有几百个存储过程, 难道还一个个找不成,即使自己很了解业务和系统,时间长了,
- Logminer是每个Dba都应熟悉的工具,当一天由于用户的误操作你需要做不完全的恢复时,由于你无法确定这个操作是哪个时间做的,所以这对你的
- 内容摘要: 模拟网页下拉菜单中有几个比较关键的CSS属性:position、left、top、
- 统计分析常常会出错、存在偏见或过于狭隘。数字崇拜者常因专注于统计分析而把可用性研究引入歧途。强调洞察力和定性研究更为重要。用户研究有两种类型
- YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习:Yahoo!网站性能最佳体验的34条黄金守则—内容 1、布局的思想:使用
- 由于内容过多,大家可以通过ctrl+F搜索即可IE浏览器id 后缀名 php识别出的文件类型0 gif image/gif1 jpg ima
- 如图,今天跑代码的事后遇到的问题,pycharm导入我自己写的各种函数.py文件时有红色标注,显示“no moudle balabala…”