jquery - Come creare un elenco a discesa a cascata



asp.net asp.net-mvc (1)

Ho due elenchi a discesa a scopo di filtraggio. Come posso modificare questo elenco a discesa in elenco a discesa di cattura

 public ActionResult Index()
    {
        REFINED_DBEntities db = new REFINED_DBEntities();
        ViewBag.Subdivision =
            new SelectList(db.Retention_Model_Predictions_DS_Manual.Select(m => m.Subdivision).Distinct().OrderBy(c=>c.ToUpper()),

            "Subdivision");

        ViewBag.UnderwriterName =
            new SelectList(db.Retention_Model_Predictions_DS_Manual.Select(m => m.Underwriter_Name).Distinct(),

                "Underwriter_Name");
        return View();
    }

Visualizzazione HTML

<div class="form-group ">
    @Html.DropDownList("Subdivision", (IEnumerable<SelectListItem>)ViewBag.Subdivision, "Select Region", new { @class = "form-control", @id = "subDivision" })

</div>

<div class="form-group ">
    @Html.DropDownList("Underwriter_Name", (IEnumerable<SelectListItem>)ViewBag.UnderwriterName, "Select Underwriter", new { @class = "form-control", @id = "uwriter" })
</div>

L'idea del menu a discesa a cascata è che si seleziona un valore nel primo menu a discesa e si innesca un'azione per caricare le opzioni per un secondo menu a discesa. Un esempio classico è il menu a discesa Paese e il menu a discesa Stato. Ogni volta che l'utente seleziona un paese, l'elenco a discesa del paese deve essere aggiornato con gli stati in quel paese.

Ti fornirò un esempio molto generico del caso d'uso Paese-Stato. Puoi usare gli stessi concetti per creare il tuo caso d'uso specifico

Per cominciare, crea un modello di vista per la tua vista. Creare una proprietà di tipo List<SelectListItem> per passare l'elenco di opzioni necessarie per creare l'elemento SELECT e un'altra proprietà per memorizzare il valore dell'opzione selezionata. Lo faremo per entrambi gli elementi SELECT.

public class CreateUserVm
{
   public List<SelectListItem> Countries { set;get;}
   public int SelectedCountryId { set;get;}

   public List<SelectListItem> States { set;get;}
   public int SelectedStateId { set;get;}  

   public CreateUserVm()
   {
     this.Countries = new List<SelectListItem>();
     this.States = new List<SelectListItem>();
   }  
}

Ora nel tuo metodo di azione GET, crea un oggetto di questo modello di vista, inizializza le opzioni per il primo menu a discesa, in questo caso la proprietà Countries e invialo alla vista.

public ActionResult Create()
{ 
    var vm=new CreateUserVm();
    vm.Countries = GetCountries();
    return View(vm);
}
private List<SelectListItem> GetCountries()
{
    var list = new List<SelectListItem>
    {
        new SelectListItem() {Value = "1", Text = "USA"},
        new SelectListItem() {Value = "2", Text = "India"},
    };
    return list;
}

Ora nella tua vista, che è fortemente tipizzata per il nostro modello di vista. useremo il metodo helper DropDownListFor per eseguire il rendering dei menu a discesa

@model CreateUserVm
@using (Html.BeginForm("Index", "Home"))
{
   @Html.DropDownListFor(a=>a.SelectedCountryId,Model.Countries,"Select one")
   @Html.DropDownListFor(a => a.SelectedStateId, Model.States, "Select one",
                                              new { data_url = Url.Action("GetStates") })
   <input type="Submit" />
}

Ciò visualizzerà 2 menu a discesa, uno con le opzioni Country e il secondo sarà vuoto (perché non abbiamo caricato nulla nella proprietà States ). Ora avremo un po 'di javascript (stiamo usando jquery qui per una facile manipolazione del DOM) che ascolterà l'evento di change del primo menu a discesa (Paese), leggerà il valore selezionato ed effettuerà una chiamata GetStates metodo GetStates e passando il valore dell'opzione paese selezionato.

Puoi vederlo, ho impostato un attributo di dati html5 per il secondo menu a discesa in cui sto memorizzando l'URL nel metodo GetStates . Quindi nel mio javascript, posso semplicemente leggere questo valore dell'attributo di dati ed effettuare una chiamata a quell'URL per ottenere i dati.

$(function () {
    $("#SelectedCountryId").change(function () {
        var v = $(this).val();
        var url = $("#SelectedStateId").data("url") + '?countryId=' + v;
        var $states = $("#SelectedStateId");
        $.getJSON(url, function (states) {
                $states.empty();
                $.each(states, function (i, item) {
                    $states.append($("<option>").text(item.Text).val(item.Value));
                });
            });    
    });
});

Ora, aggiungiamo un metodo di azione GetStates che accetta countryId e restituisce gli stati per quel paese in un elenco di SelectListItem come array JSON.

public ActionResult GetStates(int countryId)
{
    var states = new List<SelectListItem>();
    if (countryId == 1)
    {
        states.Add(new SelectListItem() {Value = "101", Text = "Michigan"});
        states.Add(new SelectListItem() { Value = "102", Text = "New York" });
    }
    else if (countryId == 2)
    {
        states.Add(new SelectListItem() { Value = "103", Text = "Kerala" });
        states.Add(new SelectListItem() { Value = "104", Text = "Goa" });

    }
    return Json(states, JsonRequestBehavior.AllowGet);
}

Qui ho hard coded i Paesi e gli Stati. Ma se si dispone di un database che contiene questi dati, sostituire i valori codificati con i dati delle tabelle.

Quando si modifica un record, è sufficiente caricare la proprietà States nell'azione GET in base al CountryId che viene salvato.





asp.net-mvc