在ASP.NET MVC中实现区域或城市选择
2023-09-11 14:16:51 时间
每次在"万达影城"网上购票总会用到左上角选择城市的功能。如下:
今天就在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 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文件:
展开
有关Database类:
展开
相关文章
- ASP.NET Core MVC/WebAPi如何构建路由?
- ASP.NET MVC之表单集合数据自动绑定到对象属性(集合)中
- ASP.NET MVC之Session State性能问题(七)
- 记一次ASP.NET MVC性能优化(实际项目中)
- ASP.Net MVC – What are the uses of Display, DisplayName, DisplayFormat and ScaffoldColumn attributes
- 学习ASP.NET MVC(七)——我的第一个ASP.NET MVC 查询页面
- Uses for MachineKey in ASP.NET
- .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了 [WPF]为旧版本的应用添加触控支持 js css等静态文件版本控制,一处配置多处更新.net版【原创】 C#图片处理,缩略图制作 SqlDataReader 结果集 转成 DataTable DataTable转成List集合 如何使用linq读取DataTable集合?
- asp.net跳出iframe结构转向登录
- Asp.Net读取服务器EXE文件的方法!(超简单实例)
- ASP.NET MVC与Sql Server建立连接
- 在ASP.NET MVC中通过勾选checkbox来更改select的内容
- .net和java和谐相处之安卓客户端+.net asp.net mvc webapi 2
- 在ASP.NET Core Web API中为RESTful服务增加对HAL的支持
- 《精通 ASP.NET MVC 4》----第 2 章 第一个MVC应用程序 2.1 准备工作站
- 《精通 ASP.NET MVC 3 框架(第三版)》----1.4 谁该使用ASP.NET MVC
- 《精通 ASP.NET MVC 4》----2.2 创建ASP.NET MVC新项目
- asp.net mvc razor语法 mvc中前台js中获取ViewData的值
- .Net动态加载插件-反射
- npoi导出excel_asp.net MVC
- ASP.NET MVC基础
- ASP.NET Aries 开源开发框架:开发指南(一)
- ASP.NET HttpRuntime.Cache缓存类使用总结