Reputation:

Read and Show .Json file in an auto-complete search using ASP.NET MVC

I made a json file contain City names of a country.I want to show these City name as autocomplete search on View using MVC.My Cityname.Json file look like this -

Cityname[
{
    "id": 1,
    "City": "Flensburg"
},
{
    "id": 2,
    "City": "Kiel"
},
{
    "id": 3,
    "City": "Lübeck"
},
{
    "id": 4,
    "City": "Neumünster"
},
{
    "id": 5,
    "City": "Brunsbüttel"
}
]

My model Class for City object is-

public class City
{
    public string id{get:set;}
    public string City { get; set; }
}

In my home controller in action-result index I desrialize Json file to show on view

public ActionResult Index()
{
    using (StreamReader r = new StreamReader("file.json"))
    {
        string json = r.ReadToEnd();
        List<CityName> items = JsonConvert.DeserializeObject<List<CityName>>(json);
    }

    return View();
}

Now View class I made search box , where I want to get all city name in auto-completed way. But i am not how to proceed with it

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

My _Layout.cshtml file look like this-

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

Upvotes: 0

Answers (4)

Ankit Mori

Reputation: 775

-- Js Code ------

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

--- Controller ---

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

--- Model ---

public class City
    {
        public string value { get; set; }
        public string name { get; set; }
    }

--- JSON File Format ---

[
{
    "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.)

I have Used bootstrap3-typeahead.js for autosuggest binding

Upvotes: 1

user5850934

Reputation:

My new Index.cshtml file look like this-

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

Upvotes: 0

moztemur

Reputation: 981

Of course a better design method can be preferred but basicly:

Put this script code inside the <head> tag of your HTML code:

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

Add this HTML code into your View file:

<div class="ui-widget">
    <label for="cities">Cities: </label>
    <input id="cities" />
</div>

And put this JSON file into the same directory with the file where you put the script above naming it as '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"
  }]
}

See this plunker for a running example

Upvotes: 1

kravits88

Reputation: 13049

If your JSON list is static data you can store a list in the javascript if that's easier.

$(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">

Upvotes: 0

Read and Show .Json file in an auto-complete search using ASP.NET MVC

Answers (4)

Related Questions