locked
Casecading Drop Down in Edit View wont work RRS feed

  • Question

  • User739135361 posted

    Hi,

    I have a Country and State drop down in a edit view. As usual, I want to populate States based on Country selected ( by calling Ajax method to get states). This works fine in Create View. Same code is in edit view plus a model object which holds a Country and State ID. 

    Problem is in Edit View Countries get binded (as they are directly getting values before rendering views) and even the choosen country is selected. However, the states drop down dosent work. Infact nothing is binding to it. 

    Edit View

    In Create View things work fine,

    Whats wrong? Dont worry about syntax errors if any... its a working code except states not getting populated in Edit mode only. It works fine if I change item in drop down. 

    <select id="Country" class="dropdown" name="Country">
    <option value="0">Select</option>
    @{
    foreach (var c in ViewBag.Country)
    {
    if (c.Value == Model.Country.CountryID.ToString())
    {
    <option value="@c.Value" selected="selected">@c.Text</option>
    }
    <option value="@c.Value">@c.Text</option>
    }
    }
    </select>

    State Drop down

    <select id="State" class="dropdown" name="State">
    <option value="0">Select</option>
    </select>

    JQuery Method : 

    $("#Country").change(function () {
    debugger;
    // Resetting State and City on change of Country
    $("#State").empty();
    $("#State").append('<option value="' + 0 + '">' + "Select" + '</option>');
    $("#City").empty();
    $("#City").append('<option value="' + 0 + '">' + "Select" + '</option>');
    $.ajax({
    type: 'POST',
    url: '@Url.Action("GetStates")', // Calling json method
    dataType: 'json',
    data: { id: $("#Country").val() },
    // Get Selected Country ID.
    success: function (States) {
    if (States.length > 0) { // Binding States if their are any
    $.each(States, function (i, state) {
    $("#State").append('<option value="' + state.StateID + '">' +
    state.StateName + '</option>');
    });
    }
    else
    {// Else binding a Default option
    $("#State").empty();
    $("#State").append('<option value="' + 0 + '">' + "Select" + '</option>');
    $("#State").append('<option value="' + 8183 + '">' +'Others' + '</option>');
    }
    },
    error: function (ex) {
    alert('Failed to retrieve states.' + ex);
    }
    });
    return false;
    })

    Regards,

    Nizam

     

    Saturday, June 22, 2019 3:57 PM

Answers

  • User1520731567 posted

    Hi N1ZAM,

    Problem is in Edit View Countries get binded (as they are directly getting values before rendering views) and even the choosen country is selected. However, the states drop down dosent work. Infact nothing is binding to it. 

    Do you mean your  states drop down didn't show the right list corresponding to Country drop down?

    As I can see in your javascript code,I saw you used change function,but it can't be triggered in Initialization function,

    Because Country drop down has value with id in Page initialization,and it can't be changed in initialization.

    So I suggest you could make ajax method in Initialization function, for example:

    <script type="text/javascript">
        $(function () {
          //$("#Country").change(function () {
            // Resetting State and City on change of Country
            $("#State").empty();
            $("#State").append('<option value="' + 0 + '">' + "Select" + '</option>');
            $("#City").empty();
            $("#City").append('<option value="' + 0 + '">' + "Select" + '</option>');
            $.ajax({
            type: 'POST',
            url: '@Url.Action("GetStates")', // Calling json method
            dataType: 'json',
            data: { id: $("#Country").val() },
            // Get Selected Country ID.
            success: function (States) {
            if (States.length > 0) { // Binding States if their are any
            $.each(States, function (i, state) {
            $("#State").append('<option value="' + state.StateID + '">' +
            state.StateName + '</option>');
            });
            }
            else
            {// Else binding a Default option
            $("#State").empty();
            $("#State").append('<option value="' + 0 + '">' + "Select" + '</option>');
            $("#State").append('<option value="' + 8183 + '">' +'Others' + '</option>');
            }
            },
            error: function (ex) {
            alert('Failed to retrieve states.' + ex);
            }
            });
            return false;
            //})
        })
    </script>
    

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 24, 2019 7:29 AM
  • User739135361 posted

    True.  In create view, I am only binding Countries drop down. Others (i.e. state ,cities) are to binded on the go based on users choice. In edit view, we are recreating what use has already selected. Hence not just Contries, State and Cities values needs to be binded from back end based on values coming from DB  and select the appropriate state and city.  The js script will only work if changes to countries dropd down is done. 

    Though the js remains as it is in edit, cod behind and html changes a bit. 

     <select id="State" class="dropdown" name="State">
    <option value="0">Select</option>
    @{
    foreach (var s in ViewBag.States)
    {
    if (s.StateID == Model.State.StateID)
    {
    <option value="@s.StateID" selected="selected">@s.StateName</option>
    }
    <option value="@s.StateID">@s.StateName</option>
    }
    }
    </select> 

    Code in Action method : 

    Country c = new Country();
    c.CountryID = Convert.ToInt32(Profile.Country.CountryID); //NOTE: Profile.Country.CountryID IS THE OBJECT HOLDING VALUES STORED FOR THIS PROFILE.
    List<State> States = balState().getstates(c);
    ViewBag.States = States;

    Same will be the case for cities as well. Sharing it to help others if they face similar issues.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 27, 2019 7:17 AM

All replies

  • User-474980206 posted
    the Edit server code should check if a country is selected, and if so build the state list and select the state based on the posted state value, just like you do country.
    Saturday, June 22, 2019 4:26 PM
  • User1520731567 posted

    Hi N1ZAM,

    Problem is in Edit View Countries get binded (as they are directly getting values before rendering views) and even the choosen country is selected. However, the states drop down dosent work. Infact nothing is binding to it. 

    Do you mean your  states drop down didn't show the right list corresponding to Country drop down?

    As I can see in your javascript code,I saw you used change function,but it can't be triggered in Initialization function,

    Because Country drop down has value with id in Page initialization,and it can't be changed in initialization.

    So I suggest you could make ajax method in Initialization function, for example:

    <script type="text/javascript">
        $(function () {
          //$("#Country").change(function () {
            // Resetting State and City on change of Country
            $("#State").empty();
            $("#State").append('<option value="' + 0 + '">' + "Select" + '</option>');
            $("#City").empty();
            $("#City").append('<option value="' + 0 + '">' + "Select" + '</option>');
            $.ajax({
            type: 'POST',
            url: '@Url.Action("GetStates")', // Calling json method
            dataType: 'json',
            data: { id: $("#Country").val() },
            // Get Selected Country ID.
            success: function (States) {
            if (States.length > 0) { // Binding States if their are any
            $.each(States, function (i, state) {
            $("#State").append('<option value="' + state.StateID + '">' +
            state.StateName + '</option>');
            });
            }
            else
            {// Else binding a Default option
            $("#State").empty();
            $("#State").append('<option value="' + 0 + '">' + "Select" + '</option>');
            $("#State").append('<option value="' + 8183 + '">' +'Others' + '</option>');
            }
            },
            error: function (ex) {
            alert('Failed to retrieve states.' + ex);
            }
            });
            return false;
            //})
        })
    </script>
    

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 24, 2019 7:29 AM
  • User739135361 posted

    True.  In create view, I am only binding Countries drop down. Others (i.e. state ,cities) are to binded on the go based on users choice. In edit view, we are recreating what use has already selected. Hence not just Contries, State and Cities values needs to be binded from back end based on values coming from DB  and select the appropriate state and city.  The js script will only work if changes to countries dropd down is done. 

    Though the js remains as it is in edit, cod behind and html changes a bit. 

     <select id="State" class="dropdown" name="State">
    <option value="0">Select</option>
    @{
    foreach (var s in ViewBag.States)
    {
    if (s.StateID == Model.State.StateID)
    {
    <option value="@s.StateID" selected="selected">@s.StateName</option>
    }
    <option value="@s.StateID">@s.StateName</option>
    }
    }
    </select> 

    Code in Action method : 

    Country c = new Country();
    c.CountryID = Convert.ToInt32(Profile.Country.CountryID); //NOTE: Profile.Country.CountryID IS THE OBJECT HOLDING VALUES STORED FOR THIS PROFILE.
    List<State> States = balState().getstates(c);
    ViewBag.States = States;

    Same will be the case for cities as well. Sharing it to help others if they face similar issues.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 27, 2019 7:17 AM
  • User1520731567 posted

    Hi N1ZAM,

    I am glad that you share your code and ideas.

    I suggest you could mark yourself or other reply that is helpful as answer.

    This will help searching and help other people who faces the same issue.

    Thank you very much.

    Best Regards.

    Yuki Tao

    Thursday, June 27, 2019 9:39 AM