web-dev-qa-db-fra.com

sur certains événements de modification - Html.DropDownListFor

J'ai deux listes déroulantes. La valeur sélectionnée dans la première charge l'autre. Comment dois-je procéder lorsque j'ai les méthodes d'assistance dans un contrôleur?

@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

Donnez aux deux listes déroulantes des ID uniques à l'aide du champ HTTPAttributes:

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

La deuxième liste déroulante doit être initialisée comme une liste vide:

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

Si cela ne vous dérange pas d'utiliser jQuery ajax pour mettre à jour la 2ème liste déroulante lorsqu'un événement de "changement" est déclenché sur la 1ère liste déroulante:

$(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>');
                    });
                });
            }
        });
    });
});

Ajoutez cette classe à l'espace de noms de votre contrôleur:

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

Vous devrez mettre à jour l'action de votre contrôleur, LoadTerritoryManagers (), pour répondre à la demande ajax et renvoyer un tableau JSON d'objets {Id, Name}.

    [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

Utilisez le code suivant. Il est utilisé dans mon projet. Pour la zone et la région, j'ai utilisé deux listes déroulantes. Lors du changement des données de zone, j'ai chargé la liste déroulante Région.

Dans la page Afficher

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

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

La zone doit se charger lorsque la page d'affichage est chargée.

Dans le contrôleur, écrivez cette méthode pour la charge de région

 [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 };
        }

Utilisez ensuite le code JavaScript suivant

<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

Nous pouvons utiliser jquery pour obtenir et remplir la liste déroulante comme ceci:

<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>

Pour plus de détails, voir MVC DropDownListFor remplir lors du changement de sélection d'une autre liste déroulante

1
Ali Adravi