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"}
};
}
}
}
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。如果你想了解更多相关内容请查看下面相关链接
相关推荐
-
asp.net DropDownList实现二级联动效果
最近在做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件.代码如下: <tr> <td>新闻风格:</td> <td><asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True&q
-
jQuery+Asp.Net实现省市二级联动功能的方法
本文实例讲述了jQuery+Asp.Net实现省市二级联动功能的方法.分享给大家供大家参考,具体如下: 页面html: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ddlAjax.aspx.cs" Inherits="ThreeAjaxDrop_ddlAjax" %> <!DOCTYPE html PUBLIC "-//W3C//D
-
asp.net DropDownList 三级联动下拉菜单实现代码
复制代码 代码如下: if (!IsPostBack) { //一级分类列表 this.DropDownList1.DataSource = dsbb.SelectSubjct1(); this.DropDownList1.DataTextField = "cName"; this.DropDownList1.DataValueField = "Ccode"; this.DropDownList1.DataBind(); this.DropDownList1.Ite
-
asp.net下使用AjaxPro实现二级联动代码
复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1
-
ASP.NET MVC下拉框联动实例解析
两个DropDownList的联动,选择其中一个DropDownList,然后加载数据到另外的一个DropDownList上 这里,我打算实现的需求是:有两个DropDownList,一个默认加载所有的省份数据,然后,当我选择省份的时候,把对应的市的数据,绑定到另外一个DropDownList上面,即实现了联动. 好了,这里不打算使用EF了,换用ADO.NET.首先新建好数据库,表: USE master GO IF EXISTS (SELECT * FROM sysdata
-
asp.net两级联动（包含添加和修改）
<script language="javascript" type="text/javascript"> //科目数据初始化 var subcat = new Array(); subcat[0] = new Array('0', '请选择科目', '0'); subcat[1] = new Array('x1', '语文', 'x1yw'); subcat[2] = new Array('x2', '语文', 'x2yw'); subcat[3] =
-
asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi
-
ASP.NET MVC项目实现三级联动无刷新
本篇实现有关客户.订单和产品的无刷新三级联动,先看最终效果: 没有选择时,后2个Select状态为禁用: 当选择第1个Select,第2个Select可供选择,第3个Select依旧禁用: 当选择第2个Select,第3个Select可供选择: 当选择第3个Select,界面出现"显示产品信息"按钮: 当点击"显示产品信息"按钮,显示产品信息: 当点击"清空"按钮,恢复到初始状态: View Models Model之间的关系为: using S
-
ASP.NET MVC实现区域或城市选择
每次在"万达影城"网上购票总会用到左上角选择城市的功能.如下: 今天就在ASP.NET MVC中实现一下.我想最好的方式应该是写一个插件,但自己在这方面的功力尚欠缺,如果大家在这方面有好的解决方案,希望在这一起交流,那将会更好. 大致思路如下: 点击"更换"弹出div,用bootstrap来实现 div中的tabs,用jqueryui来实现 tab项中的城市,用jquery.tmpl.min.js模版来实现 有关城市的Model: public class City
-
ASP.NET MVC实现区域路由
目录 一.区域路由 二.示例程序 1.新建区域路由 2.注册区域路由 2.1.区域路由文件 2.2.全局注册区域路由 一.区域路由 为了管理网站中大量的文件,在ASP.NET MVC 2.0版本中引入了一个新概念:区域(Area). 有了区域以后,可以让我们的项目不至于太复杂而导致管理混乱.每个模块的页面都放入相应的区域内进行管理很方便.看下面的截图: 上图中有两个模块:一个是User模块,另一个是Product模块,所有关于这两个模块的Controller.Model.View都放入各自的模块
-
ASP.NET MVC使用区域(Area)功能
区域(Area)是一个 ASP.NET MVC 功能,用于将相关功能组织为一个单独的命名空间(用于路由)和文件结构(用于视图).使用区域通过向控制器和操作添加 一个路由参数(area)来创建用于路由目的的层次结构. 区域提供了一种将大型ASP.NET Core MVC Web 应用程序分割成更小功能分组的方法.一个区域实际上是应用程序内的 MVC 结构.对于大型应用程序,将应用程序分成单独的该机功能区域是有利的.例如,具有多个业务单位的电子商务应用的结账,计费,搜索等. 在 ASP.NET Co
-
Asp.net MVC利用knockoutjs实现登陆并记录用户的内外网IP及所在城市(推荐)
前言 前面第一篇开了头个,现在想先从登陆写起,但感觉还有很多东西应该放在前面写,比如 1.MVC及Web API的Route配置,Web API的Route配置如何支持命名空间 2.如何配置Filters(实现安全验证.错误处理等等) 3.自定义Filters.HttpRouteConstraint.ModelBinder及HttpParameterBinding等 这些问题在我开发过程中都有碰到,但感觉每一点都要说太多了.如果有需要到时候再回过头来写. 需求 还是老样子,我们先要明白要登陆实现
-
ASP.NET MVC重写RazorViewEngine实现多主题切换
在ASP.NET MVC中来实现主题的切换一般有两种方式,一种是通过切换皮肤的css和js引用,一种就是通过重写视图引擎.通过重写视图引擎的方式更加灵活,因为我不仅可以在不同主题下面布局和样式不一样,还可以让不同的主题下面显示的数据条目不一致,就是说可以在某些主题下面添加一下个性化的东西. 本篇我将通过重写视图引擎的方式来进行演示,在这之前,我假设你已经具备了MVC的一些基础,我们先来看下效果: 系统登录后是默认主题,当我们点击切换主题之后,左侧菜单栏的布局变了,右侧内容的样式也变了,而地址栏是
-
ASP.NET MVC的Localization本地化多语言支持
一.ASP.NET MVC的本地化支持 ASP.NET MVC的是基于ASP.NET运行,所以由ASP.NET提供的所有功能,都可以在MVC里使用,例如缓存,会话状态和本地化. 在传统的ASP.NET Web窗体时代我们使用资源文件存储不同语言中的内容和使用由Visual Studio自动生成的ResourceManager类来检索它们.在ASP.NET MVC他们一样有效的. 让我创建一个标准的ASP.NET MVC的一个示例应用程序.该网站是中文的,我们可以看到所有的内容都是在视图和控制器类
-
asp.net mvc webapi 实用的接口加密方法示例
在很多项目中,因为webapi是对外开放的,这个时候,我们就要得考虑接口交换数据的安全性. 安全机制也比较多,如andriod与webapi 交换数据的时候,可以走双向证书方法,但是开发成本比较大, 今天我们不打算介绍这方面的知识,我们说说一个较简单也较常见的安全交换机制 在这里要提醒读者,目前所有的加密机制都不是绝对的安全! 我们的目标是,任何用户或者软件获取到我们的webapi接口url后用来再次访问该地址都是无效的! 达到这种目标的话,我们必须要在url中增加一个时间戳,但是仅仅如此还是不
-
asp.net mvc CodeFirst模式数据库迁移步骤详解
利用Code First模式构建好基本的类后,项目也开始搭建完毕并成功运行,而且已经将数据库表结构自动生成了. 但是,我有新的类要加入,有字段需要修改,那怎么办呢,删库,跑路 ? 哈哈 利用数据库迁移,将原有结构不改动,将新建类进行单独建表操作,或者是已有数据库表,改变字段,那就修改表. 迁移步骤: 1.打开程序包管理器控制台:工具->NuGet包管理器->程序包管理器控制台.(当然还有其它方式也可以打开,我比较喜欢这种) 点击后将弹出程序包管理器控制台 极其要注意的是默认项目!!! 2.启动
-
ASP.NET MVC 使用Bootstrap的方法
作为一名Web开发者而言,如果不借助任何前端框架,从零开始使用HTML和CSS来构建友好的页面是非常困难的.特别是对于Windows Form的开发者而言,更是难上加难. 正是由于这样的原因,Bootstrap诞生了.Twitter Bootstrap为开发者提供了丰富的CSS样式.组件.插件.响应式布局等.同时微软已经完全集成在ASP.NET MVC 模板中. Bootstrap结构介绍 你可以通过http://getbootstrap.com.来下载最新版本的Bootstrap. 解压文件夹
-
Asp.net MVC中Razor常见的问题与解决方法总结
前言 最近在学习Asp.net MVC Razor,在使用中遇到了不少的问题,所以想着总结下来,没有经验的童鞋就是这样磕磕碰碰出来的经验.话不多说,来一起看看详细的介绍: 一.Datatype的错误提示消息无法自定义 这也许是Asp.net MVC的一个Bug.ViewModel中定义了DataType为Date字段: [Required(ErrorMessage = "Birthday must be input!")] [DataType(DataType.Date, ErrorM