1

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

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

我的问题是，如果用户在没有输入任何信息的情况下点击 Check 按钮，我需要在两个输入元素周围获得那个红色矩形，但它没有发生。有什么我想念的想法吗？

4

3 回答 3

3

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

.input-validation-error { 
   border: 1px solid #ff0000 !important; 
   background-color: #ffeeee; }
于 2012-05-02T17:16:53.750 回答
2

你链接生成的site.css？在那里，有一些 css 类，比如input-validation-error，它提供了红色边框。

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

于 2012-04-04T13:00:41.050 回答
1

还需要在页面中放入 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>

更新：

我需要在两个输入元素周围放置那个红色矩形，但它没有发生。

您可以在 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;
}
于 2012-04-04T13:05:36.580 回答