如何验证asp.net mvc razor视图中的hiddenfor字段？

Question

我的剃刀视图中有一个 jQuery selectable 小部件，它显示为 <ol>，并从 SQL Server 表中的逗号分隔字符串更新，如下所示：

<ol class="ui-selectable" style="width:auto" id="selectable1">

@{
    var color = Model.AvailableColors.Split(',');
    foreach (var clr in color)
        {
          <li class="btn red-mint" style="margin: 10px 0">@clr</li>
        }
 }
 </ol>

上面提到的显示一组颜色，如（红色、绿色、紫色等）列表，当然是selectable，用户一次只能从列表中选择一个。
我在隐藏字段中传递了选定的列表项值，然后使用下面的脚本将其传递给控制器​​操作方法。

<script type="text/javascript">
    $(document).ready(function () {
        $("#selectable1").selectable({
            selected: function (event, ci) {
                $(ci.selected).siblings().removeClass("ui-selected");
                $("#selectedcolor").val($("#selectable1>li.ui-selected").html());
            }
        });

    });
</script> 

在我的表单中，我有一个 HiddenFor razor 属性将选定的列表项值传递给控制器​​，如下所示：

@Html.HiddenFor(m => m.AvailableColors, new { @id = "selectedcolor" })

现在我遇到了一些问题，无法通过 Internet 搜索找到解决方案。我希望如果没有选择任何项目，则应该进行验证并且应该出现AvailableColors 的验证消息，但我不知道该怎么做。请问有什么帮助吗？
编辑：这是我将数据传递给的控制器操作方法： // GET: /Store/AddToCart/5

public ActionResult AddToCart(int id,int SelectedQuantity,  string SelectedSizes, string AvailableColors)
{
    // Retrieve the album from the database
    var addedProduct = dbContext.Products
        .Single(product => product.ProductID == id);

    // Add it to the shopping cart
    var cart = ShoppingCart.GetCart(this.HttpContext);

    cart.AddToCart(addedProduct, SelectedQuantity, AvailableColors,SelectedSizes);

    // Go back to the main store page for more shopping
    return RedirectToAction("Index");
}

Answer 1

您可以考虑添加一个新属性来在您的视图模型中存储所选项目的文本（字符串），并用[Required] 数据注释来装饰它。

public class AddToCartViewModel
{
  public int ProductId { set;get;}

  [Required]
  public int SelectedQuantity { set;get;}

  [Required]
  pubilc string SelectedColor { set;get;}

  // Add other properties as needed.
}

并在您的表单中添加此隐藏表单

@using (Html.BeginForm("AddToCart","ShoppingCart"))
{
    @Html.HiddenFor(f => f.SelectedColor)
    @Html.ValidationMessageFor(f=>f.SelectedColor)
    <input type="submit" class="btn btn-default" value="Submit" />
}

当您提交表单时，ModelState.IsValid 将为 false，如果您将模型返回查看，您将看到 SelectedColor 的错误消息

[HttpPost]
public ActionResult AddToCart(AddToCartViewModel model)
{
  if(ModelState.IsValid)
  {
    //continue saving and return something
  }
  return View(model);
}

如果您有客户端不显眼的验证，默认情况下它不会与隐藏字段一起使用。您可以做的一种解决方法是将字段保留为输入，但将可见性设置为隐藏。然后客户端验证也会显示验证错误信息。

@using (Html.BeginForm("AddToCart","ShoppingCart"))
{
     @Html.TextBoxFor(f => f.SelectedColors, new {style="visibility:hidden;"})
     @Html.ValidationMessageFor(f=>f.SelectedColor)
     <input type="submit" class="btn btn-default" value="Submit" />
}