0

我正在尝试将 dataTables.js 与我的 ASP.NET 4 MVC 项目一起使用。我有从控制器获取数据然后使用 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 部分，其中包含以下内容

@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 错误。 未捕获的类型错误：无法读取未定义的属性“asSorting”

请告诉我我缺少什么才能让这个工作......我认为这与按钮列有关，但我不确定。谢谢。

4

1 回答 1

2

好的。所以我想通了.. 我需要一个<thead>and<tbody>标记，因为表格需要正确格式化，才能使 dataTables 工作。

于 2012-11-18T06:23:22.763 回答