एमवीसी 4 रेजर - एक गतिशील DropDownList

Question

बनाना मैं एक दृश्य बनाने की कोशिश कर रहा हूं जिसमें दो ड्रॉपडाउनलिस्ट हैं। दूसरे DropDownList में उपलब्ध विकल्प इस बात पर निर्भर करते हैं कि उपयोगकर्ता ने पहले क्या चुना है। इस प्रकार मैं अपने दृश्य के लिए इस डेटा गुजर रहा हूँ ViewBag में:

List<SelectListItem> firstBoxChoices = ViewBag.firstBoxChoices; 
    Dictionary<string, List<SelectListItem>> secondBoxDict = ViewBag.secondBoxDict; 

पहली वस्तु पहले DropDownList लिए विकल्प है। जब उपयोगकर्ता उनमें से किसी एक का चयन करता है, तो मुझे अपने डिक्शनरी से दूसरे ड्रॉपडाउनलिस्ट के लिए विकल्पों की उचित सूची प्राप्त करने की आवश्यकता होती है। मैं सिर्फ यह नहीं समझ सकता कि इसे कैसे प्राप्त किया जाए। यदि मुझे जावास्क्रिप्ट ऑनचेंज() फ़ंक्शन में पहली ड्रॉपडाउनलिस्ट का नया चयन मिलता है, तो मेरे सी # डिक्शनरी के लिए कुंजी के रूप में इस मान का उपयोग करने का कोई तरीका नहीं लगता है।

बेशक, मैंने वेब पर यह कार्यक्षमता देखी है, इसलिए मुझे पता है कि यह किसी भी तरह से संभव होना चाहिए। इसे कैसे प्राप्त किया जा सकता है?

धन्यवाद!

Answer 1

मॉडल में सभी संभावित डेटा आइटम्स को स्टोर करने के लिए मजबूर किए बिना ऐसा करने के कुछ तरीके हैं, मेरी प्राथमिकता जावास्क्रिप्ट/JQuery का उपयोग करना है। यहाँ एक देश/राज्य व्यापक का एक उदाहरण है ड्रॉप डाउन:

<script type="text/javascript"> 
    function AppendUrlParamTokens(url, params) { 

     for (var param in params) { 
      if (params[param] == null) { 
       delete params[param]; 
      } 
     } 

     return url + "?" + jQuery.param(params); 
    } 

    function OnCountriesChange(ddl) { 
     jQuery.getJSON(AppendUrlParamTokens('@Url.Action("GetStates", "Data")', { countryId: ddl.options[ddl.selectedIndex].value }), function (result) { 
      var target = jQuery('#states_ddl'); 
      target.empty(); 
      jQuery(result).each(function() { 
       jQuery(document.createElement('option')) 
        .attr('value', this.Value) 
        .text(this.Text) 
        .appendTo(target); 
      }); 
     }); 
    }; 
</script> 

देश लटकती:

@Html.DropDownListFor(model => model.Country, new SelectList(Model.Countries, "Value", "Text", Model.PreviousCountrySelected), "(Select One)", new { id = "countries_ddl", onchange = "OnCountriesChange(this)" }) 

राज्य लटकती:

जावास्क्रिप्ट जब एक देश का चयन किया जाता राज्यों प्राप्त करने के लिए इस्तेमाल किया

Html.DropDownListFor(model => model.State, 
           Model.States != null 
             ? new SelectList(Model.States, "Value", "Text", Model.PreviousStateSelected) 
             : new SelectList(new List<SelectListItem>(), "Value", "Text"), 
           new { id = "states_ddl" }) 

राज्यों को पुनर्प्राप्त करने के लिए नियंत्रक विधि:

public ActionResult GetStates(short? countryId) 
{ 
    if (!countryId.HasValue) 
    { 
     return Json(new List<object>(), JsonRequestBehavior.AllowGet); 
    } 

    var data = GetAllStatesForCountry(countryId.Value).Select(o => new { Text = o.StateName, Value = o.StateId }); 

    return Json(data, JsonRequestBehavior.AllowGet); 
} 

विचार यह है कि ड्रॉपडाउन 1 के चयन पर आप अपने दूसरे ड्रॉपडाउन के मूल्य को पुनः प्राप्त करने के लिए AJAX का उपयोग करते हैं।

संपादित करें: निर्माण यूआरएल

Answer 2

अपना पहला चयन की .change घटना एक सर्वर विधि है कि चयनित मूल्य के आधार पर विकल्प डेटा रिटर्न को फोन करके दूसरे का चयन पॉप्युलेट करना चाहिए के लिए उपयोगिता विधि शामिल करना भूल गए। यह देखते हुए निम्न दृश्य मॉडल

public class MyModel 
{ 
    [Required(ErrorMessage = "Please select an organisation")] 
    [Display(Name = "Organisation")] 
    public int? SelectedOrganisation { get; set; } 
    [Required(ErrorMessage = "Please select an employee")] 
    [Display(Name = "Employee")] 
    public int? SelectedEmployee { get; set; } 
    public SelectList OrganisationList { get; set; } 
    public SelectList EmployeeList { get; set; } 
} 

नियंत्रक

public ActionResult Edit(int ID) 
{ 
    MyModel model = new MyModel(); 
    model.SelectedOrganisation = someValue; // set if appropriate 
    model.SelectedEmployee = someValue; // set if appropriate 
    ConfigureEditModel(model); // populate select lists 
    return View(model); 
} 

[HttpPost] 
public ActionResult Edit(MyModel model) 
{ 
    if(!ModelState.IsValid) 
    { 
    ConfigureEditModel(model); // reassign select lists 
    return View(model); 
    } 
    // save and redirect 
} 

private void ConfigureEditModel(MyModel model) 
{ 
    // populate select lists 
    model.OrganisationList = new SelectList(db.Organisations, "ID", "Name"); 
    if(model.SelectedOrganisation.HasValue) 
    { 
    var employees = db.Employees.Where(e => e.Organisation == model.SelectedOrganisation.Value); 
    model.EmployeeList = new SelectList(employees, "ID", 
    } 
    else 
    { 
    model.EmployeeList = new SelectList(Enumerable.Empty<SelectListItem>()); 
    } 
} 

[HttpGet] 
public JsonResult FetchEmployees(int ID) 
{ 
    var employees = db.Employees.Where(e => e.Organisation == ID).Select(e => new 
    { 
    ID = e.ID, 
    Name = e.Name 
    }); 
    return Json(employees, JsonRequestBehavior.AllowGet); 
} 

देखें

@model MyModel 
.... 
    @Html.LabelFor(m => m.SelectedOrganisation) 
    @Html.DropDownListFor(m => m.SelectedOrganisation, Model.OrganisationList, "-Please select-") 
    @Html.ValidationMessageFor(m => m.SelectedOrganisation) 
    @Html.LabelFor(m => m.SelectedEmployee) 
    @Html.DropDownListFor(m => m.SelectedEmployee, Model.EmployeeList, "-Please select-") 
    @Html.ValidationMessageFor(m => m.SelectedEmployee) 
.... 

स्क्रिप्ट

var url = '@Url.Action("FetchEmployees")'; 
var employees = $('SelectedEmployee'); 
$('#SelectedOrganisation').change(function() { 
    employees.empty(); 
    if(!$(this).val()) { 
    return; 
    } 
    employees.append($('<option></option>').val('').text('-Please select-')); 
    $.getJson(url, { ID: $(this).val() }, function(data) { 
    $.each(data, function(index, item) { 
     employees.append($('<option></option>').val(item.ID).text(item.Text)); 
    }); 
    }); 
});