Question

问题陈述：

我使用Jquery和Json为Country和State创建了一个级联下拉列表，一切正常。我可以为Country更改国家和国家数据绑定国家的变化事件。只有问题是什么我＆＃39 ; m面向国家和州的级联验证。

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

我做错了什么？我认为我在视图的脚本部分做错了什么!!!

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

图片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>
}

Answer 1

试试这个：

 @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",

在$.ajax下添加这三个参数将解决问题

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

2 个答案: