为什么dataTables不能与ASP.NET MVC 4 Razor一起使用

Question

I'm trying to use dataTables.js with my ASP.NET 4 MVC project. I have tables that get data from the controller and then generate a table with Razor syntax. Since it's C#, it's server-side, so it should work. Below is my code, can somebody tell me what I'm missing please?

View-Model

 public class ClassViewModel
    {
        public int Id { get; set; }
        [Required(ErrorMessage="Name is required")]
        public string Name { get; set; }
        [Required(ErrorMessage = "Abbreviation is required")]
        public string Abbreviation { get; set; }
        [Required(ErrorMessage = "Description is required")]
        public string Description { get; set; }
        public string DescriptionFrench { get; set; }
        [Required(ErrorMessage = "Semesters is required")]
        public string Semesters { get; set; }
        [Required(ErrorMessage = "Year is required")]
        public string Year { get; set; }
        [Required(ErrorMessage = "Date is required")]
        public string Date { get; set; }
        [Required(ErrorMessage = "Time is required")]
        public string Time { get; set; }
        public bool French { get; set; }
        public bool Shared { get; set; }
        public bool Concentration { get; set; }
        public IEnumerable<DepartmentViewModel> Departments { get; set; }
    }

Controller Action

 public ActionResult Index()
    {            
        IEnumerable<ClassViewModel> classes = db.classes.AsEnumerable().ToList()
            .Select(c => new ClassViewModel()
            {
                Id                = c.CID,
                Name              = c.Classname,
                Abbreviation      = c.Abbreviation,
                Description       = c.Description,
                DescriptionFrench = c.DescriptionFR,
                Semesters         = c.Semesters,
                Year              = c.Year,
                Date              = c.DateTime.ToShortDateString(),
                Time              = c.DateTime.ToShortTimeString(),
                French            = c.French,
                Shared            = c.shared,
                Concentration     = c.Concentration
            });
        return View(classes);
    }

Layout file contains a Scripts section with the following

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Scripts/knockout-2.1.0.js")
@Scripts.Render("~/Scripts/jquery.dataTables.js")
@Scripts.Render("~/content/themes/bootstrap/js/bootstrap.js")
@Scripts.Render("~/Scripts/hideshow.js")
@Scripts.Render("~/Scripts/jquery.validate.js")
@Scripts.Render("~/Scripts/fullcalendar.min.js")    
@Scripts.Render("~/Content/themes/admin/js/changePassword.js")
@RenderSection("scripts", required: false)

View

@model IEnumerable<IAUCollege.Models.ClassViewModel>

@{
    ViewBag.Title = "Classes";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<h2>Classes</h2>
<p>
    Type the class name, abbreviation and/or semester to filter the results.
</p>
<div class="searchbox-container">
    @Html.ActionLink("Add Class", "Create", new {}, new {@class="btn btn-primary pull-right"})
    <input type="text" class="searchbox pull-right" id="classSearch" placeholder="Search Classes"/>
</div>  
<table id="classesTable" class="table white-table table-striped table-bordered table-hover">
    <tr>    
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Abbreviation)
        </th>     
        <th>
            @Html.DisplayNameFor(model => model.Semesters)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>        
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Abbreviation)
            </td>          
            <td>
                @Html.DisplayFor(modelItem => item.Semesters)
            </td>        
            <td>
                <div class="btn-group">
                    <a href="/admin/classes/edit/@item.Id" rel="tooltip" title="Edit"><i class="icon-edit"></i></a>
                    <a href="/admin/classes/details/@item.Id" rel="tooltip" title="Details"><i class="icon-list-alt"></i></a>
                    <a href="/admin/classes/delete/@item.Id" rel="tooltip" title="Delete"><i class="icon-remove"></i></a>
                </div>
            </td>
        </tr>
    }

</table>
@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#classesTable").dataTable();
        });
    </script>
}

When I view the page I get the following javascript error. Uncaught TypeError: Cannot read property 'asSorting' of undefined

Please tell me what I'm missing to get this working...I think it's something to do with the buttons column, but I'm not sure. Thanks.

Answer 1

OK. So I figured it out.. I needed to have a <thead> and <tbody> tag, because tables need to be properly formatted, in-order for dataTables to work.