javascript - need help to resolve - Uncaught ReferenceError: data is not defined -

i know there many questions/tutorials subject, cannot solve problem. have ask help. second day cannot find out solution simple problem.

i trying in tutorial - http://www.c-sharpcorner.com/uploadfile/abhikumarvatsa/cascading-dropdownlist-in-asp-net-mvc/ working fine, once try db, getting error "uncaught referenceerror: data not defined"

here web page

@model testempty.models.address  @{     viewbag.title = "create"; }  @scripts.render("~/bundles/jquery") <script src="~/scripts/myscripts/myscripts.js"></script>  <h2>create</h2>   @using (html.beginform())  {     @html.antiforgerytoken()      <div class="form-horizontal">         <h4>address</h4>         <hr />         @html.validationsummary(true, "", new { @class = "text-danger" })  <div class="form-group col-md-10">             @html.label("zone")             @html.dropdownlist("zoneid", viewbag.zonename selectlist, "--select zone--", new { id = "zoneid" })             @html.validationmessage("zone", "*")         </div>              <div class="form-group">                 <div class="col-md-10">                     @html.label("districts of sz")                     <select id="districtsz" name="districtsz"></select>                 </div>             </div> <div class="form-group">                 <div class="col-md-offset-2 col-md-10">                     <input type="submit" value="create" class="btn btn-default" />                 </div>             </div>         </div> }  <div>     @html.actionlink("back list", "index") </div>  @section scripts {     @scripts.render("~/bundles/jqueryval") } 

controller

private mycontext db = new mycontext();  // get: addresses public actionresult index() {     var zones = db.addresses.include(a => a.zone);      viewbag.zonename = new selectlist(zones, "value", "text");      return view(zones.tolist()); }  public jsonresult districtlist(int id) {     var district = s in db.districts                    s.zoneid == id                    select s;      return json(new selectlist(district.toarray(), "zoneid", "name"), jsonrequestbehavior.allowget); } 

script

$(function () {     $('#zoneid').change(function () {         $.getjson('districtlist/' + $('#zoneid').val(), getdistricts (data));     }); });  function getdistricts(data) {     var items = '<option>select district</option>';     $.each(data, function (i, district) {         items += "<option value='" + district.value + "'>" + district.text + "</option>";     });     $('#districtsz').html(items); } 

as understand, problem json. doing wrong?

you're passing returned value of getdistricts callback variable of $.getjson.

$.getjson('districtlist/' + $('#zoneid').val(), getdistricts (data)); 

you need pass function reference this

$.getjson('districtlist/' + $('#zoneid').val(), getdistricts);