HTTP POSTからデータを渡してAJAXを使用して表示する方法を作成する

Question

ユーザーが選択した国に基づいて空港のリストをフィルタリングしたいと思います。私はその国にある空港を見せたいだけです。私は、私は2つのドロップダウンリストを表示していますビューがあります。

@using WebApplication1.Models 
@using WebApplication1.Controllers 
@model Country 

@{ 
ViewBag.Title = "Index"; 
} 

@using (Html.BeginForm()) 
{ 
<h2>Airport List</h2> 
@Html.Label("Airports", "Airports") 
<select name="Airports"> 
    @foreach (var airport in ViewBag.EuropeanAirports) 
    { 
    <option value="@(airport.name)">@(airport.name)</option> 
    } 
</select> 

@Html.Label("Country", "Country") 


@Html.DropDownListFor(c =>c.country, new SelectList(ViewBag.countries, "country", "country"), "Select Country") 

}ここで

が、私はダウンリスト私のドロップを移入するために作成する方法のGETを使用しています、私のコントローラ内のコードですと、私はユーザーが選択した国を検索するために投稿を使用しています。 LINQクエリを使用して、1つの国の指定された空港を取得しています.2つのJSONファイルがあります.1つは国のリスト用、もう1つは空港のリスト用です。 //ここ

 //LINQ QUERY TO RETRIEVE ALL EUROPEAN AIRPORTS 
     IEnumerable<Airport> EuropeanAirports = from n in airports 
         where n.continent.Equals("EU") 
         select n; 
     IEnumerable<Country> countries = GetCountries(); 
     ViewBag.countries = countries; 
     ViewBag.EuropeanAirports = EuropeanAirports; 
     return View(new Country()); 
    } 

    [HttpPost] 
    public ActionResult Create(Country postedCountry) 
    { 
     IEnumerable<Country> countries = GetCountries(); 
     string selectedCountry = postedCountry.country; 
     var abbreviation = from n in countries 
          where n.country.Equals(selectedCountry) 
          select n.abbr; 
     IEnumerable<Airport> EuropeanAirports = from n in airports 
               where 
             n.iso.Equals(abbreviation) 
               select n; 
     ViewBag.EuropeanAirports = EuropeanAirports; 
     return View(EuropeanAirports); 
    } 

{

は、私が働いているJSONファイルです）（METHOD 公共のActionResultが作成GET：ここで私は私のコントローラを持っているコードがある

国JSONファイルを： [

{ 
"country": "Iceland", 
"abbr": "IS" 
}, 
{ 
"country": "Kosovo", 
"abbr": "KS" 
}, 
... 
] 

空港JSON：

[ 
    { 
    "iata": "UTK", 
    "lon": "169.86667", 
    "iso": "MH", 
    "status": 1, 
    "name": "Utirik Airport", 
    "continent": "OC", 
    "type": "airport", 
    "lat": "11.233333", 
    "size": "small" 
    }, 
... 
    ] 

私の目標は、エンドユーザーが選択した国に応じて空港のドロップダウンリストの内容をフィルタリングすることです。あなたが私のコントローラからわかるように、私はその国に特有の空港のリストを取得しようとしましたが、その情報をビューに転送して空港のドロップダウンリストの内容を更新する方法はわかりません。私はそれをするためにAJAXを使用しなければならないと思うし、私はそれに精通していない。私はコントローラのcreateメソッドのHTTP POSTで空港のフィルタリングをすべてやっています。それが正当なものかどうかは本当にわかりませんし、私のビュー内のすべての情報を取得してドロップダウンを埋める方法がわかりませんリスト。

Answer 1

選択した国が変更されるたびにドロップダウンリスト（選択リスト）の値を変更したい場合は、本当に古いAjaxが必要です。ここでは単純なJQUERY実装を示します。

ビューモデル：

public class CreateViewModel 
{ 
    IEnumerable<Country> Countries { get; set; } 
    IEnumerable<Airport> Airports { get; set; } 

    public CreateViewModel() {} 
} 

CONTROLLER：

[HttpGet] 
public ActionResult Create() 
{ 
    //LINQ QUERY TO RETRIEVE ALL EUROPEAN AIRPORTS 
    IEnumerable<Airport> europeanAirports = from n in airports 
        where n.continent.Equals("EU") 
        select n; 
    IEnumerable<Country> countries = GetCountries(); 

    CreateViewModel viewModel = new CreateViewModel(); 
    viewModel.Countries = countries; 
    viewModel.Airports = europeanAirports; 

    return View(viewModel); 
} 

[HttpGet] 
public ActionResult GetCountryAirports(string countryCode) 
{ 
    // Get the airports you need 
    IEnumerable<Airport> airports = null; 

    return Json(airports, JsonRequestBehavior.AllowGet); 
} 

VIEW：

@using WebApplication1.Models 
@using WebApplication1.Controllers 
@model Country 

@{ 
ViewBag.Title = "Index"; 
} 

@using (Html.BeginForm()) // Do not know what this is for 
{ 
    <h2>Airport List</h2> 
    @Html.Label("Airports", "Airports") 
    @Html.DropDownList("Airports", new SelectList(Model.Airports, "id", "name"), new { @class = "form-control" }) // id is the value when selected, name is the text displayed. Change as needed. 
    @Html.Label("Country", "Country") 
    @Html.DropDownList("Country", new SelectList(Model.Countries, "id", "name"), "Select Country", new { @class = "form-control" }) // id is the value when selected, name is the text displayed. Change as needed. 
} 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#Country").change(function(){ 
     var countryId = $(this).val(); 
     $.ajax({ 
      url: '@Url.Action("GetCountryAirports", "Action")', 
      type: 'GET', 
      data: { 
       countryId: countryId 
      }, 
      success: function (data) { 
       var markup = ""; 

       // markup += "<option value=''></option>"; Uncomment if you want to add a blank option 

       for (var i = 0; i < data.length; i++) { 
        markup += "<option value=" + data[i].id + ">" + data[i].name + "</option>"; // Change id and name to correct properties 
       } 

       $("#Airports").html(markup).show(); 
      }, 
      error: function (error) { 
       $("#Airports").empty(); 
       $("#Airports").val(''); 
      } 
     }); 
    }); 
}); 
</script>