Question

i am making an application in MVC3 where in i have many dropdowns
Now on the basis of value selected in the first dropdown the second drodown is populated.
I need to write Ajax for this and i am having a tough time doing it.

I Have my first dropdown “Select Course” and now which ever course is selected With the help of that particular Course Id the corresponding state is selected from the database.

For eg if the Course is “MCA” the states Dropdown must be populated with states such as Maharashtra,Rajasthan and soon.

I tried the Following code for Ajax but it does not work and gives me an error

  $("#Course").change(function () {
        var Courseid = $("#Course").val();
        var urlCourselocation = '@Url.Action("FetchstatebyCourse")';
        $.ajax({
            type: "POST",
            url: urlCourselocation,
            data: { id: Courseid },
            success: function (data) {
                          $('#State').empty();
                          $('#State')
                        .append($('<option>', { value: "0" })
                        .text("-- Select State --"));
                    $.each(returndata, function (key, value) {

                    $('#State')
                        .append($('<option>', { value: value.Value })
                        .text(value.Text));
                });
               }
        });
    });

and in the Controller i have wrote the following function:

 public ActionResult FetchHobbyDetailByHobbyId(int Id)
    {
        LearnerService learnerservice = new LearnerService();
        /* Here is some Code to fetch the state id from the database*/
        ICollection<ProvincialState> state = learnerservice.FetchStateByStateid(stateid);
        ViewBag.State = state;

        if (HttpContext.Request.IsAjaxRequest())
            return Json(new SelectList(
                            state,
                           "ProvincialStateID",
                           "ProvincialStateName"));
        return View();
    }

Please help me with the Code and correct me if i am wrong..

Answer 1

Oh I think I saw the issue…
shouldn’t :

 $.each(returndata, function (key, value) {

be

 $.each(data, function (key, value) {