[RESOLVED]Cascade DropDownList Doesnt Work

First DropdownList works but Second and Third doesnt work Please Help !

@model BorsaYemek.Models.RegisterViewModel
@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title.</h2>
<script type="text/javascript">
    $(document).ready(function () {
        $("#ddlSehirs").change(function () {
            var sehirId = $(this).val();
            $.getJSON("/Account/LoadIlcesBySehirId", { sehirid: sehirId },
                   function (ilcesData) {
                       var select = $("#ddlIlces");
                       select.empty();
                       select.append($('<option/>', {
                           value: 0,
                           text: "Select a Sehir"
                       }));
                       $.each(ilcesData, function (index, itemData) {
                           select.append($('<option/>', {
                               value: itemData.Value,
                               text: itemData.Text
                           }));
                       });
                   });
        });
        $("#ddlIlces").change(function () {
            var ilceId = $(this).val();
            $.getJSON("/Account/LoadSemtsByIlceId", { ilceid: ilceId },
                   function (semtsData) {
                       var select = $("#ddlSemts");
                       select.empty();
                       select.append($('<option/>', {
                           value: 0,
                           text: "Select a Ilce"
                       }));
                       $.each(semtsData, function (index, itemData) {
                           select.append($('<option/>', {
                               value: itemData.Value,
                               text: itemData.Text
                           }));
                       });
                   });
        });
    });

</script>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account.</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.UyeAd, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UyeAd, new { @class = "form-control" })
        </div>
    </div>

    <p>
            @Html.DropDownListFor(model => Model.UyeSehir, new SelectList(ViewBag.Sehirs as System.Collections.IEnumerable, "Id", "SehirAd"),
            "Select a Student", new { id = "ddlSehirs" })
        </p>
        <p>
            @Html.DropDownListFor(model => Model.UyeIlce, new SelectList(Enumerable.Empty<SelectListItem>(), "Id", "IlceAd"),
            "Select a Class", new { id = "ddlIlces" })
        </p>
        <p>
            @Html.DropDownListFor(model => Model.UyeSemt, new SelectList(Enumerable.Empty<SelectListItem>(), "Id", "SemtAd"),
            "Select a Mark", new { id = "ddlSemts" })
        </p>
    
    @*<div class="form-group">
        @Html.LabelFor(model => model.SehirId, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
                @Html.DropDownListFor(model=>model.SehirId, Model.AvailableSehirs, new { @class = "form-control" })
            </div>
    </div>
    <div class="form-group">
                @Html.LabelFor(model => model.IlceId, new { @class = "col-md-2 control-label" })
                  <div class="col-md-10">
                       @Html.DropDownListFor(model => model.IlceId, Model.AvailableIlces, new { @class = "form-control" })
                <span id="states-loading-progress" style="display: none;">Please wait..</span>
                  </div>
            </div>*@

    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

@section Scripts {
    @*@Scripts.Render("/bundles/jquery")*@
    @Scripts.Render("~/bundles/jqueryval")
}

than my Models page

namespace BorsaYemek.Models
{

    public class RegisterViewModel
    {
        public RegisterViewModel()
        {
            
        }

        [Required]
        [EmailAddress]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [Required]
        [Display(Name = "Ad")]
        public string UyeAd { get; set; }

        

        [Display(Name = "Sehir")]
        public string UyeSehir { get; set; }

        [Display(Name = "İlçe")]
        public string UyeIlce { get; set; }

        [Display(Name = "Semt")]
        public string UyeSemt { get; set; }

        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [System.ComponentModel.DataAnnotations.Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }
    }


}

My Database 

http://sendfile.cc/GE2TKMI

And My AccountControllers

// GET: /Account/Register
        [AllowAnonymous]
        public ActionResult Register()
        {
            ViewBag.Sehirs = _db.Sehirs.ToList();
            ViewBag.Ilces = _db.Ilces.ToList();
            ViewBag.Semts = _db.Semts.ToList();

            return View();
        }

        private IEnumerable<Ilce> GetIlces(int sehirId)
        {
            return _db.Ilces.Where(m => m.Id == sehirId).ToList();
        }

        private IEnumerable<Semt> GetSemts(int ilceId)
        {
            return _db.Semts.Where(c => c.Id == ilceId).ToList();
        }

        public JsonResult LoadIlcesBySehirId(string sehirId)
        {
            var ilcesList = this.GetIlces((Convert.ToInt32(sehirId)));
            var ilcesData = ilcesList.Select(m => new SelectListItem()
            {
                Text = m.IlceAd,
                Value = m.Id.ToString(),
            });

            return Json(ilcesData, JsonRequestBehavior.AllowGet);
        }

     

        public JsonResult LoadSemtsByIlceId(string ilceId)
        {
            var semtsList = this.GetSemts(Convert.ToInt32(ilceId));
            var semtsData = semtsList.Select(c => new SelectListItem()
            {
                Text =c.SemtAd,
                Value = c.Id.ToString(),
            });

            return Json(semtsData, JsonRequestBehavior.AllowGet);
        }

Thank you for your help

insanadair

$("#ddlSehirs").change(function () {
  $(document).on("change","#ddlSehirs",function () {


insanadair

 $("#ddlIlces").change(function () {
 $(document).on("change","#ddlIlces",function () {

I changed but it doesnt work ?

Try changing the way you append like

insanadair

select.append($('<option/>', {
                           value: 0,
                           text: "Select a Ilce"
                       }));

to something like

select.append("<option value='0'>Select a Ilce</option>");

It doesnt work 

@model BorsaYemek.Models.RegisterViewModel
@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title.</h2>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(document.body).on("change", "#ddlSehirs", function () {
                var sehirId = $(this).val();
                $.getJSON("../Account/LoadIlcesBySehirId", { sehirid: sehirId },
                    function (ilcesData) {
                        var select = $("#ddlIlces");
                        select.empty();
                        select.append("<option value='0'>Select a Sehir</option>");
                        //select.append($('<option/>', {
                        //    value: 0,
                        //    text: "Select a Sehir"
                        //}));
                        $.each(ilcesData, function (index, itemData) {
                            select.append($('<option/>', {
                                value: itemData.Value,
                                text: itemData.Text
                            }));
                        });
                    });
            });
            $(document.body).on("change", "#ddlIlces", function () {
                var ilceId = $(this).val();
                $.getJSON("../Account/LoadSemtsByIlceId", { ilceid: ilceId },
                    function (semtsData) {
                        var select = $("#ddlSemts");
                        select.empty();
                        select.append("<option value='0'>Select a Ilce</option>");
                        //select.append($('<option/>', {
                        //    value: 0,
                        //    text: "Select a Ilce"
                        //}));
                        $.each(semtsData, function (index, itemData) {
                            select.append($('<option/>', {
                                value: itemData.Value,
                                text: itemData.Text
                            }));
                        });
                    });
            });
        });

</script>


@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account.</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.UyeAd, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UyeAd, new { @class = "form-control" })
        </div>
    </div>

    <p>
            @Html.DropDownListFor(model => Model.UyeSehir, new SelectList(ViewBag.Sehirs as System.Collections.IEnumerable, "Id", "SehirAd"),
         "Select a Sehir", new { id = "ddlSehirs" })
        </p>
        <p>
            @Html.DropDownListFor(model => Model.UyeIlce, new SelectList(Enumerable.Empty<SelectListItem>(), "Id", "IlceAd"),
         "Select a Ilce", new { id = "ddlIlces" })
        </p>
        <p>
            @Html.DropDownListFor(model => Model.UyeSemt, new SelectList(Enumerable.Empty<SelectListItem>(), "Id", "SemtAd"),
            "Select a Semt", new { id = "ddlSemts" })
        </p>
    
    @*<div class="form-group">
        @Html.LabelFor(model => model.SehirId, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
                @Html.DropDownListFor(model=>model.SehirId, Model.AvailableSehirs, new { @class = "form-control" })
            </div>
    </div>
    <div class="form-group">
                @Html.LabelFor(model => model.IlceId, new { @class = "col-md-2 control-label" })
                  <div class="col-md-10">
                       @Html.DropDownListFor(model => model.IlceId, Model.AvailableIlces, new { @class = "form-control" })
                <span id="states-loading-progress" style="display: none;">Please wait..</span>
                  </div>
            </div>*@

    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

@section Scripts {
    @*@Scripts.Render("/bundles/jquery")*@
    @Scripts.Render("~/bundles/jqueryval")
}

Database Table

http://sendfile.cc/GE2TKNA

Register Web Page

http://sendfile.cc/GE2TKNI

Please help

You only changed the first item. Change also the other options.

Ex.

insanadair

$.each(semtsData, function (index, itemData) {
                            select.append($('<option/>', {
                                value: itemData.Value,
                                text: itemData.Text
                            }));
                        });
$.each(semtsData, function (index, itemData) {
                            select.append("<option value='" + itemData.Value + "'>" + itemData.Text + "</option>");
                        });

I also noticed your url in using $.getJSON:

insanadair

$.getJSON("../Account/LoadIlcesBySehirId", { sehirid: sehirId },

try also to make use of @Url.Action("LoadIlcesBySehirId", "Account") since there is also a possibility that it’s not getting the correct path.

I used this

$.getJson('@Url.Action("LoadIlcesBySehirId", "Account")', { sehirid: sehirId },

Have a script error

Same problem http://sendfile.cc/GE2TKNI 

What is problem I dont understand ! Maybe change property doesnt work. I click select a sehir item but it doesnt work selct ilces item. Not trigger ddlIlces

Anybody there ? Please help me ! 

Resolved my problem. Problem is added [AllowAnonymous] attribute on JsonResult methods Because Sends link is not correct.  Added [AllowAnonymous] attribute resolved problems

        [AllowAnonymous]
        public JsonResult LoadIlcesBySehirId(string sehirId)
        {
            var ilcesList = this.GetIlces((Convert.ToInt32(sehirId)));
            var ilcesData = ilcesList.Select(m => new SelectListItem()
            {
                Text = m.IlceAd,
                Value = m.Id.ToString(),
            });

            return Json(ilcesData, JsonRequestBehavior.AllowGet);
        }


        [AllowAnonymous]
        public JsonResult LoadSemtsByIlceId(string ilceId)
        {
            var semtsList = this.GetSemts(Convert.ToInt32(ilceId));
            var semtsData = semtsList.Select(c => new SelectListItem()
            {
                Text =c.SemtAd,
                Value = c.Id.ToString(),
            });

            return Json(semtsData, JsonRequestBehavior.AllowGet);
        }

Leave a Reply