级联下拉验证在MVC Razor中失败

Question

Problem Statement:

I have created a cascading dropdown for Country and State using Jquery and Json,everything is working fine.I'm able to bind data for Country and data for State on change event of Country.Only problem what i'm facing is cascading validation for Country and State.

On opening the View iff I click create button without selecting/entering any values for the controls it is showing validation message for all.If i select Country and click create, it is not showing validation message for state even if no value is selected for State.

What i'm doing wrong?? I think i'm doing something wrong in Script part of the view !!!

Please see the attached images for more details:

Image 1 : When I click create button it is showing validations for all controls.

Image 2 : After selecting Country drop-down if i click create button,validation for state is not appearing why??

View Code:

<div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.cityModel.CountryID, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.cityModel.CountryID, new SelectList(Model.ddlCountryStateCity.ddlCountry, "Value", "Text"), "Select Country", new { id="CountryID",onchange="GetddlState()",@class = "form-control"})
                @Html.ValidationMessageFor(model => model.cityModel.CountryID)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.cityModel.StateID, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.cityModel.StateID, new SelectList(Model.ddlCountryStateCity.ddlState, "Value", "Text"), "Select State", new { id="StateID",@class = "form-control" })
                @Html.ValidationMessageFor(model => model.cityModel.StateID)
            </div>
        </div>

        <div class="form-group">
              @Html.LabelFor(model => model.cityModel.CityID, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                 @Html.TextBoxFor(model => model.cityModel.CityID, new { @class = "form-control" })
                 @Html.ValidationMessageFor(model => model.cityModel.CityID)
            </div>
        </div>

         <div class="form-group">
               @Html.LabelFor(model => model.cityModel.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                 @Html.TextBoxFor(model => model.cityModel.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.cityModel.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>

Script Code:

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    function GetddlState() {
        $("#StateID").empty();
        $("#StateID").append("<option value='0'>Select State</option>");
        var countryID = $('#CountryID').val();
        var Url = "@Url.Content("~/MasterConfigGeneral/GetddlState")";
        $.ajax({
            url: Url,
            dataType: 'json',
            data: { CountryID: countryID },
            success: function (data) {
                $("#StateID").empty();
                $("#StateID").append("<option value='0'>Select State</option>");
                $.each(data, function (index, optiondata) {
                    $("#StateID").append("<option value='" + optiondata.Value + "'>" + optiondata.Text + "</option>");
                });
            }
        });
    }

 </script>
}

Answer 1

Try This:

 @section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
      <script type="text/javascript">
         function GetddlState() {
         var countryID = $('#CountryID').val();
         var Url = "@Url.Content("~/MasterConfigGeneral/GetddlState")";
         $.ajax({
           url: Url,
           dataType: 'json',
           data: { CountryID: countryID },
           success: function (data) {
            $("#StateID").empty();
            $("#StateID").append("<option value='' selected='selected'>Select State</option>");
            $.each(data, function (index, optiondata) {
            $("#StateID").append("<option value='" + optiondata.Value + "'>" + optiondata.Text + "</option>");
            });
        }
    });
 }

</script>
}

Answer 2

             type: "POST",
            data: JSON.stringify({"id": idd}),
            contentType: "application/json; charset=utf-8",

Adding these three parameters under $.ajax will solve the problem