Question

我正在使用MVC5，我无法获得DropDownList（使用Bootsrap3）的MVC验证消息。我研究了stackoverflow上的类似问题，但任何解决方案都适用于我。

我想用户从下拉列表中选择选项。如果他单击“提交”按钮并且未选择任何选项，则应获取验证错误消息。最初在第一次加载页面时，会选择任何选项（选择值为“null”的选项）。

型号：

public class CarsPriceSearchViewModel
{
    [Required(ErrorMessage = "Proszę wybrać markę"), Range(1, Int32.MaxValue)]
    [Display(Name = "Marka")]
    public int SelectedBrandId { get; set; }
    public SelectList Brands { get; set;}

    [Required(ErrorMessage = "Proszę wybrać model"), Range(1, Int32.MaxValue)]
    [Display(Name = "Model")]
    public int SelectedModelId { get; set; }
}

控制器

public ActionResult Index()
{
    oSelectList  = new List<SelectListItem>() {
                new SelectListItem(){ Value="1", Text="Audi"},
                new SelectListItem(){ Value="2", Text="BMW"}
    };
    oSearchViewModel.Brands = new SelectList(oSelectList, "Value", "Text");
    return View(oSearchViewModel);
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Search(CarsPriceSearchViewModel searchOptions)
{
    if (ModelState.IsValid)
    {
        //TO sth
    }

    return View(searchOptions);
}

查看

<div class="panel-body">
    @using (Html.BeginForm("Search", "Home", FormMethod.Post, new { id = "SearchCarsOffersForm" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        <div class="row">
            <div class="col-lg-2">
                <div class="form-group">
                    @Html.LabelFor(m => m.SelectedBrandId)
                    @Html.DropDownListFor(m => m.SelectedBrandId,
                        Model.Brands,
                        "--Wybierz-Markę--",
                        new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.SelectedBrandId, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="col-lg-2">
                <div class="form-group">
                    @Html.LabelFor(m => m.SelectedModelId)
                    @Html.DropDownListFor(m => m.SelectedModelId,
                         new SelectList(Enumerable.Empty<SelectListItem>(), "ModelId", "ModelName"),
                         "--Wybierz-Model--",
                         new { @class = "form-control" })
                    @Html.ValidationMessageFor(m => m.SelectedModelId, "", new { @class = "text-danger" })
                </div>
            </div>

        </div>

        <div class="panel-footer">
            <button type="submit" id="SearchCarsOffers" class="btn btn-outline btn-primary btn-lg btn-block">
                Szukaj
            </button>
        </div>
    }
</div>

备注

在_Layout.cshtml中我添加了脚本：

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

脚本

$("#SelectedBrandId").change(function (event) {
        $.ajax({
            url: "UsedCarsPriceChart/FillBrandModels/",
            data: { id: $(this).val() /* add other additional parameters */ },
            cache: false,
            type: "POST",
            dataType: "JSON",

            success: function (models) {
                $("#SelectedModelId").html(""); // clear before appending new list

                $("#SelectedModelId").append(
                    $('<option></option>').html("--Wybierz-Model--"));
                for (var i = 0; i < models.length; i++) {
                    var model = models[i];
                    $("#SelectedModelId").append(                        
                        $('<option></option>').val(model.ModelId).html(model.ModelName));
                }
                //The same statement as above
                //$.each(models, function (i, model) {
                //    $("#SelectedModelId").append(
                //        $('<option></option>').val(model.ModelId).html(model.ModelName));
                //});

                $("#VersionModelId").html(""); // clear before appending new list
                $("#VersionModelId").append(
                    $('<option></option>').html("--Wybierz-Wersję--"));
            }
        });
    });

    $("#SelectedModelId").change(function (event) {
        $.ajax({
            url: "UsedCarsPriceChart/FillVersionModel/",
            data: { id: $(this).val() },
            cache: false,
            type: "POST",
            dataType: "JSON",

            success: function (models) {
                $("#VersionModelId").html(""); // clear before appending new list

                $("#VersionModelId").append(
                    $('<option></option>').html("--Wybierz-Wersję--"));
                $.each(models, function (i, model) {
                    $("#VersionModelId").append(
                        $('<option></option>').val(model.VersionModelId).html(model.VersionModelName));
                });
            }
        });
    });

问题

TestCase＃1 ：当页面加载后我单击“提交”按钮，则不会显示验证消息。

TestCase＃2 ：当页面加载并且我选择选项“--Wybierz-Markę--”时，不显示验证消息（我怀疑是）。

TestCase＃3 ：当页面加载并且我选择第一个选项和下一个选项“--Wybierz-Markę--”时，不显示验证消息（我怀疑是）。

问题来源：

我发现脚本的这种平和性破坏了这个功能（当我发表评论时，我的代码运行良好）：

$('#SearchCarsOffers').click(function () {

  var form = $("#SearchCarsOffersForm");
  var url = form.attr("action");
  var formData = form.serialize();
  $.post(url, formData, function (data) {
    areaChart.setData(data);
    //CreateMorrisArea(data);
  });
  return false;
});

请解释一下问题究竟在哪里以及我该如何解决？

MVC Bootstrap表单控件DropDownListFor验证错误消息未显示

问题来源：

0 个答案: