使用 ASP.NET MVC 从外部文件加载 Json 数据

Question

我想加载一个包含国家城市名称的外部 Json 数据文件。我想在 Index.cshtml 的搜索选项中显示它。我的 Json 文件看起来像这样-

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

现在我在模型中创建了 City 类来从这个对象中获取名称。

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

我的控制器类看起来像这样-

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

        return View();
    }
}

现在对于视图，我使用了 Javascript 并创建了一个带有类似按钮的搜索框-

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

现在我想在搜索选项中设置城市名称。但由于我是处理 MVC 的新手，我不知道如何进行。

Answer 1

我认为您应该提供一个包含可用城市的下拉菜单，而不是文本输入。作为替代方案，使用自动完成程序。这是带有下拉菜单的解决方案。

首先，您应该创建两个 Action，一个用于初始显示页面 [HttpGet]，另一个用于处理表单 [HttpPost] 的帖子。

GET 操作应返回强类型视图，ViewModel 包含您的搜索参数。 View 将填写好的 ViewModel 发送到 post 操作。

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”应该是实现动作的控制器的名称，例如“家”。