Question

首先，下面是我的两个模型类。

public class DataModel
    {
        [Required]
        public string                  SubscriptionName    { get; set; }

        [Required]
        public SubscriptionDateModel SubscriptionExpiry { get; set; }

        public DataModel()
        {
            SubscriptionExpiry = new SubscriptionDateModel();
        }
    }

    public class SubscriptionDateModel
    {
        public int Year { get; set; }
        public int Month { get; set; }

        public IEnumerable<SelectListItem> Months
        {
            get
            {
                var Months = new List<SelectListItem>();
                Months.Add(new SelectListItem() { Text = "-----", Value = "0" });
                string[] MonthList = new string[12] { "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" };
                int MonthIndex = 0;
                for (var i = 0; i < MonthList.Length; i++)
                {
                    MonthIndex = i + 1;
                    var item = new SelectListItem()
                    {
                        Selected = (Month == MonthIndex),
                        Text = MonthList[i],
                        Value = MonthIndex.ToString()
                    };
                    Months.Add(item);
                }
                return Months;
            }
        }

        public IEnumerable<SelectListItem> Years
        {
            get
            {
                var Years = new List<SelectListItem>();
                Years.Add(new SelectListItem() { Text = "-----", Value = "0" });
                string[] YearList = new string[9] { "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020" };
                int YearIndex = 0;
                for (var i = 0; i < YearList.Length; i++)
                {
                    YearIndex = i + 1;
                    var item = new SelectListItem()
                    {
                        Selected = (Month == YearIndex),
                        Text = YearList[i],
                        Value = YearIndex.ToString()
                    };
                    Years.Add(item);
                }
                return Years;
            }
        }
    }

然后我有一个名为SubscriptionDate.cshtml的编辑器模板

@model MvcApplication1.Models.SubscriptionDateModel
@Html.DropDownListFor(m => m.Year, Model.Years, new { id = "Year"})&nbsp;@Html.DropDownListFor(m => m.Month, Model.Months, new { id = "Month"})&nbsp;

我在Index.cshtml中使用此模板如下

@model MvcApplication1.Models.DataModel
@{
    ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";

}

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<h2>@ViewBag.Message</h2>
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true, "Required field")
    <br />
     @Html.Label("Subscription Name: ")
    @Html.TextBoxFor(m => m.SubscriptionName)
    <br />
    @Html.Label("Subscription Expiry: ")
    @Html.EditorFor(m => m.SubscriptionExpiry, "SubscriptionDate")

    <input type="submit" value="Check" />
}

最后在控制器中我的动作方法定义如下。

 public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            return View(new DataModel());
        }

        [HttpPost]
        public ActionResult Index(DataModel model)
        {
            if (ModelState.IsValid)
            {
                ViewBag.Message = "Hello world";
            }
            return View(model);
        }

我的问题是，如果用户在没有输入任何信息的情况下点击“检查”按钮，我需要在两个输入元素周围获得该红色矩形但不会发生。我缺少什么想法？

Answer 1

将!important添加到input-validation-error类。 Site.css中的input[type="text"]具有更高的特异性，因此胜过验证边界。

.input-validation-error { 
   border: 1px solid #ff0000 !important; 
   background-color: #ffeeee; }

Answer 2

您是否关联了生成的site.css？在那里，有一些css类，如input-validation-error，它提供了红色边框。

如果无效的输入字段获得类input-validation-error，请使用类似firebug的工具进行检查。如果是这样，那就是css不匹配，您可能没有链接到Site.css或删除input-validation-error类。在这些情况下，在css中定义css类应该可以解决问题。

Answer 3

还需要将Site.css和jQuery库放在页面中。

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
type="text/javascript"></script>

更新：

我需要在两个输入元素周围获得Red rectangel但是它没发生。

你可以修复CSS。 Visual Studio默认模板附带Site.css（Intranet / Internet）。文本框的无效验证“红色”边框由“border: 1px solid #ccc”覆盖。所以只需注释掉这一行就可以了。

/* FORM LAYOUT ELEMENTS 
.....
input[type="text"], 
input[type="password"] {
    /* border: 1px solid #ccc; */
    padding: 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
}

验证失败时，无法获取所需输入元素周围的红色矩形

3 个答案: