爲什麼DataTables不能與ASP.NET MVC 4一起使用Razor

Question

我正在嘗試在我的ASP.NET 4 MVC項目中使用dataTables.js。我有從控制器獲取數據的表格，然後使用Razor語法生成表格。由於它是C＃，它在服務器端，所以它應該工作。下面是我的代碼，有人可以告訴我我錯過了什麼嗎？

視圖模型

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

控制器動作

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

佈局文件包含以下

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

一個腳本部分

查看

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

當我查看網頁，我得到了以下JavaScript錯誤。 遺漏的類型錯誤：無法讀取的不確定

財產「分揀」請告訴我，我很想念得到這個工作...我認爲這件事情做的按鈕欄，但我不確定。謝謝。

Answer 1

好的。所以我想通了。我需要有一個<thead>和<tbody>標籤，因爲表格需要正確格式化，以便dataTables工作。