web-dev-qa-db-ja.com

JSON結果をドロップダウンに取り込む-MVC3、JQuery、Ajax、JSONを使用したカスケードドロップダウン

私はmvcを使用してカスケードドロップダウンを取得しました。たとえば、最初のドロップダウンで国を選択すると、それに応じて2番目の国の州が入力されます。

現時点では、すべてがうまくいくようで、Jsonの応答を取得しています（F12ツールを使用して見ました）。_[{ "stateId":"01", "StateName": "arizona" } , { "stateId" : "02", "StateName":"California" }, etc..] .._

_second-dropdown_にこのデータを取り込む方法を知りたいです。 2番目のドロップダウンのIDは「StateID」です。どんな助けも大歓迎です。

以下は、サーバーからJSON応答を生成するために使用されるコードです。

_[HttpPost]
public JsonResult GetStates(string CountryID)
{
    using (mdb)
    {
        var statesResults = from q in mdb.GetStates(CountryID)
                        select new Models.StatesDTO
                        {
                            StateID = q.StateID,
                            StateName = q.StateName
                        };

        locations.statesList = stateResults.ToList();
    }

    JsonResult result = new JsonResult();

    result.Data = locations.statesList;

    return result;
}
_

以下は、クライアント側のHTML、カミソリコード、およびスクリプトです。 「success：」内にいくつかのコードを記述して、JSONデータを状態dropdownに取り込むようにします。

_<script type="text/javascript">
    $(function () {
        $("select#CountryID").change(function (evt) {

            if ($("select#CountryID").val() != "-1") {

                $.ajax({
                    url: "/Home/GetStates",
                    type: 'POST',
                    data: { CountryID: $("select#CountryID").val() },
                    success: function () { alert("Data retrieval successful"); },
                    error: function (xhr) { alert("Something seems Wrong"); }
                });
            }
        });
    });
</script> 
_
asp.net-mvcjsonjquery
13
Ren

まず、jQueryイベントハンドラー関数内でthisはイベントをトリガーした要素を参照するため、$("select#CountryID")への追加呼び出しを$(this)に置き換えることができます。ただし、可能な場合は、jQuery関数を使用するのではなく、要素のプロパティに直接アクセスする必要があります。したがって、$(this).val()や$("select#CountryID").val()ではなく_this.value_を実行できます。

次に、AJAXがsuccess関数を呼び出している間に、一連の_<option>_要素を作成する必要があります。これは、ベースのjQuery()関数（または$()略して）これは次のようになります。

_$.ajax({
    success: function(states) {
        // states is your JSON array
        var $select = $('#StateID');
        $.each(states, function(i, state) {
            $('<option>', {
                value: state.stateId
            }).html(state.StateName).appendTo($select);
        });
    }
});
_

jsFiddle demo です。

関連するjQueryドキュメント：

17
Anthony Grist

私のプロジェクトでは、このようにやっています

iN MYコントローラー

        public JsonResult State(int countryId)
        {               
            var stateList = CityRepository.GetList(countryId);
            return Json(stateList, JsonRequestBehavior.AllowGet);
        }

モデルで

        public IQueryable<Models.State> GetList(int CountryID)
        {

            var statelist = db.States.Where(x => x.CountryID == CountryID).ToList().Select(item => new State
            {
                ID = item.ID,
                StateName = item.StateName
            }).AsQueryable();
            return statelist;
       }

ビューで

<script type="text/javascript">
    function cascadingdropdown() {
        $("#stateID").empty();
        $("#stateID").append("<option value='0'>--Select State--</option>");
        var countryID = $('#countryID').val();
        var Url="@Url.Content("~/City/State")";
        $.ajax({
            url:Url,
            dataType: 'json',
            data: { countryId: countryID },
            success: function (data) {                
                $("#stateID").empty();
                $("#stateID").append("<option value='0'>--Select State--</option>");
                $.each(data, function (index, optiondata) {                  
                    $("#stateID").append("<option value='" + optiondata.ID + "'>" + optiondata.StateName + "</option>");
                });
            }
        });
    }     
</script>

私はこれがあなたを助けると思う......

12
Rajpurohit

ステップ1：

  • 最初に、データを保存するためのプロパティを定義するモデルクラスが必要です。

    public class ApplicationForm
{
    public string Name { get; set; }
    public string State { get; set; }
    public string District { get; set; }
}

    ステップ2：

  • ここで、ViewBag.StateNameに状態のリストをパックしてインデックスビューを返す初期コントローラーが必要です。

    public ActionResult Index()
{
    List<SelectListItem> state = new List<SelectListItem>();
    state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" });
    state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" });
    ViewBag.StateName = new SelectList(state, "Value", "Text");

    return View();
}

    上記のコントローラーには、ViewBag.StateNameにアタッチされた状態を含むリストがあります。 Linqクエリなどを使用してデータベースから状態のリストを取得し、それをViewBag.StateNameにパックできます。それでは、インメモリデータを使用してみましょう。

    ステップ3：

  • コントローラーができたら、ビューを追加して、Razorフォームの作成を開始できます。

      @Html.ValidationSummary("Please correct the errors and try again.")

  @using (Html.BeginForm())
     {
     <fieldset>
    <legend>DropDownList</legend>
    @Html.Label("Name")
    @Html.TextBox("Name")
    @Html.ValidationMessage("Name", "*")

    @Html.Label("State")
    @Html.DropDownList("State", ViewBag.StateName as SelectList, "Select a State", new { id = "State" })
    @Html.ValidationMessage("State", "*")

    @Html.Label("District")
    <select id="District" name="District"></select>
    @Html.ValidationMessage("District", "*")

    <p>
        <input type="submit" value="Create" id="SubmitId" />
    </p>
</fieldset>
}

    各入力コントロール（2つのDropDownListと1つのTextBox）に適切なラベルと検証フィールドを追加し、上部に検証サマーを追加したことがわかります。これは、jQueryを使用してJSON呼び出しを行うと、事前設定されたオプションタグのHTMLマークアップが返されるためです。それでは、上記のビューページにjQueryコードを追加しましょう。

    ステップ4：

    これは、パラメーター（選択された状態名）を使用して、コントローラーのDistrictListメソッドという名前のDDLへのJSON呼び出しを行うjQueryコードです。 DistrictListメソッドはJSONデータを返します。返されたJSONデータを使用して、タグHTMLマークアップを構築し、このHTMLマークアップをDOMコントロールである「District」に添付します。

      @Scripts.Render("~/bundles/jquery")
    <script type="text/jscript">
       $(function () {
        $('#State').change(function () {
            $.getJSON('/DDL/DistrictList/' + $('#State').val(),         function (data) {
                var items = '<option>Select a District</option>';
                $.each(data, function (i, district) {
                    items += "<option value='" + district.Value + "'>" + district.Text + "</option>";
                });
                $('#District').html(items);
            });
           });
        });
    </script>

    タグの前にjQueryライブラリ参照を使用していることを確認してください。

    ステップ5：

  • 上記のjQueryコードでは、パラメーターを使用してコントローラーのDistrictListメソッドという名前のDDLへのJSON呼び出しを行っています。 JSONデータを返すDistrictListメソッドコードを次に示します。

    public JsonResult DistrictList(string Id)
{
    var district = from s in District.GetDistrict()
                    where s.StateName == Id
                    select s;

    return Json(new SelectList(district.ToArray(), "StateName", "DistrictName"), JsonRequestBehavior.AllowGet);
}

    DistrictListメソッドは、jQuery JSON呼び出しによって送信される文字列タイプの「Id」（常に「Id」である必要があります）パラメーターを受け入れることに注意してください。メソッド内では、linqクエリで「Id」パラメーターを使用して、一致する地区のリストを取得しています。概念的には、地区データのリストに州フィールドが必要です。また、linqクエリでは、District.GetDistrict（）を呼び出すメソッドを作成しています。

    ステップ6：

    上記のDistrict.GetDistrict（）メソッド呼び出しでは、DistrictはGetDistrict（）メソッドを持つモデルです。また、linqクエリでGetDistrict（）メソッドを使用しているため、このメソッドはIQueryable型である必要があります。モデルコードは次のとおりです。

    public class District
{
    public string StateName { get; set; }
    public string DistrictName { get; set; }

    public static IQueryable<District> GetDistrict()
    {
        return new List<District>
        {
            new District { StateName = "Bihar", DistrictName = "Motihari" },
            new District { StateName = "Bihar", DistrictName = "Muzaffarpur" },
            new District { StateName = "Bihar", DistrictName = "Patna" },
            new District { StateName = "Jharkhand", DistrictName = "Bokaro" },
            new District { StateName = "Jharkhand", DistrictName = "Ranchi" },
        }.AsQueryable();
    }
}

    ステップ7：

    カスケードドロップダウンリストの準備ができたので、ここでアプリケーションを実行できます。ユーザーが送信ボタンをクリックしたときに、検証作業を行います。そこで、別のアクション結果POST version。

    [HttpPost]
public ActionResult Index(ApplicationForm formdata)
{
    if (formdata.Name == null)
    {
        ModelState.AddModelError("Name", "Name is required field.");
    }
    if (formdata.State == null)
    {
        ModelState.AddModelError("State", "State is required field.");
    }
    if (formdata.District == null)
    {
        ModelState.AddModelError("District", "District is required field.");
    }

    if (!ModelState.IsValid)
    {
        //Populate the list again
        List<SelectListItem> state = new List<SelectListItem>();
        state.Add(new SelectListItem { Text = "Bihar", Value = "Bihar" });
        state.Add(new SelectListItem { Text = "Jharkhand", Value = "Jharkhand" });
        ViewBag.StateName = new SelectList(state, "Value", "Text");

        return View("Index");
    }

    //TODO: Database Insertion

    return RedirectToAction("Index", "Home");
}
3
kavitha Reddy

Ajax呼び出し内でこれを試してください：

$.ajax({
  url: "/Home/GetStates",
  type: 'POST',
  data: {
    CountryID: $("select#CountryID").val()
  },
  success: function (data) {
    alert("Data retrieval successful");
    var items = "";

    $.each(data, function (i, val) {
      items += "<option value='" + val.stateId + "'>" + val.StateName + "</option>";
    });

    $("select#StateID").empty().html(items);
  },
  error: function (xhr) {
    alert("Something seems Wrong");
  }
});

編集1

success: function (data) {

  $.each(data, function (i, val) {
    $('select#StateID').append(
    $("<option></option>")
      .attr("value", val.stateId)
      .text(val.StateName));
  });
},
1
palaѕн

これを試して：

public JsonResult getdist(int stateid)
{
    var res = objdal.getddl(7, stateid).Select(m => new SelectListItem { Text = m.Name, Value = m.Id.ToString() });
    return Json(res,JsonRequestBehavior.AllowGet);
}
0
Meera

モデル（この場合、APIから返されたJSON）をテンプレート（SELECTのHTMLコード）にバインドするクライアント側のビューエンジンの使用を検討する必要があります。 Angular and Reactはこのユースケースでは複雑になるかもしれませんが、 JQueryビューエンジン を使用すると、JSONモデルをテンプレートに簡単にロードできますMVCのようなアプローチを使用：

<script type="text/javascript">
    $(function () {
        $("select#CountryID").change(function (evt) {

            if ($("select#CountryID").val() != "-1") {

                $.ajax({
                    url: "/Home/GetStates",
                    type: 'POST',
                    data: { CountryID: $("select#CountryID").val() },
                    success: function (response) {
                             $("#stateID").empty();
                             $("#stateID").view(response);
                    },
                    error: function (xhr) { alert("Something seems Wrong"); }
                });
            }
        });
    });
</script>

JavaScriptで生のHTMLを生成するほうがずっときれいです。詳細はこちらを参照してください： https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown

0
Jovan MSFT

この投稿は1年前のものですが、私はそれを見つけました。私は次のソリューションを使用し、それは非常にうまく機能します。 Javascriptを1行も書くことなく、強い型付けを行います。

mvc4ajaxdropdownlist.codeplex.com

Visual StudioからNuGetパッケージとしてダウンロードできます。

0
Frank Bonnet
   <script type="text/javascript">
          $(document).ready(function () {
              $("#ddlStateId").change(function () {
                  var url = '@Url.Content("~/")' + "Home/Cities_SelectedState";
                  var ddlsource = "#ddlStateId";
                  var ddltarget = "#ddlCityId";
                  $.getJSON(url, { Sel_StateName: $(ddlsource).val() }, function (data) {
                      $(ddltarget).empty();
                      $.each(data, function (index, optionData) {
                          $(ddltarget).append("<option value='" + optionData.Text + "'>" + optionData.Value + "</option>");
                      });

                  });
              });
          });
       </script>
0
kavitha Reddy