c# - 验证不适用于动态@Html.DropDownListFor

Question

我有一个 departmentID 的下拉列表，它根据在 DepartmentCategoryID 中选择的内容进行填充，但是如果它留空，我将无法进行验证。它或所有其他的都有效，但这是以不同的方式完成的。

<div style="display: table-row;">
  <div class="div-label-text-mandatory" , style="display: table-cell">
    @Html.LabelFor(model => model.DepartmentCategoryID)
  </div>
  <div class="div-dropdown-menu" , style="display: table-cell">
    @Html.DropDownListFor(model => model.DepartmentCategoryID (SelectList)ViewBag.DepartmentCategory, "Please select a Staff category", new { @id = "txtDepCatID", @onchange = "javascript:GetCity(this.value);" })
  </div>
  <div class="div-val-cell" , style="display: table-cell">
    @Html.ValidationMessageFor(model => model.DepartmentCategoryID, "", new { @class = "text-danger" })
  </div>
</div>              

<div id="DepartmentDiv" style="display: none;">
  <div class="div-label-text-mandatory" , style="display: table-cell"></div>
  <div class="div-dropdown-menu" , style="display: table-cell">
    @Html.LabelFor(model => model.DepartmentID): 
    <select id="txtDepartment" name="txtDepartmentID"></select>
  </div>
  <div class="div-val-cell" , style="display: table-cell">
    @Html.ValidationMessageFor(model => model.DepartmentID, "", new { @class = "text-danger" })
  </div>
</div>

我尝试添加一个我将在 jquery 中设置的隐藏部分，但这也不起作用 - 不确定隐藏部分是否可以缺少验证？

<div style="display: table-row;">
  <div class="div-label-text-mandatory" , style="display: table-cell"></div>
    <div class="div-dropdown-menu" , style="display: table-cell">
      @Html.HiddenFor(model => model.DepartmentID)
    </div>
    <div class="div-val-cell" , style="display: table-cell">
      @Html.ValidationMessageFor(model => model.DepartmentID, "", new { @class = "text-danger" })
    </div>
</div>  

Jquery 填充列表:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript">
    function GetCity(_GetSubDepartment) {
        var procemessage = "<option value='0'> Please wait...</option>";
        $("#txtDepartment").html(procemessage).show();
        var url = "@Url.Content("~/Employee/_GetSubDepartment")";

        $.ajax({
            url: url,
            data: { DepartmentCategoryID: _GetSubDepartment },
            cache: false,
            type: "POST",
            success: function (data) {
                console.log("Data length: "+data.length)
                if ((data.length) == 0) {
                    $('#DepartmentDiv').hide();
                }
                if ((data.length) > 0) {
                    var markup = "<option value='0'>Select department</option>";
                    for (var x = 0; x < data.length; x++) {
                        markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
                        $("#txtDepartment").html(markup).show();
                        //$('#DepartmentDiv').css('display', 'table-row').animate("slow");
                        $('#DepartmentDiv').css('display', 'table-row').show();
                    }

                }
            },
            error: function (reponse) {
                alert("error : " + reponse);

            }
        });

    }
</script>

模型

[DisplayName("Staff category")]
[Required(AllowEmptyStrings = false, ErrorMessage = " * is mandatory")]
public int DepartmentCategoryID { get; set; }

[DisplayName("Departments")]
[Required(AllowEmptyStrings = false, ErrorMessage = " * is mandatory")]
public int DepartmentID { get; set; }

Controller :

[HttpPost]
public ActionResult _GetSubDepartment(int? DepartmentCategoryID)
{
    ViewBag.Department = new SelectList(db.vwDimDepartments.Where(m => m.DepartmentCategoryID == DepartmentCategoryID).ToList(), "DepartmentID", "DepartmentName");

    return Json(ViewBag.Department);
}

这是因为 Jquery 中用于填充列表的标记并且它来自 View 包吗？

有人对此有解决方案吗？

Answer 1

您将第二个下拉列表中的第一个选项添加为

var markup = "<option value='0'>Select department</option>";

它的值为 0这对 typeof int 有效所以永远不会有验证错误。改成

var markup = "<option value=''>Select department</option>";

此外，您为第二个 <select> 手动创建 html元素

<select id="txtDepartment" name="txtDepartmentID"></select>

它有一个与您的模型无关的名称属性。相反，使用

强绑定(bind)到您的模型

@Html.DropDownListFor(m => m.DepartmentID, Enumerable.Empty<SelectListItem>())

并调整您的脚本，使其引用 $('#DepartmentID') (不是 $('#txtDepartment'))

旁注:

1. AllowEmptyStrings = false对于 int 的类型毫无意义(及其无论如何都是默认值)所以你可以删除它。
2. 你的 _GetSubDepartment()方法不应该返回 SelectList (你只是返回不必要的额外数据降低性能。

应该是

[HttpGet] // Its a get,  not a post (change the ajax option)
public ActionResult _GetSubDepartment(int? DepartmentCategoryID) // The parameter should be int (not nullable) or test for null
{
  var data = db.vwDimDepartments.Where(m => m.DepartmentCategoryID == DepartmentCategoryID).Select(d => new
  {
    Value = d.DepartmentID,
    Text = d.DepartmentName
  };
  return Json(data, JsonRequestBehavior.AllowGet);
}