MVC 5 DropDownList Client Validation

Question

After Enabling Client Validation, Why is the DropDownList or the String Properties not being Validated client side? Using EF 6.1, MVC 5 VS2012.

Here is my EF Class

//------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated from a template.
//
//     Manual changes to this file may cause unexpected behavior in your application.
//     Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------

namespace SampleApp.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Business
    {
        public int BusinessKeyId { get; set; }
        public string BusinessName { get; set; }
        public string BusinessType { get; set; }
        public int ContactId { get; set; }

        public virtual Contact Contact { get; set; }
    }
}

My Controller Actions

// GET: /Business/
public ActionResult Index()
{
    var businesses = _db.Businesses.Include(b => b.Contact);
    return View(businesses.ToList());
}

// GET: /Business/Create
public ActionResult Create()
{
    ViewBag.ContactId = new SelectList(_db.Contacts, "ContactId", "Name");
    return View();
}

// POST: /Business/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include="BusinessKeyId,BusinessName,BusinessType,ContactId")] Business business)
{
    if (ModelState.IsValid)
    {
        _db.Businesses.Add(business);
        _db.SaveChanges();
        return RedirectToAction("Index");
    }

    ViewBag.ContactId = new SelectList(_db.Contacts, "ContactId", "Name", business.ContactId);
    return View(business);
}

And My View

@model SampleApp.Models.Business

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>


<h2>Create</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Business</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.BusinessKeyId, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BusinessKeyId)
                @Html.ValidationMessageFor(model => model.BusinessKeyId)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.BusinessName, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BusinessName)
                @Html.ValidationMessageFor(model => model.BusinessName)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.BusinessType, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.BusinessType)
                @Html.ValidationMessageFor(model => model.BusinessType)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.ContactId, "ContactId", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("ContactId", String.Empty)
                @Html.ValidationMessageFor(model => model.ContactId)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Here is a snippet of the validation where the id is only being validated

Answer 1

In your class, the model you need to add the attribute Required. As EF consider the first one as the key, that is why you only have for the first one: Try like this:

   public partial class Business
   {
     [Key] //And this one should be the key 
     public int BusinessKeyId { get; set; }
     [Required]
     public string BusinessName { get; set; }
     [Required]
     public string BusinessType { get; set; }
     [Required]
     public int ContactId { get; set; }

    public virtual Contact Contact { get; set; }
   }

Note for the first property your BusinessKeyId you could also let the database generate that to avoid duplicate. If you want that just ask so I can Edit my answer. But for now I think It should work.