Load Json data from external file using ASP.NET MVC

Question

I want to load an external Json data File which contain the city name of a country.I want to show it in the search option in Index.cshtml.My Json file look like this-

 CityName[
  {
    "City": "Flensburg"
  },
  {
    "City": "Kiel"
  },
  {
    "City": "Lübeck"
  },
  {
    "City": "Neumünster"
  }
]

Now I created City class inside the Model to get the name from this object.

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

My Controller Class look like this-

 public class HomeController : Controller
 {
    public ActionResult Search(string name)
    {

        return View();
    }
}

Now for the view I used Javascript and created one search box with button like this-

  <div class="search-form">
    <form action="index.html" method="get">
     <div class="input-group">
        <input type="text" placeholder="Enter Location Name" name="search" class="form-control input-lg">

        <div class="input-group-btn">
            <button class="btn btn-lg btn-primary" type="submit">
                <a href="@Url.Action("Search", "Home")">Search</a>

              </button>
          </div>
       </div>

     </form>
  </div>

Now I want to set the city name in the search option. But as I am very new in handling MVC, I am not sure how to proceed with it.

Georg Patscheider · Answer 1 · 2016-02-02T15:36:18.987

I think you should provide a dropdown with the available cities instead of a text input. As an alternative, use an autocompleter. Here is the solution with a dropdown.

First, you should create two Actions, one to display the page initially [HttpGet] and one to handle the post of the form [HttpPost].

The GET action should return a strongly typed view, the ViewModel contains your search parameters. The View sends the filled out ViewModel to the post action.

public class SearchViewModel {

    public City SelectedCity {get; set;}

    // to be read from JSON
    public City[] AvailableCities {get; set;}

    // generate SelectListItems to be used with DropDownListFor()
    public IEnumerable<SelectListItem> CityOptions { get {
        foreach (var city in AvailableCities) {
            yield return new SelectListItem {
                Value = city.City,
                Text =  city.City,
                Selected = city == SelectedCity
            };
        }
    }}
}

// GET action
[HttpGet]
public ActionResult Search() {
    var vm = new SearchViewModel();
    vm.AvailableCities = // load from JSON
    return View("Search", vm);
}

// Razor View <ControllerName>\Search.cshtml
@model SearchViewModel
@using (Html.BeginForm("Search", "<ControllerName>", FormMethod.Post)) {
    @* render Cities dropdown; bind selected value to SelectedCity *@
    @Html.DropDownListFor(m => m.SelectedCity, Model.CityOptions)
    <button class="btn btn-lg btn-primary" type="submit">Search</button>
}

// POST Action
[HttpPost]
public ActionResult Search(SearchViewModel vm) {
    var selected = vm.SelectedCity;
    // search ...
}

"ControllerName" should be the name of the controller implementing the actions, e.g. "Home".

My queation was also how can I load the Json file to show on the search. I have saved in an external file in .json format. so how can i read these data in vm.AvailableCities =// load from JSON line. — , Feb 02 '16 at 13:44
See here on how to read and parse JSON from a file: http://stackoverflow.com/questions/13297563/read-and-parse-a-json-file-in-c-sharp — Georg Patscheider, Feb 02 '16 at 15:31

Load Json data from external file using ASP.NET MVC

1 Answers1