Cascading (Dependent) Country State City DropDownLists using jQuery AJAX in ASP.Net MVC

Question

I need to populate Cascading Country, State and City DropDownLists using jQuery AJAX in ASP.Net MVC.

This is the tutorial

https://www.aspsnippets.com/Articles/Cascading-Dependent-Country-State-City-DropDownLists-using-jQuery-AJAX-in-ASPNet-MVC.aspx

And working correctly.

My problem is validate these DropDownList when send the form

@Html.DropDownListFor(m => m.CountryId, Model.Countries, "[ === Select CountryId === ]", new { @Class = "textarea" })
@Html.ValidationMessageFor(m => m.CountryId, "", new { @class = "text-danger" })


@Html.DropDownListFor(m => m.StateId, Model.States, "[ === Select StateId === ]", new { @Class = "textarea" })
@Html.ValidationMessageFor(m => m.StateId, "", new { @class = "text-danger" })

In this moment if on the DropDownList no value is selected the form is validate.

How to do resolve this?

My View javascript part follow

@section Scripts {

    <script src="https://code.jquery.com/jquery-1.10.2.js"
            integrity="sha256-it5nQKHTz+34HijZJQkpNBIHsjpV8b6QzMJs9tmOBSo="
            crossorigin="anonymous"></script>

    <script type="text/javascript">

        $(function () {
            $("select").each(function () {
                if ($(this).find("option").length <= 1) {
                    $(this).attr("disabled", "disabled");
                }
            });

            $("select").change(function () {
                var value = 0;
                if ($(this).val() != "") {
                    value = $(this).val();
                }
                var id = $(this).attr("id");
                $.ajax({
                    type: "POST",
                    url: "/Home/AjaxMethod",
                    data: '{type: "' + id + '", value: "' + value + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var dropDownId;
                        var list;
                        switch (id) {
                            case "CountryId":
                                list = response.States;
                                DisableDropDown("#StateId");
                                DisableDropDown("#CityId");
                                PopulateDropDown("#StateId", list);
                                break;
                            case "StateId":
                                dropDownId = "#CityId";
                                list = response.Cities;
                                DisableDropDown("#CityId");
                                PopulateDropDown("#CityId", list);
                                break;
                        }
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });

        function DisableDropDown(dropDownId) {
            $(dropDownId).attr("disabled", "disabled");
            $(dropDownId).empty().append('<option>[ === Select CountryId === ]</option>');
        }

        function PopulateDropDown(dropDownId, list) {
            if (list != null && list.length > 0) {
                $(dropDownId).removeAttr("disabled");
                $.each(list, function () {
                    $(dropDownId).append($("<option></option>").val(this['Value']).html(this['Text']));
                });
            }
        }

    </script>
}

Answer 1

Why not implement something like this:

if ($(this).val() == "") {
    // return validation message
    return;
}
else
{
   value = $(this).val();
}