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

今天就在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">&nbsp;&nbsp;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文件:

展开.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中实现区域或城市选择的更多相关文章

  1. 在ASP.NET MVC中使用区域来方便管理controller和view

    在ASP.NET MVC中使用区域来方便管理controller和view 在mvc架构中,一般在controllers和views中写所有控制器和视图, 太多控制器时候,为了方便管理,想要将关于pe ...

  2. 关于 ASP.NET MVC 中的视图生成

    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...

  3. asp.net mvc 中 一种简单的 URL 重写

    asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...

  4. 在ASP.NET MVC中使用Area

    前言: 这段时间小猪花了不少功夫在研究ASP.NET MVC的源码上面,可谓思想是了解了不少,用的上用不上却是另外一回事了.! 应用场景: ASP.NET MVC中,是依靠某些文件夹以及类的固定命名规 ...

  5. 关于ASP.NET MVC中的视图生成

    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据.   从控制器到视图 ...

  6. ASP.NET MVC中Area的另一种用法

    ASP.NET MVC中Area的另一种用法 [摘要]本文只是为一行代码而分享 context.MapRoute("API", "api/{controller}/{ac ...

  7. ASP.NET MVC 中的视图生成

    关于 ASP.NET MVC 中的视图生成 在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Mode ...

  8. Asp.net mvc 中View 的呈现(二)

    [toc] 上一节介绍了 Asp.net mvc 中除 ViewResult 外的所有的 ActionResult,这一节介绍 ViewResult. ViewResultBase ViewResul ...

  9. ASP.NET MVC 中 View 的设计

    1. 前言  感觉有好长时间没有接触View 了,周末闲来无事,翻翻书桌上的书来回顾回顾ASP.NET MVC中View的相关内容. 2. View概述  View 通过应用程序在Action 中返回 ...

随机推荐

  1. arm GIC介绍之四【转】

    转自:https://blog.csdn.net/sunsissy/article/details/73882718 GIC是ARM体系中重要的组件,在认识到GIC的组成和功能之后,了解到IRQ的大致 ...

  2. 转载:Linux批量远程管理主机命令_pssh用法详解

    原文:http://www.linuxidc.com/Linux/2011-12/49635p2.htm (一) 使用前提 中心主机连接远程主机可以通过ssh密钥无密码连接 (二) 命令格式 pssh ...

  3. java虚拟机规范(se8)——java虚拟机结构(三)

    2.6. 栈帧 栈帧用于存储数据和部分结果,同样也用于执行动态链接,返回方法的值和分派异常. 当方法被调用的时候会创建一个新的栈帧.当一个方法调用结束时,它对应的栈帧就被销毁了,不管是正常调用结束还是 ...

  4. Scala工具库

    1. Scala json解析库:https://github.com/json4s/json4s

  5. java8新特性详解(转)

    原文链接. 前言: Java 8 已经发布很久了,很多报道表明Java 8 是一次重大的版本升级.在Java Code Geeks上已经有很多介绍Java 8新特性的文章,例如Playing with ...

  6. 嵌入式telnet的安装

    一 在已经安装telnet上,执行查询命令将查到的命令拷贝的未安装telnet的134上. [NTP-Fedora20 system]#whereis xinetd xinetd: /usr/sbin ...

  7. 【AtCoder】CADDi 2018

    C - Product and GCD 题解 直接分解质因数,然后gcd每次多一个质因数均摊到每个\(N\)上的个数 代码 #include <bits/stdc++.h> #define ...

  8. 【LOJ】 #6012. 「网络流 24 题」分配问题

    题解 又写了一遍KM算法,这题刚好是把最大最小KM拼在一起写的,感觉比较有记录价值 感觉KM始终不熟啊QAQ 算法流程大抵如下,原理就是每次我们通过减少最少的匹配量达成最大匹配,所以获得的一定是最大价 ...

  9. Gitlab-通过API管理问题

    1. 首先获取想要创建问题的project_id字段. 2. 现在获取到了project_id字段, 现在可以通过API创建新的问题,该终端节点请求几个字段,project_id字段和问题的标题. 3 ...

  10. Mysql安装(msi版的安装)

    上次使用绿色版的MySQL,现在使用一次安装版的,具体的步骤都是按照别人的,这里就贴一个链接,如果有时间,以后再补充上来截图. 主要参考的是下面的链接: http://www.cnblogs.com/ ...