web-dev-qa-db-ja.com

選択変更イベント-Html.DropDownListFor

ドロップダウンリストが2つあります。最初の値から選択した値がもう一方をロードします。コントローラーにヘルパーメソッドがある場合、どうすればよいですか？

@using (Html.BeginForm())
{
<div>
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td><b>Select a District:</b></td>
            <td>@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable<SelectListItem>, "Select One")</td>
        </tr>
        <tr>
            <td><b>Select a TM:</b></td>
            <td>@Html.DropDownListFor(m => m.TMId, ViewData["TMManagers"] as IEnumerable<SelectListItem>, "Select One")</td>
        </tr>
    </table>
</div>
}

private void LoadDistrictManagers()
{
    var _DMS = (from c in SessionHandler.CurrentContext.ChannelGroups
                join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
                where cgt.Name == "District Manager"
                select new { c.ChannelGroupId, c.Name }).OrderBy(m => m.Name);
    ViewData["DMManagers"] = new SelectList(_DMS, "ChannelGroupId", "Name");
}

private void LoadTerritoryManagers(int districtId)
{
    var _TMS = (from c in SessionHandler.CurrentContext.ChannelGroups
                join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
                where cgt.Name == "Territory" && c.ParentChannelGroupId == districtId
                select new { c.ChannelGroupId, c.Name }).OrderBy(m => m.Name);
    ViewData["TMManagers"] = new SelectList(_TMS, "ChannelGroupId", "Name");
}

public ActionResult SummaryReport()
{
    DistrictManagerModel model = new DistrictManagerModel();
    LoadDistrictManagers();
    return View("AreaManager", model);
}
c#asp.net-mvc-3razor
23
bladerunner

HTTPAttributesフィールドを使用して、両方のドロップダウンに一意のIDを指定します。

@Html.DropDownListFor(m => m.DistrictId, ViewData["DMManagers"] as IEnumerable<SelectListItem>, "Select One", new {@id="ddlDMManagers"})

2番目のドロップダウンは空のリストとして初期化する必要があります。

@Html.DropDownListFor(m => m.TMId, Enumerable.Empty<SelectListItem>(), new {@id="ddlTMManagers"})

最初のドロップダウンで「変更」イベントがトリガーされたときに、jQuery ajaxを使用して2番目のドロップダウンを更新してもかまわない場合：

$(function() {
    $('select#ddlDMManagers').change(function() {
        var districtId = $(this).val();


        $.ajax({
            url: 'LoadTerritoryManagers',
            type: 'POST',
            data: JSON.stringify({ districtId: districtId }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                $.each(data, function (key, TMManagers) {
                    $('select#ddlTMManagers').append('<option value="0">Select One</option>');
                    // loop through the TM Managers and fill the dropdown
                    $.each(TMManagers, function(index, manager) {
                        $('select#ddlTMManagers').append(
                            '<option value="' + manager.Id + '">'
                            + manager.Name + 
                            '</option>');
                    });
                });
            }
        });
    });
});

このクラスをコントローラーの名前空間に追加します。

public class TMManager
{
    public int Id {get; set;}
    public string Name {get; set;}
}

Ajaxリクエストに応答して{Id、Name}オブジェクトのJSON配列を返すには、コントローラーアクションLoadTerritoryManagers（）を更新する必要があります。

    [HttpPost]
    public ActionResult LoadTerritoryManagers(int districtId)
    {
        var _TMS = (from c in SessionHandler.CurrentContext.ChannelGroups
                join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
                where cgt.Name == "Territory" && c.ParentChannelGroupId == districtId
                select new TMManager(){ Id = c.ChannelGroupId, Name = c.Name }).OrderBy(m => m.Name);

        if (_TMS == null)
            return Json(null);

        List<TMManager> managers = (List<TMManager>)_TMS.ToList();
        return Json(managers);
    }
31
BumbleB2na

次のコードを使用します。私のプロジェクトで使用されています。ゾーンとリージョンには、2つのドロップダウンリストを使用しました。ゾーンデータの変更時に、Regionドロップダウンをロードしました。

表示ページ

 @Html.DropDownList("ddlZone", new SelectList(@ViewBag.Zone, "Zone_Code", "Zone_Name"), "--Select--", new { @class = "LoginDropDown" })

 @Html.DropDownList("ddlRegion", Enumerable.Empty<SelectListItem>(), new { @class = "LoginDropDown" })

ビューページのロード時に、ゾーンをロードする必要があります。

コントローラーで、Region Loadに対してこのメ​​ソッドを記述します

 [WebMethod]
        public JsonResult LoadRegion(string zoneCode)
        {
            ArrayList arl = new ArrayList();

            RASolarERPData objDal = new RASolarERPData();
            List<tbl_Region> region = new List<tbl_Region>();

            region = erpDal.RegionByZoneCode(zoneCode);

            foreach (tbl_Region rg in region)
            {
                arl.Add(new { Value = rg.Reg_Code.ToString(), Display = rg.Reg_Name });
            }

            return new JsonResult { Data = arl };
        }

次に、次のJavaScriptを使用します

<script type="text/javascript">

        $(document).ready(function () {

        $('#ddlZone').change(function () {
            LoadRegion(this.value);
        });

        function LoadRegion(zoneCode) {

            $.ajax({
                type: "POST",
                url: '@Url.Action("LoadRegion", "RSFSecurity")',
                data: "{'zoneCode':'" + zoneCode + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                cache: false,
                success: function (data) {
                    $('#ddlRegion').get(0).options.length = 0;
                    $('#ddlRegion').get(0).options[0] = new Option("--Select--", "0");

                    $.map(data, function (item) {
                        $('#ddlRegion').get(0).options[$('#ddlRegion').get(0).options.length] = new Option(item.Display, item.Value);
                    });
                },
                error: function () {
                    alert("Failed to load Item");
                }
            });
        }

    });

</script>
1
Md. Nazrul Islam

Jqueryを使用して、次のようにドロップダウンを取得および入力できます。

<script>
  function FillCity() {
    var stateId = $('#State').val();
    $.ajax({
        url: '/Employees/FillCity',
        type: "GET",
        dataType: "JSON",
        data: { State: stateId},
        success: function (cities) {                    
            $("#City").html(""); // clear before appending new list 
            $.each(cities, function (i, city) {
                $("#City").append(
                    $('<option></option>').val(city.CityId).html(city.CityName));
            });
        }
    });
  }
</script>

詳細については、 MVC DropDownListFor別のドロップダウンの選択変更の塗りつぶし を参照してください。

1
Ali Adravi