0

私はカスケードされたドロップダウンリストを持っており、最初のドロップダウンリストで選択されたアイテムに関して2番目のドロップダウンリストにアイテムを表示します.

namespace MvcSampleApplication.Controllers
{
    public class CascadeListController : Controller
    {
        public ActionResult Index()
        {
            List<SelectListItem> state = new List<SelectListItem>();
            state.Add(new SelectListItem { Text = "State1", Value = "State1" });
            state.Add(new SelectListItem { Text = "State2", Value = "State2" });
            ViewBag.StateName = new SelectList(state, "Value", "Text");
            return View("BasicDrop");
        }
        public JsonResult Districtlist(string Id)
        {
            var districttype = from s in CascadingDropdowns.GetDistrictList()
                               where s.StateName == Id
                               select s;            
            return Json(new SelectList(districttype.ToArray(), "StateName", "DistrictName"), JsonRequestBehavior.AllowGet);
        }
    }
}

これは表示用です

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
    $(function () {
        $("State").change(function () {
            $.getJSON('/CascadeListController/Districtlist' + $('#State').val(), function (data) {
                var items = '<option>Select a District</option>';
                $.each(data, function (i, districttype) {
                    items += "<option value = '" + districttype.Value + "'>" + districttype.Text + " </option> ";
                });
                $('#District').html(items);
            });
        });
    });
</script>    
@model MvcSampleApplication.Models.CascadingDropdowns
@{
    ViewBag.Title = "BasicDrop";
}    
<h2>BasicDrop</h2>
@using (Html.BeginForm())
{
  <div>
    <fieldset>
    <legend>DropDownlists</legend>
      @Html.Label("State")
      @Html.DropDownList("State", ViewBag.StateName as SelectList,"Select A state", new {id= "State"})         
      @Html.Label("District");       
      <div class="mycombo">
         <select id ="District" name ="Distrct"></select>
      </div>            
    </fieldset>
  </div>
}

最初のドロップダウンリストでアイテムを選択すると、2番目のドロップダウンリストにアイテムが表示されず、幅を増やすために2番目のドロップダウンリストのdivプロパティを使用しました「70px」のように幅を指定しましたが、それも機能しません..

誰かがこれについて何か提案をしてくれませんか...よろしくお願いします。

4

3 に答える 3

1

URL で間違っている 2 つの点:

  • アクション名と ID を区切るスラッシュ「/」がありません。
  • から「コントローラー」という単語を削除する必要がありますCascadeListController。

$.getJSON('/CascadeList/Districtlist/'+ $('#State').val(),

Url.Contentまた、仮想サーバー側のパスを URL に変換するために使用することをお勧めします。

$.getJSON('@Url.Content("~/CascadeList/Districtlist/")'+ $('#State').val(),

于 2013-07-25T15:47:20.937 に答える
0

ここにあなたのために働くことができる解決策があります. 私はあなたのコードを私が快適に感じるものにかなり変更し、ベストプラクティスに従うようにしました. シナリオに合わせて編集します。私は決して使用ViewBagしませんSelectList。

州が選択されると、その州のすべての地区が別のドロップダウンにロードされるという私の仮定に基づいて、この質問に答えます。

Stateとというドメイン モデル クラスを作成しますDistrict。これは、すべての州と地区を表します。

public class State
{
     public int Id { get; set; }

     public string Name { get; set; }
}

public class District
{
     public int Id { get; set; }

     public string Name { get; set; }
}

コントローラーにデータを入力するビューモデルがあり、このビューモデルをビューに渡します。他のデータをキャプチャする必要がある場合は、ビュー モデルに他のプロパティを含めることができます。

public class LocationViewModel
{
     public int StateId { get; set; }

     public IEnumerable<State> States { get; set; }

     public int DistrictId { get; set; }

     public IEnumerable<District> Districts { get; set; }
}

次に、ビュー モデルにデータを入力し、それをビューに渡す必要があります。すべての州のリストと地区の空のリストを渡します。

public class CascadeListController : Controller
{
     private readonly IStateRepository stateRepository;
     private readonly IDistrictRepository districtRepository;

     public LocationController(IStateRepository stateRepository, IDistrictRepository districtRepository)
     {
          this.stateRepository = stateRepository;
          this.districtRepository = districtRepository;
     }

     public ActionResult Create()
     {
          LocationViewModel viewModel = new LocationViewModel
          {
               States = stateRepository.GetAll(),
               Districts = Enumerable.Empty<District>() // Empty because no state has been selected
          };

          return View(viewModel);
     }

     [HttpPost]
     public ActionResult Create(LocationViewModel viewModel)
     {
          // Do whatever you need to do here
     }
}

あなたのビューは強く型付けされています:

@model YourProject.ViewModels.Locations.LocationViewModel

@Html.DropDownListFor(
     x => x.StateId,
     new SelectList(Model.States, "Id", "Name", Model.StateId),
     "-- Select --",
     new { id = "States" }
)
@Html.ValidationMessageFor(x => x.StateId)

@Html.DropDownListFor(
     x => x.DistrictId,
     new SelectList(Model.Districts, "Id", "Name", Model.DistrictId),
     "-- Select --",
     new { id = "Districts" }
)
@Html.ValidationMessageFor(x => x.DistrictId)

2 番目のドロップダウンの変更と入力を処理する jQuery:

$(document).ready(function () {
     $("#Departments").change(function () {
          var url = '@Url.Action("GetDistrictsByStateId", "CascadeList")';
          var stateId = $("#States").val();

          $.getJSON(url, { stateId: stateId }, function (data) {
               $('#Districts').empty();
               var items = '<option>-- Select --</option>';

               $.each(data, function (i, district) {
                    items += "<option value='" + district.Id + "'>" + district.Name + "</option>";
               });

               $('#Districts').html(items);
          });
     });
});

最後に、GetDistrictsByStateId アクション メソッドを使用して、特定の州のすべての地区を取得します。

public ActionResult GetDistrictsByStateId(int stateId)
{
     IEnumerable<District> districts = districtRepository.GetDistrictsByStateId(stateId);

     var displayedDistricts = districts.Select(x => new
     {
          Id = x.Id.ToString(),
          Name = x.Name
     });

     return Json(displayedDistricts, JsonRequestBehavior.AllowGet);
}

これを行うにはおそらく他の方法がありますが、これが私にとってこれを達成する最も簡単な方法です。私が何かを忘れていたら許してください:)

これが正しい道に役立つことを願っています。

于 2013-07-26T08:28:42.947 に答える
0 
@Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        $(function () {
            $("State").change(function () {
                $.getJSON('/CascadeList/Districtlist?id=' + $('#State').val(), function (data) { 
...    

        });
    });
});

クエリ文字列を渡すときに疑問符がありません。それは間違いだと思います。これを達成する別の方法は、 $.getJSON メソッドの data パラメータを使用することです 

$.getJSON('/CascadeList/Districtlist', {id = $('#State').val()},
function (data) { 
    ...

});
URLとクエリ文字列の間にスラッシュを直接使用する方法がもう1つあると思います（よくわかりませんが、テストする必要があります） 
$.getJSON('/CascadeList/Districtlist/'+ $('#State').val(),
function (data) { 
    ...

});

編集：@Igorが指摘するまで、コントローラー名の「コントローラー」キーワードを観察しませんでした。

于 2013-07-25T15:17:34.680 に答える