Question

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

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

现在我在Model中创建了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

我认为您应该提供可用城市的下拉菜单，而不是文字输入。作为替代方案，使用自动完成器。这是带下拉列表的解决方案。

首先，您应该创建两个动作，一个用于最初显示页面[HttpGet]，另一个用于处理[HttpPost]形式的帖子。

GET操作应返回强类型视图，ViewModel包含搜索参数。视图将填充的ViewModel发送到后期操作。

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

＆＃34; ControllerName＆＃34;应该是实现动作的控制器的名称，例如＆＃34;首页＆＃34;

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

1 个答案: