asp.net mvc2 c# - fill a dropdown based on selected value in another dropdown

Question

I am trying to fill the state dropdown when user selects a country in country dropdown. I am using json. Now, i am getting the error respose - [object XMLHttpRequest].

I struck with this for a lot of time. Please don't post or provide anymore new methods, as I have followed a lot of them. So, please tell me if there is anything wrong with the following code.

Thanks in advance

My view code is

    <% using (Html.BeginForm()) {%>
    <%: Html.ValidationSummary(true) %>

    <fieldset>
        <legend>Fields</legend>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.Name) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.Name) %>
            <%: Html.ValidationMessageFor(model => model.Name) %>
        </div>

        <div class="editor-label">Country</div>
        <div class="editor-field">
            <%: Html.DropDownList("country", ViewData["countries"] as SelectList, "Select Contry")%>
        </div>

        <div class="editor-label">State</div>
        <div class="editor-field">

            <select id="state"></select>

        </div>           

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

<% } %>

<div>
    <%: Html.ActionLink("Back to List", "Index") %>
</div>

<script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>


<script type="text/javascript">

    $(document).ready(function () {

        $("#country").change(function () {

            if ($("#country").val() != "") {


                $.ajax({
                    url: 'http://localhost:52970/State/GetState',
                    data: { Sel_Country: $("#country").val() },
                    cache: false,
                    type: "POST",
                    success: function (data) {

                        alert(data.length);

                        var markup = "<option value='0'>Select City</option>";
                        for (var x = 0; x < data.length; x++) {
                            markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
                        }
                        $("#state").html(markup).show();
                    },
                    error: function (reponse) {
                        alert("error : " + reponse);
                    }
                });
            }
        });
    });

My GetState method:

    public JsonResult GetState(string Sel_Country)
    {
      //stateRepository db = new CountryService();
      JsonResult result = new JsonResult();
      var vStateList=stateRepository.GetStateByCountryId(Convert.ToInt32(Sel_Country));

        result.Data = vStateList;
        result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
        return result;
    }

possible duplicate of [Populate one dropdown based on selection in another](http://stackoverflow.com/questions/5686735/populate-one-dropdown-based-on-selection-in-another) — Chris Pratt, Dec 04 '14 at 18:13
Thanks for the comments. As Pragnesh told, I have added the GetState method with the question. — SajuPK, Dec 05 '14 at 17:21
No chris, the link you suggested is not in MVC. I just want to know if there is anything wrong with the above code. Thanks for the comment — SajuPK, Dec 05 '14 at 17:23

score 0 · Accepted Answer · edited Apr 12 '17 at 07:31

0

After a lot of searching I found that the problem was in the GetState action method. The problem was actually Circular reference. This link will tell more about the problem. I actually created a new class called StateList and made the GetState method to call the StateList class instead of regular State model class.

Thank you all.

edited Apr 12 '17 at 07:31

Community

1
1

answered Dec 31 '14 at 09:14

SajuPK

97
1
10

asp.net mvc2 c# - fill a dropdown based on selected value in another dropdown

1 Answers1