在何处以及如何向MVC 6项目添加数据表? [英] Where and How to Add DataTables to MVC 6 project?
问题描述
我正在尝试使DataTables在MVC 6项目中工作.我已经完成了整个项目，但是在尝试列出用户时，它没有使用DataTables.
I am attempting to get DataTables working in MVC 6 project. I've got the whole project working but when trying to list users it doesn't use the DataTables.
我不确定要添加到MVC 6项目的位置和内容.一切都在不同的位置.我运行了Nuget软件包管理器，发现了一些东西，并将其添加到我的project.json文件中:"jquery.datatables":"1.10.10"
I'm not sure where and what to add to the MVC 6 project. Everything is in a different location. I ran the Nuget Package Manager and found something and it added this to my project.json file: "jquery.datatables": "1.10.10"
但是DataTables无法正常工作.我知道这是对我的问题的糟糕描述，但是我敢肯定我只是在正确的位置没有正确的.js和.css文件.但是去DataTables下载网站没有帮助，因为有上百万种选择可供下载.
But DataTables isn't working. I know this is a terrible description of my problem but I'm pretty sure I just don't have the right .js and .css files in the right locations. But going to the DataTables downloads website is no help because there are million choices to download.
这是我列出已注册用户的视图.它有效，但不使用DataTables，并且如果未找到DataTables也不会触发警报.默认安装的DataTables已内置在搜索框和OrderBy箭头中.当前视图没有一个-可以使用，但没有DataTables.
Here is my view that lists registered users. It works, but doesn't use DataTables and doesn't trigger an Alert if DataTables not found. The default install of DataTables has built in search box and OrderBy arrows. There are none with current view -- which works but without DataTables.
@model List<MVC6.Models.UserViewModel>
@{
ViewBag.Title = "Users";
}
<ol class="breadcrumb">
<li>@Html.ActionLink("Administration", "Index", "Admin")</li>
<li>Users</li>
</ol>
<h2>@ViewBag.Title</h2>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
try {
$('#users').dataTable({});
} catch (err) {
alert(err + ":\n Datatables installed? Included in Resource bundle?");
}
});
</script>
@if (!ViewData.ModelState.IsValid)
{
<div class="alert alert-danger" role="alert">
<div asp-validation-summary="ValidationSummary.All"></div>
@*@Html.ValidationSummary()*@
</div>
}
<fieldset>
<table id="users" class="display">
<thead>
<tr>
<th width="20%">Email</th>
<th width="20%">Roles</th>
<th width="20%">Action</th>
</tr>
</thead>
<tbody>
@if (null != Model)
{
foreach (var user in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => user.Email)
</td>
<td>
@if (null != user.Roles)
{
@*foreach (var role in user.Roles)
{
@role
<br />
}*@
@user.Roles
}
</td>
<td>
<div class="btn-group" role="group" aria-label="...">
@Html.ActionLink("Edit", "Edit", new { userId = user.UserId }, new { @class = "btn btn-default" })
@Html.ActionLink("Delete", "Delete", new { userId = user.UserId }, new { onclick = "return confirm('Are you sure you want to delete this user?')", @class = "btn btn-default" })
</div>
</td>
</tr>
}
}
</tbody>
</table>
</fieldset>
我考虑过此事，想显示我的_Layout.cshtml文件可能会放置引用的位置.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - MVC6</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-controller="Home" asp-action="Index" class="navbar-brand">MVC6</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
@await Html.PartialAsync("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2016 - MVC6</p>
</footer>
</div>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("scripts", required: false)
</body>
</html>
推荐答案
我去了 DataTables下载页面并进行了下载，然后我在文档准备功能的正上方添加了各种脚本参考.问题之一是_layout.chstml中的jquery在页面底部，而在顶部需要时.
I went to The DataTables download page and built a download and I added all sorts of script references right above the document ready function. One of the problems is jquery in _layout.chstml was at the bottom of the page, when it was needed at the top.
我下载了.zip，将DataTables-1.10.10文件夹放在wwwroot文件夹中.
I downloaded the .zip put the DataTables-1.10.10 folder in the wwwroot folder.
在_Layout.chstml中，我将wwwroot/css/datatables.css和wwwroot/js/datatables.js(位于.zip文件的根目录中.
In _Layout.chstml I put wwwroot/css/datatables.css and wwwroot/js/datatables.js (which were in the root of the .zip file.
在Index.chstml视图中，我从.zip和/datatables-1.10.10/js/jquery.datatables.css安装的文件夹中放入/datatables-1.10.10/js/jquery.datatables.js.
In Index.chstml view I put the /datatables-1.10.10/js/jquery.datatables.js from the folder I installed from the .zip and the /datatables-1.10.10/js/jquery.datatables.css .
在下面我写的是: /lib/jquery/dist/jquery.js
And right below that I put: /lib/jquery/dist/jquery.js
到目前为止，使用MVC的很多次我都发现必须正确定位脚本和链接文件的顺序，有时默认的_Layout.chstml文件不会将它们放在需要的地方.此基本安装为我提供了带有默认搜索框，分页和每列的排序依据"箭头的数据表.真是太好了.至少在我生命中的今天希望这对其他人有帮助.
Many times so far with MVC I have discovered that the order of the script and link files have to be correctly located and sometimes the default _Layout.chstml file doesn't put them where they are needed. This basic install gave me the datatable with the default search box, pagination, and Order By arrows for each column. Pretty sweet. . .at least today in my life. Hope this helps someone else.
<h2>@ViewBag.Title</h2>
<link href="~/datatables-1.10.10/css/jquery.datatables.css" rel="stylesheet" />
<script src="~/datatables-1.10.10/js/jquery.datatables.js"></script>
<script src="/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
alert("inside document ready");
try {
$('#users').dataTable({});
} catch (err) {
alert(err + ":\n Datatables installed? Included in Resource bundle?");
}
});
</script>
这篇关于在何处以及如何向MVC 6项目添加数据表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
