jquery कैस्केडिंग ड्रॉप-डाउन सूची कैसे बनाएं



asp.net asp.net-mvc (1)

मेरे पास फ़िल्टरिंग उद्देश्य के लिए दो ड्रॉपडाउन सूची है। मैं इस ड्रॉपडाउन सूची को कैसेटैकडाउनिंग ड्रॉपडलिस्ट में बदल सकता हूं

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

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>

कैस्केडिंग ड्रॉप-डाउन का विचार है, आप पहली ड्रॉप-डाउन में एक मूल्य का चयन करते हैं, और यह दूसरी ड्रॉप-डाउन के लिए विकल्पों को लोड करने के लिए कुछ क्रिया को ट्रिगर करता है। एक क्लासिक उदाहरण है कंट्री ड्रॉप-डाउन डाउन और स्टेट ड्रॉप-डाउन। जब भी उपयोगकर्ता किसी देश का चयन करता है, तो उस देश के अंतर्गत आने वाले राज्यों के साथ देश ड्रॉप-डाउन अपडेट किया जाना चाहिए।

मैं आपको देश-राज्य उपयोग के मामले का एक बहुत ही सामान्य उदाहरण देने जा रहा हूं। आप अपने विशिष्ट उपयोग के मामले का निर्माण करने के लिए समान अवधारणाओं का उपयोग कर सकते हैं

शुरू करने के लिए, अपने दृश्य के लिए एक दृश्य मॉडल बनाएं। चयनित तत्व मान संग्रहीत करने के लिए SELECT तत्व और अन्य गुण बनाने के लिए आवश्यक विकल्पों की सूची पास करने के लिए टाइप करें List<SelectListItem> की एक संपत्ति बनाएँ। हम इसे दोनों सेलेक्ट तत्वों के लिए करेंगे।

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

अब अपनी GET एक्शन विधि में, इस व्यू मॉडल का एक ऑब्जेक्ट बनाएं, पहले ड्रॉपडाउन के विकल्पों को इनिशियलाइज़ करें, इस मामले में Countries प्रॉपर्टी और व्यू में भेजें।

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

अब आपके विचार में, जो हमारे व्यू मॉडल पर दृढ़ता से टाइप किया गया है। हम ड्रॉप-डाउन को रेंडर करने के लिए ड्रॉपडाउन DropDownListFor हेल्पर विधि का उपयोग करेंगे

@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" />
}

यह 2 ड्रॉपडाउन को प्रस्तुत करेगा, एक Country विकल्पों के साथ और दूसरा खाली होगा (क्योंकि हमने States प्रॉपर्टी को कुछ भी लोड नहीं किया था)। अब हमारे पास कुछ जावास्क्रिप्ट होगी (हम आसान डोम हेरफेर के लिए यहां jquery का उपयोग कर रहे हैं) जो पहली ड्रॉप-डाउन (देश) के change घटना को सुनेगा, चयनित मूल्य को GetStates और GetStates विधि के लिए एक अजाक्स कॉल GetStates और पास करेगा चयनित देश विकल्प मान।

आप देख सकते हैं कि, मैं दूसरी ड्रॉपडाउन के लिए एक html5 डेटा विशेषता सेट करता हूं जहां मैं GetStates को GetStates विधि में संग्रहीत कर रहा GetStates । इसलिए मेरी जावास्क्रिप्ट में, मैं केवल इस डेटा विशेषता मान को पढ़ सकता हूं और डेटा प्राप्त करने के लिए उस url पर कॉल कर सकता हूं।

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

अब, एक GetStates एक्शन विधि जोड़ें जो countryId स्वीकार करता है और JSON सरणी के रूप में SelectListItem सूची में उस देश के लिए राज्यों को वापस करता है।

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

यहां मैंने देशों और राज्यों को हार्ड कोड दिया है। लेकिन अगर आपके पास एक डेटाबेस है जिसमें यह डेटा है, तो अपनी तालिकाओं के डेटा के साथ हार्ड कोडित मूल्यों को बदलें।

जब आप कोई रिकॉर्ड संपादित कर रहे होते हैं, तो आपको केवल इतना करना होता है कि States प्रॉपर्टी को उस GET एक्शन में लोड करें, जो उस कंट्रीआईड पर आधारित है, जो सेव है।





asp.net-mvc