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" })

现在我遇到了困难，无法找到通过互联网搜索的解决方案。我希望如果没有选择任何项目，则应该进行验证，并且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" />
}

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

1 个答案: