客户端验证 <select>在asp.net MVC 4中

Question

我正在研究asp.net MVC应用程序。 我的剃须刀视图中有这样的下拉列表：

 <select id="ddlAreaID">
 @foreach (var item in Model.Areas)
 {
     <optgroup label="@item.CityName">
     @foreach (var val in item.Areas)
     {
         var selected = (val.AreaID == Model.AreaID) ? "selected=selected" : string.Empty;
         <option value="@val.AreaID" @selected>@val.AreaName</option>
     }
     </optgroup>
 }
 </select>
 @Html.HiddenFor(m => m.AreaID)

我已将第一个项目添加到集合中，如下所示：

Areas.Insert(0, new CityInfo() 
{
    Areas = new List<AreaInfo>() 
    { 
        new AreaInfo() 
        { 
            AreaID = 0, 
            AreaName = "select an Area" , 
            CityName = "" 
        }
    }  
});

我想对此选择/下拉菜单执行客户端验证，以便至少选择一个项目。 我怎样才能做到这一点 ？

请建议。

Answer 1

您应该开始重构视图模型和视图。 您当前的设计非常静态，并且存在一些耦合问题。 例如，创建一个名为“选择区域！”的区域已经看错了。

我不知道您的视图模型是如何命名的，但是例如关注软件，我将其称为ViewModel 。 视图模型表示视图的数据。 因此，在您的用例中，您希望选择一个区域。 您可以为视图提供一组预定义的区域来呈现下拉列表。 并且您希望取回用户选择。 因此，您将以两个属性结束，表示此数据：

public class ViewModel
{
    public List<AreaModel> AvailableAreas { get; set; }

    public AreaModel SelectedArea { get; set; }
}

由于构建视图需要AvailableAreas ，因此您可以定义一个构造函数，该构造函数接受要初始化属性的区域列表。 但是，这不是强制性的。

在您的视图中，您现在可以使用帮助程序生成下拉列表：

@Html.DropDownListFor(m => m.SelectedArea, Model.AvailableAreas, "Select an area")

这真的简化了你的观点！ 现在您还可以使用数据注释来启用客户端验证：

public class ViewModel
{
    public List<AreaModel> AvailableAreas { get; set; }

    [Required]
    public AreaModel SelectedArea { get; set; }
}

这应该让你走向正确的方向。 但是，我仍然看到您的选项组存在一些问题。 如果您被迫使用它们，请阅读以下内容： 在Asp.net MVC中为optgroup功能使用Helper代码 。

Answer 2

在提交表单之前，您可以使用jQuery验证所选索引是否大于0。 就像是

$("form").submit(function(){
     if($("#ddlAreaID")[0].selectedIndex === 0) {
         // display error message
         return false;
     }
     return true; 
});

Answer 3

so that at least one item is selected

查看您的下拉列表，它不是多选。 任何下拉列表（其中都有选项）总是选择一个值（除非指定，否则默认选择第一个元素）。

此外，它不能选择多个值（因为它不是多选）。

在您的代码段中，我没有看到您添加虚拟（例如标记为“请选择一个选项”的选项）。

如果我把问题提到信中，你就不需要任何验证。

现在我将假设将添加一个虚拟选项，并且您要验证用户是否已选择除虚拟选项之外的任何选项。

第一：添加假人。

<select id="ddlAreaID">

    <!-- This is the dummy. Note that its value is "dummy" -->
    <option value="dummy">Please select an area...</option>

 @foreach (var item in Model.Areas)
 {
     <optgroup label="@item.CityName">
     @foreach (var val in item.Areas)
     {
         var selected = (val.AreaID == Model.AreaID) ? "selected=selected" : string.Empty;
         <option value="@val.AreaID" @selected>@val.AreaName</option>
     }
     </optgroup>
 }
</select>

您的选择列表（可能）通过表单发回。 所以你想要做的是：

• 提交表单时，请在提交表单之前将其捕获。
• 检查未选择假人
• 如果一切正常，可以提交表格。
• 如果验证失败，请不要提交表单。

我假设你的表单有一个id（ #myForm ，举个例子）。

$("#myForm").submit( function (event) {

    //The form has not yet submitted, and it is waiting for this function to complete.

    if( $("#ddlAreaID").val() === "dummy" ) //this needs to match the value you gave the dummy option
    {
        alert("You did not choose an area!");

        event.preventDefault(); //this line makes sure the form does not get submitted.
    }

    //If everything is still okay, we can simply exit the function. Form submission will continue.
});