欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ASP.NET?MVC實現(xiàn)區(qū)域或城市選擇

 更新時間：2022年08月31日 08:33:59   作者：Darren?Ji  
這篇文章介紹了ASP.NET?MVC實現(xiàn)區(qū)域或城市選擇的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

每次在"萬達(dá)影城"網(wǎng)上購票總會用到左上角選擇城市的功能。如下：

今天就在ASP.NET MVC中實現(xiàn)一下。我想最好的方式應(yīng)該是寫一個插件，但自己在這方面的功力尚欠缺，如果大家在這方面有好的解決方案，希望在這一起交流，那將會更好。

大致思路如下：

  • 點(diǎn)擊"更換"彈出div，用bootstrap來實現(xiàn)
  • div中的tabs，用jqueryui來實現(xiàn)
  • tab項中的城市，用jquery.tmpl.min.js模版來實現(xiàn)

有關(guān)城市的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相關(guān)的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" >&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"
            });
            //點(diǎn)擊城市顯示
            $('#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顯示導(dǎo)航菜單，點(diǎn)擊"更換"，彈出一個id為cities的div，其中包含jqueryui的tab。然后異步加載json數(shù)據(jù)到id為cityTemplate的模版上，最后追加到對應(yīng)的區(qū)域。

在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);
        }
    }
}

最后呈現(xiàn)的效果：

有關(guān)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;
}

有關(guān)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 = "濟(jì)南", 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"}
            };
        }
    }
}

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

相關(guān)文章

  • asp.net操作ini文件示例

    asp.net操作ini文件示例

    這篇文章主要介紹了asp.net 操作INI文件的讀寫，讀寫操作本地ini配置文件的方法,需要的朋友可以參考下
    2014-02-02
  • c# static 靜態(tài)數(shù)據(jù)成員

    c# static 靜態(tài)數(shù)據(jù)成員

    靜態(tài)成員屬于類所有，為各個類的實例所公用，無論類創(chuàng)建了幾多實例，類的靜態(tài)成員在內(nèi)存中只占同一塊區(qū)域。
    2009-06-06
  • Entity?Framework?Core實現(xiàn)Like查詢詳解

    Entity?Framework?Core實現(xiàn)Like查詢詳解

    本文詳細(xì)講解了Entity?Framework?Core實現(xiàn)Like查詢的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-02-02
  • .net core如何在網(wǎng)絡(luò)高并發(fā)下提高JSON的處理效率詳解

    .net core如何在網(wǎng)絡(luò)高并發(fā)下提高JSON的處理效率詳解

    這篇文章主要給大家介紹了關(guān)于.net core如何在網(wǎng)絡(luò)高并發(fā)下提高JSON的處理效率的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用.net core具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • .NET AppSettings與ConnectionStrings使用案例詳解

    .NET AppSettings與ConnectionStrings使用案例詳解

    這篇文章主要介紹了.NET AppSettings與ConnectionStrings使用案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-08-08
  • asp.net gridview自定義value值的代碼

    asp.net gridview自定義value值的代碼

    asp.net gridview自定義value值的代碼，需要的朋友可以參考下。
    2011-07-07
  • Aspnetpager對GridView分頁并順利導(dǎo)出Excel

    Aspnetpager對GridView分頁并順利導(dǎo)出Excel

    這篇文章主要介紹了Aspnetpager對GridView分頁并順利導(dǎo)出Excel的相關(guān)資料,需要的朋友可以參考下
    2016-04-04
  • .NET下模擬數(shù)組越界的方法詳解

    .NET下模擬數(shù)組越界的方法詳解

    這篇文章主要給大家介紹了關(guān)于.NET下模擬數(shù)組越界的相關(guān)資料，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-01-01
  • ynamic LINQ創(chuàng)建高級查詢服務(wù)

    ynamic LINQ創(chuàng)建高級查詢服務(wù)

    這篇文章主要介紹了ynamic LINQ創(chuàng)建高級查詢服務(wù)，如何使用Dynamic LINQ輕松實現(xiàn)更強(qiáng)大的高級查詢服務(wù)，下面文章內(nèi)容具有一的的參考價值，需要的小伙伴可以參考一下
    2022-03-03
  • asp.net(C#)函數(shù)對象參數(shù)傳遞的問題

    asp.net(C#)函數(shù)對象參數(shù)傳遞的問題

    我們知道在.net里class是引用類型，在函數(shù)參數(shù)表中的對象傳遞的都是對象的引用，所以在函數(shù)體內(nèi)對其對象參數(shù)的修改會影響函數(shù)外對應(yīng)的對象本身，例如下面的程序.
    2009-12-12

最新評論