[英]Why won't dataTables work with ASP.NET MVC 4 Razor
我正在嘗試將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.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錯誤。 未捕獲的TypeError:無法讀取未定義的屬性'asSorting'
請告訴我我缺少什么讓這個工作...我認為它與按鈕列有關,但我不確定。 謝謝。
好。 所以我想出來了..我需要一個<thead>
和<tbody>
標簽,因為需要對表格進行適當格式化,以便數據表能夠正常工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.