Javascript MVC Razor中的级联下拉验证失败

问题陈述：

<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>

@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>
}

我使用Jquery和Json为国家和州创建了一个级联下拉列表，一切正常。我能够在国家的更改事件中绑定国家和州的数据。我面临的唯一问题是国家和州的级联验证

打开视图iff时，我单击“创建”按钮，但没有为控件选择/输入任何值，它将显示所有控件的验证消息。如果我选择“国家”并单击“创建”，则即使没有为状态选择任何值，它也不会显示状态的验证消息

我做错了什么？？我想我在视图的脚本部分做错了什么

有关详细信息，请参阅所附图片：

<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>

@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>
}

图1:当我单击“创建”按钮时，它会显示所有控件的验证

图2:选择国家/地区下拉列表后，如果单击“创建”按钮，则不会出现状态验证为什么

查看代码：

<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>

@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>
}

@Html.ValidationSummary（true）
@LabelFor（model=>model.cityModel.CountryID，新的{@class=“controllabel col-md-2”}）
@Html.DropDownListFor（model=>model.cityModel.CountryID，新选择列表（model.ddlcontrystatecity.ddlCountry，“Value”，“Text”），“Select Country”，新{id=“CountryID”，onchange=“GetddlState（）”，@class=“form control”}）
@Html.ValidationMessageFor（model=>model.cityModel.CountryID）
@LabelFor（model=>model.cityModel.StateID，新的{@class=“controllabel col-md-2”}）
@Html.DropDownListFor（model=>model.cityModel.StateID，新选择列表（model.ddlcontrystatecity.ddlState，“Value”，“Text”），“Select State”，新{id=“StateID”，@class=“form control”}）
@Html.ValidationMessageFor（model=>model.cityModel.StateID）
@LabelFor（model=>model.cityModel.CityID，新的{@class=“controllabel col-md-2”}）
@TextBoxFor（model=>model.cityModel.CityID，新的{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.cityModel.CityID）
@LabelFor（model=>model.cityModel.Name，新的{@class=“controllabel col-md-2”}）
@Html.TextBoxFor（model=>model.cityModel.Name，新的{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.cityModel.Name）

脚本代码：

<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>

@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>
}

@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
函数GetddlState（）{
$（“#StateID”）.empty（）；
$（“#StateID”）.append（“选择状态”）；
var countryID=$（'#countryID'）.val（）；
var Url=“@Url.Content（“~/MasterConfigGeneral/GetddlState”）；
$.ajax({
url:url，
数据类型：“json”，
数据：{CountryID:CountryID}，
成功：功能（数据）{
$（“#StateID”）.empty（）；
$（“#StateID”）.append（“选择状态”）；
$.each（数据、函数（索引、选项数据）{
$（“#StateID”）.append（“+optiondata.Text+”）；
});
}
});
}
}

试试这个：

@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
函数GetddlState（）{
var countryID=$（'#countryID'）.val（）；
var Url=“@Url.Content（“~/MasterConfigGeneral/GetddlState”）；
$.ajax({
url:url，
数据类型：“json”，
数据：{CountryID:CountryID}，
成功：功能（数据）{
$（“#StateID”）.empty（）；
$（“#StateID”）.append（“选择状态”）；
$.each（数据、函数（索引、选项数据）{
$（“#StateID”）.append（“+optiondata.Text+”）；
});
}
});
}
}

---

在

$下添加这三个参数。ajax

将解决该问题

它适用于除一个之外的所有场景。最初，验证适用于国家/地区和州控制。选择国家/地区中的值后，不选择州/地区中的值，验证适用于州/地区（使用选项值=“”）.选择状态中的值后，状态验证失败，如果我重新选择国家/地区中的选项以再次选择国家/地区，并且我单击“创建”按钮以验证状态不工作…为什么？？？验证在新场景中正常工作：在选择国家/地区和州下拉列表后，如果我重新选择国家/地区以选择选项，状态应重置为选择选项，但这不会发生。。！！！即使在选择了要选择的国家之后，该州仍有旧的values@VishalIPatil请看更新的答案。它会很好地工作。不，它不会发生，再次相同的问题。。！！！将国家/地区下拉列表中的值重置为“选择国家/地区”后，脚本不会清除国家/地区下拉列表中的旧值，顶部显示“选择国家”选项。