[英]Read and Show .Json file in an auto-complete search using ASP.NET MVC
我制作了一個包含國家城市名稱的json文件。我想使用MVC在View上以自動完成搜索的形式顯示這些城市名稱。我的Cityname.Json文件看起來像這樣-
Cityname[
{
"id": 1,
"City": "Flensburg"
},
{
"id": 2,
"City": "Kiel"
},
{
"id": 3,
"City": "Lübeck"
},
{
"id": 4,
"City": "Neumünster"
},
{
"id": 5,
"City": "Brunsbüttel"
}
]
我的城市對象模型類是-
public class City
{
public string id{get:set;}
public string City { get; set; }
}
在我的家庭控制器中的動作結果索引中，我對Json文件進行脫鹽處理以顯示在視圖上
public ActionResult Index()
{
using (StreamReader r = new StreamReader("file.json"))
{
string json = r.ReadToEnd();
List<CityName> items = JsonConvert.DeserializeObject<List<CityName>>(json);
}
return View();
}
現在，我在View類中創建了搜索框，我想在其中以自動完成的方式獲取所有城市名稱。 但我不是如何進行
<div class="search-form">
<form action="index.html" method="get">
<div class="input-group">
<input type="text" placeholder="Enter Location Name" name="search" id="CitySearch" class="form-control input-lg">
<div class="input-group-btn">
<script type="text/javascript" src="~/App_Data/Cityname.josn">
$(function () {
$("#CitySearch").autocomplete
});
</script>
<button class="btn btn-lg btn-primary" type="submit">
<a href="~/Home/Search">Search</a>
</button>
</div>
</div>
</form>
我的_Layout.cshtml文件看起來像這樣-
@using OpenStreetMapService.Helpers
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Call List Service | @ViewBag.Title</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- Add local styles, mostly for plugins css file -->
@if (IsSectionDefined("Styles"))
{@RenderSection("Styles", required: false)}
<!-- Add jQuery Style direct - used for jQGrid plugin -->
<link href="@Url.Content("~/Scripts/plugins/jquery-ui/jquery-ui.css")" rel="stylesheet" type="text/css" />
<!-- Primary Inspinia style -->
@Styles.Render("~/Content/css")
@Styles.Render("~/font-awesome/css")
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
</head>
<body>
<!-- Skin configuration box -->
@*@Html.Partial("_SkinConfig")*@
<!-- Wrapper-->
<!-- PageClass give you ability to specify custom style for specific view based on action -->
<div id="wrapper" class="@Html.PageClass()">
<!-- Navigation -->
@Html.Partial("_Navigation")
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg @ViewBag.SpecialClass">
<!-- Top Navbar -->
@Html.Partial("_TopNavbar")
<!-- Main view -->
@RenderBody()
<!-- Footer -->
@Html.Partial("_Footer")
</div>
<!-- End page wrapper-->
<!-- Right Sidebar -->
@Html.Partial("_RightSidebar")
</div>
<!-- End wrapper-->
<!-- Section for main scripts render -->
@Scripts.Render("~/bundles/jquery")
@*@Scripts.Render("~/plugins/jquery-ui/jquery-ui.min.js")*@
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/plugins/slimScroll")
@Scripts.Render("~/bundles/inspinia")
<!-- Skin config script - only for demo purpose-->
@Scripts.Render("~/bundles/skinConfig")
<!-- Handler for local scripts -->
@RenderSection("scripts", required: false)
</body>
</html>
如果您的JSON列表是靜態數據，則可以將列表存儲在javascript中（如果更簡單）。
$(function() { var Cityname = [{ "value": 1, "label": "Flensburg" }, { "value": 2, "label": "Kiel" }, { "value": 3, "label": "Lübeck" }, { "value": 4, "label": "Neumünster" }, { "value": 5, "label": "Brunsbüttel" }] $("#city").autocomplete({ source: Cityname }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <input id="city">
當然，更好的設計方法可能是首選，但基本上是：
將此腳本代碼放入HTML代碼的<head>標記內：
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$("#cities").autocomplete({
source: function(request, response) {
$.getJSON("citynames.json", request, function(data) {
var i, suggestions = [];
$.each(data.cities, function(i, val) {
if (val.name.toLowerCase().indexOf(request.term.toLowerCase()) > -1) {
suggestions.push({
label: val.name,
value: val.id
});
}
});
response(suggestions);
});
}
});
});
</script>
</head>
將此HTML代碼添加到您的View文件中：
<div class="ui-widget">
<label for="cities">Cities: </label>
<input id="cities" />
</div>
並將此JSON文件與將腳本命名為“ citynames.json”的文件放在同一目錄中：
{
"cities": [{
"id": 1,
"name": "Flensburg"
}, {
"id": 2,
"name": "Kiel"
}, {
"id": 3,
"name": "Lübeck"
}, {
"id": 4,
"name": "Neumünster"
}, {
"id": 5,
"name": "Brunsbüttel"
}]
}
有關運行示例，請參見此插件
我的新Index.cshtml文件看起來像這樣-
<script type="text/javascript">
$(function () {
$("#cities").autocomplete({
source: function (request, response) {
$.getJSON("Cityname.json", request, function (data) {
var i, suggestions = [];
$.each(data.cities, function (i, val) {
if (val.name.toLowerCase().indexOf(request.term.toLowerCase()) > -1) {
suggestions.push({
label: val.name,
value: val.id
});
}
});
response(suggestions);
});
}
});
});
</script>
<div class="search-form">
<form action="index.html" method="get">
<div class="input-group">
<input type="text" placeholder="Please enter City Name" name="cities" input id="cities" class="form-control input-lg">
<div class="input-group-btn">
<button class="btn btn-lg btn-primary" type="submit">
<a href="~/Home/Search">Search</a>
</button>
</div>
</div>
</form>
-Js代碼------
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
method: "POST",
url: "/Home/GetCityList",
dataType: 'JSON',
success: function (data) {
if (data != null && data != undefined) {
$('#cityId').typeahead({
source: data,
autoSelect: true
});
}
}
})
})
</script>
-控制器-
[HttpPost]
public JsonResult GetCityList()
{
string text;
var fileStream = new FileStream(@"E:\NLogErrors\File.Json", FileMode.Open, FileAccess.Read);
using (var streamReader = new StreamReader(fileStream, Encoding.UTF8))
{
text = streamReader.ReadToEnd();
}
List<City> items = JsonConvert.DeserializeObject<List<City>>(text);
return Json(items);
}
-型號-
public class City
{
public string value { get; set; }
public string name { get; set; }
}
-JSON文件格式-
[
{
"value": 1,
"name": "Flensburg"
},
{
"value": 2,
"name": "Kiel"
},
{
"value": 3,
"name": "Lübeck"
},
{
"value": 4,
"name": "Neumünster"
},
{
"value": 5,
"name": "Brunsbüttel"
}
]
-HTML-
<input type="text" autocomplete="off" id="cityId" /> (same way you can use it with razor.)
我已經使用bootstrap3-typeahead.js進行自動建議綁定
在ASP.NET MVc Web應用程序中如何使用.contains進行搜索和自動完成搜索
[英]How scalable is using .Contains for searching and auto-complete search in asp.net MVc web applications
ASP.NET中的Ajax自動完成文本框在母版頁中不起作用
[英]Ajax Auto-complete Text Box in ASP.NET does not work within master page
是否有一個帶有電子郵件自動完成功能（例如Google Mail）的ASP.NET TextBox？
[英]Is there an ASP.NET TextBox with e-mail auto-complete like Google Mail?
Json使用ASP.NET MVC和Json.Net將視圖中顯示的輸出反序列化
[英]Json deserialize output show in View using ASP.NET MVC and Json.Net
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.