javascript - Cascading drop down list (SubLocality) not working in asp.net mvc -


i have 3 dropdown list.the first action method city drop down as---

            public actionresult create()             {         list<selectlistitem> li = new list<selectlistitem>();         li.add(new selectlistitem { text = "select city", value = "----" });         li.add(new selectlistitem { text = "faridabaad", value = "faridabaad" });         li.add(new selectlistitem { text = "greater noida", value = "greater noida" });         li.add(new selectlistitem { text = "gurgaon", value = "gurgaon" });         li.add(new selectlistitem { text = "noida", value = "noida" });         li.add(new selectlistitem { text = "new delhi", value = "new delhi" });         viewdata["city"] = li;         return view();     }

then have action method locality drop down list changes change city name this------

        public jsonresult loadlocalities(string id)     {         list<selectlistitem> localities = new list<selectlistitem>();         switch(id)         {       case"new delhi":          localities.add(new selectlistitem { text = "select locality", value = "0" });                 localities.add(new selectlistitem{ text ="east delhi", value = "1" });                     localities.add(new selectlistitem{ text ="west delhi", value = "2" });                         localities.add(new selectlistitem{ text ="north delhi", value = "3" });                         localities.add(new selectlistitem { text = "south delhi", value = "4" });                         break;                    }         return json(new selectlist(localities, "value", "text"));     }

and action method last sub locality drop down changes change in locality name this---

      public jsonresult loadsublocalities(string id)        {         list<selectlistitem> sublocalities = new list<selectlistitem>();         switch (id)         {             case"1":                 sublocalities.add(new selectlistitem { text = "select sublocality", value = "0" });                 sublocalities.add(new selectlistitem { text = "region1", value = "1" });                 sublocalities.add(new selectlistitem { text = "region2", value = "2" });                 break;         }         return json(new selectlist(sublocalities, "value", "text"));     }

now view page this------

        <!doctype html>         <head>         <title></title> <script src="~/scripts/jquery-2.1.4.js"></script> <script src="~/scripts/jquery.unobtrusive-ajax.js"></script>     </head>  <body>  <div id="map_canvas" style="width: 800px; height: 700px; float:left"></div>   @using (html.beginform())   {     @html.antiforgerytoken()     @html.validationsummary(true)      <fieldset>         <legend>enter project details</legend>         <div class="editor-label">             @html.labelfor(model => model.city)         </div>         <div class="editor-field">             @if (viewdata.containskey("city")){             @html.dropdownlistfor(model => model.city, viewdata["city"] list<selectlistitem>, new { style = "width:250px", @class = "dropdown1"})                     @html.validationmessagefor(model => model.city)             }     </div>          <div class="editor-label">             @html.labelfor(model => model.locality)         </div>         <div class="editor-field">             @html.dropdownlist("locality", new selectlist(string.empty,"value","text"),"please select locality", new { style = "width:250px", @class = "dropdown1" })             @html.validationmessagefor(model => model.locality)         </div>         <div class="editor-label">             @html.labelfor(model => model.sublocality)         </div>         <div class="editor-field">             @html.dropdownlist("sublocality", new selectlist(string.empty, "value", "text"), "please select sub locality", new { style = "width:250px", @class = "dropdown1" })             @html.validationmessagefor(model => model.sublocality)         </div>           <p>             <input type="submit" value="save project" />            </p>            </fieldset>

now javascript code have written code fetch city controller change locality city name changes , change sub locality name change in locality name-----

        <script type="text/javascript">                 $(document).ready(function () {         $("#city").change(function () {             $("#locality").empty();             $.ajax({                 type: 'post',                 url: '@url.action("loadlocalities","project")',                 datatype: 'json',                 data: { id: $("#city").val() },                 success: function (localities) {                     $.each(localities, function (i, locality) {                         $("#locality").append('<option value="' + locality.value + '">' +                              locality.text + '</option>');                     });                 },                 error: function (ex) {                     alert('failed retreive locality.' + ex);                 }             });             return false;         })                 $("#locality").change(function () {                 $("#sublocality").empty();                 $.ajax({                     type: 'post',                     url: '@url.action("loadsublocalities")',                     datatype: 'json',                     data: { id: $("locality").val() },                     success: function (sublocalities) {                         $.each(sublocalities, function (i, sublocality) {                             $("#sublocality").append('<option value="' + sublocality.value + '">' +                                  sublocality.text + '</option>');                         });                     },                     error: function (ex) {                         alert('failed retrieve sublocality.' + ex);                     }                 });                 return false;             })             });          </script>        }

now, problem locality working fine change in city name sublocality drop down not working change in locality name---

the reason $("#locality").change(function () { not working because following line

data: { id: $("locality").val() },

return undefined. needs be

data: { id: $("#locality").val() }, // add hash

however correct approach use

data: { id: $(this).val() },

in order avoid traversing dom again element id="locality"

there numerous other issues code, particularly in respect validation , returning view if modelstate invalid

  1. when generating list<selectlistitem>, not add label option (i.e. sublocalities.add(new selectlistitem { text = "select sublocality", value = "0" });). giving label option value means valid. is, may delete @html.validationmessagefor() associated each dropdown.
  2. never give selectlist same name property binding (in case city)
  3. in loadlocalities() , loadsublocalities() methods first create list<selectlistitem> , create new selectlist (which ienumerable<selectlistitem>) unnecessary overhead. in case client has no knowledge of c# class , returning twice data across wire necessary (the selected,disabled , group properties never use). instead pass collection of anonymous objects containing 2 properties (for option value , text)

Comments

Post a Comment