web-dev-qa-db-ja.com

AJAX MVC 4を使用してDropDownListを作成します

2つの@DropDownListForのヘルパーを含むビューがあります。

    @using (Html.BeginForm("CreateOneWayTrip", "Trips"))
    {
        @Html.ValidationSummary(false);
        <fieldset>
            <legend>Enter Your Trip Details</legend>

            <label>Start Point</label>
            @Html.DropDownListFor(m => m.StartPointProvince, (SelectList)ViewBag.Provinces, new { @Id = "province_dll", @class = "form-control" })
            @Html.DropDownListFor(m => m.StartPointCity, (SelectList)ViewBag.Cities, new { @Id = "city_dll", @class = "form-control" })

            <p style="float: none; text-align: center;">
                <button type="submit" value="Create" class="btn btn-info btn-circle btn-lg">
                    <i class="fa fa-check"></i>
                </button>

                <button type="submit" value="Create" class="btn btn-warning btn-circle btn-lg">
                    <i class="fa fa-times"></i>
                </button>
            </p>
        </fieldset>
    }

以下は、データをキャプチャするために使用する一時的なモデルです。

 public class CaptureCreateTrip
 {
    [Required]
    [Display(Name = "Trip ID")]
    public string TripID { get; set; }

    [Required]
    public string StartPointProvince { get; set; }

    [Required]
    public string StartPointCity { get; set; }
}

DropsDownListの1つは、ページの作成時に設定され、2番目は、ユーザーが最初のDropDownListで選択したオプションに基づいて設定されます。これを達成するために、私はajaxを使用しています。私が使用するjavascriptは次のようになります。

$("#province_dll").change(function () {
        $.ajax({
            url: 'getCities/Trips',
            type: 'post',
            data: {
                provinceId: $("#province_dll").val()
            }
        }).done(function (response) {
            $("cities_dll").html(response);
        });
    });

AJAXを呼び出すコントローラーは次のとおりです。

  [HttpPost]
  public ActionResult getCicites(int provinceId)
  {
      var lstCities = new SelectList(new[] { "City1", "City2", "City3" });

      return Content(String.Join("", lstCities));
  }

この時点まではすべて機能します-Province DropDownで値を選択すると、javascriptイベントが発生し、Controllerアクションが選択リストの値をCities DropDownに返しますが、問題は（データの形式の）データがアクションの戻り値が正しくありません。 Paragraph要素を作成し、そのテキストをajax呼び出しの戻り値（ "System.Web.Mvc.SelectListItemSystem.Web.Mvc.SelectListItemSystem.Web.Mvc.Select‌ ‌ ListItem ''）で更新してテストしました

*注：私はajaxを初めて使用し、JqueryとAJAXを学習しています。

c#jqueryajaxasp.net-mvc
15
Marnus Steyn

文字列のコレクション"System.Web.Mvc.SelectListItemSystem"を取得する理由は、var lstCities = new SelectList(new[] { "City1", "City2", "City3" });がIEnumerable<SelectListItem>を返し、String.Join("", lstCities)が各SelectListItemアイテムの.ToString()メソッドを呼び出すためです。 "System.Web.Mvc.SelectListItemSystem"（TextのSelectListItemプロパティの値ではない）を返すコレクション

2番目のドロップダウンリストを設定する最良の方法は、都市のコレクションを含むjsonを返し、ajax成功コールバックでDOMを更新することです。 SelectListを作成する理由はありません-単に不必要な余分なオーバーヘッドであり、少なくとも3倍のデータをクライアントに返す必要があります（クライアントにはC＃SelectListItemクラスの概念はありません。

public JsonResult FetchCities(int provinceId) // its a GET, not a POST
{
    // In reality you will do a database query based on the value of provinceId, but based on the code you have shown
    var cities = new List<string>() { "City1", "City2", "City3" });
    return Json(cities, JsonRequestBehavior.AllowGet);
}

次に、スクリプトで（デフォルトのidをid="StartPointProvince"からid="province_dll"に変更した理由はわかりませんが、）

var url = '@Url.Action("FetchCities", "Trips")'; // Don't hard code your url's!
var cities = $('#city_dll'); // cache it
$("#province_dll").change(function () {
    var id = $(this).val(); // Use $(this) so you don't traverse the DOM again
    $.getJSON(url, { provinceId: id }, function(response) {
        cities.empty(); // remove any existing options
        $.each(response, function(index, item) {
            cities.append($('<option></option>').text(item));
        });
    });
});

編集

OPのコメントに加えて、データベースにフィールドCitiesおよびIDを持つテーブル名Nameが含まれていた場合、コントローラーメソッドは次のようになります

public JsonResult FetchCities(int provinceId) // its a GET, not a POST
{
    var cities = db.Cities.Select(c => new
    {
      ID = c.ID,
      Text = c.Text
    }
    return Json(cities, JsonRequestBehavior.AllowGet);
}

オプションを作成するスクリプトは次のようになります

$.each(response, function(index, item) { // item is now an object containing properties ID and Text
    cities.append($('<option></option>').text(item.Text).val(item.ID));
});
32
user3559349

以下を試すことができますか？

これは、数日前に気付いた投稿です。フォント： MVC 4フォームのダイナミックドロップダウンリスト

州ddlの変更イベントでajax呼び出しを作成する必要があります。この呼び出しは、アクションを要求し、選択した州の都市を返します。

$("province_dll").change(function(){
    $.ajax({
         url: 'getCitiesController/getCitiesAction',
         type: 'post',
         data: {
               provinceId: provinceIdVar
         }
    }).done(function(response){
         $("cities_dll").html(response);
    }); 
});

アクションで：

[HttpPost]
public ActionResult getCicitesAction(int provinceId)
{
     var cities = db.cities.Where(a => a.provinceId == provinceId).Select(a => "<option value='" + a.cityId + "'>" + a.cityName + "'</option>'";

     return Content(String.Join("", cities));
}
5
Márcio Gonzalez

もっとシンプルにしましょう

  • ステップ1：サーバー側の機能/データ

    public JsonResult FetchP(string O)
{
    List<SelectListItem> PList = new List<SelectListItem>();
     PList = _PService.GetAllPActive()
              .Select(i => new SelectListItem()
                         {
                             Text = i.PName,
                             Value = i.PID                                   
                         }).ToList();

    return Json(PList, JsonRequestBehavior.AllowGet);
}

  • ステップ2：クライアント側の機能/データインタープリター

    function FetchP()
{
    var url = '@Url.Action("FetchP", "Your_Controller")'; 
    var PDD= $("#PDD");
    var ODD= $("#ODD").val(); 

    $.getJSON(url, { O: ODD}, function (response) {
        PDD.empty(); 
        debugger;
        $.each(response, function (index, item) {
            debugger;
            var p = new Option(item.Text, item.Value);
            PDD.append(p);
        });
    });
}

  • ステップ3：呼び出し-クライアント側の関数/開始

  • リスト1：

    @Html.DropDownList("ODD", ViewBag.OList as IEnumerable<SelectListItem>, new { @id = "ODD", @class = "form-control", @onchange= "FetchP()" })

  • リスト2：

    @Html.DropDownList("PDD", ViewBag.PList as IEnumerable<SelectListItem>,new { @id = "PDD", @class = "form-control"})
2
Kedar9444