Question

To start with, below are my two model classes.

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

Then I have an editor template called SubscriptionDate.cshtml

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

I am using this template in the Index.cshtml as follows

@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" />
}

and finally in controller my action methods are defined as follows.

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

My problem is that if user hits the Check button without entering any information, I need to get that Red rectangle around the two input elements but its not happening. Any ideas what I am missing?

Answer 1

Need to put Site.css and jQuery library in the page as well.

<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>

Update:

I need to get that Red rectangel around the two input elements but its
not happening.

You can fix in CSS. Visual Studio default template come with below Site.css (both Intranet/Internet). Invalid validation “red” border for textbox is over written by “border: 1px solid #ccc“. So just comment out this line and it should be fine.

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