ASP.NET城市选择功能怎么实现

html-css0151

ASP.NET城市选择功能怎么实现,第1张

大致思路如下：

○ 点击"更换"弹出div，用bootstrap来实现

○ div中的tabs，用jqueryui来实现

○ tab项中的城市，用jquery.tmpl.min.js模版来实现

有关城市的Model：

public class City

{

public int Id { getset}

public string Name { getset}

public string FirstLetter { getset}

}

在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>

put id="demo1" type="text" readonly="" name="input_area" placeholder="城市选择特效"/>

将样式文件引入到页面中：

<link rel="stylesheet" href="css/common/lArea.css">

同时引入js文件到页面中：

<script src="lArea.js"></script>

初始化插件：

var area = new lArea()

area.init({

'trigger': '#demo1',//控件I