使用 ASP.NET MVC 在自动完成搜索中读取和显示 .Json 文件答案

【问题标题】：Read and Show .Json file in an auto-complete search using ASP.NET MVC使用 ASP.NET MVC 在自动完成搜索中读取和显示 .Json 文件
【发布时间】：2016-02-04 09:03:13
【问题描述】：

我制作了一个 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();
}

现在查看我制作的搜索框类，我想在其中以自动完成的方式获取所有城市名称。但我不知道如何处理它

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

【问题讨论】：

我认为您无需编写服务器端代码即可将这些恒定的自动完成数据提取到您的文本框中。您可以使用轻量级前端工具，例如 jQuery，它将读取您的 JSON 文件并在自动完成功能中显示。请参阅 pontikis.net/blog/jquery-ui-autocomplete-step-by-step 以获取一个很好的示例。只关注链接内容的 JSON 和 JavaScript 部分。
@mhmtztmr：根据您给定的网站，我已将 Cityname.json 存储在 app_Data 文件夹中，并在编码部分修改了我的 javascript。但它不起作用
@mhmtztmr：嗨，我只是在尝试，但我的代码没有得到任何结果。你能检查一下并告诉我应该怎么做才能在自动搜索中获取城市名称

标签： c# json asp.net-mvc asp.net-mvc-4

【解决方案1】：

如果您的 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">

【讨论】：

您能否再解释一下。我在哪里可以将此代码修改为我的代码。抱歉，我是处理这种情况的新手。
输入值将与表单一起发布并在控制器上可用。我会先看一些关于使用 MVC 提交表单的基础教程。

【解决方案2】：

当然可以首选更好的设计方法，但基本上：

将此脚本代码放在 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 代码添加到您的视图文件中：

<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"
  }]
}

查看this plunker 获取运行示例

【讨论】：

谢谢。但此代码仅与 plunker 一起运行。但是在我的 Visual Studio 中尝试时它根本不起作用。我正在尝试但没有找到不运行此代码的实际错误。
在 Visual Studio 中运行项目时是否在浏览器中看到文本框？
是的。它正在搜索，但没有像 plunker 中那样显示任何地方
只是为了确保...您是否将脚本放在 head 标记中，并将 json 文件放在同一目录中？没有新的头标。您应该在项目中已经存在的 head 标签内添加脚本，很可能在共享视图内。
我在问题部分添加了我的_layout.cshtml，并在答案部分给出了新的索引cshtml。我需要从您的代码中修改一些要点。因为使用您的代码，我也无法在窗口上获得搜索视图。然而，这段代码在编写时开始搜索，但从不显示任何地方。

【解决方案3】：

我的新 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>

【讨论】：

【解决方案4】：

-- 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 进行自动提示绑定

【讨论】：