我很难将jTable集成到使用默认布局（_Layout.cshtml）的ASP.NET MVC 5项目中。这是我尝试在MCVE：将jTable（jQuery）集成到使用默认布局的ASP.NET MVC 5项目中
我创建在Visual Studio 2013年社区命名为“mvc5_jTable”一个新的ASP.NET MVC项目，我创建了一个模型，“Client.cs”：
namespace mvc5_jTable.Models
{
public class Client
{
public int ID { get; set; }
public string LastName { get; set; }
public Client(int newID, string newLastName)
{
ID = newID;
LastName = newLastName;
}
}
}
我修改该Index()行动的HomeController的：
using mvc5_jTable.Models;
using System.Collections.Generic;
using System.Web.Mvc;
namespace mvc5_jTable.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
List<Client> clients = new List<Client>();
clients.Add(new Client(1, "Starsky"));
clients.Add(new Client(2, "Hutch"));
return View(clients);
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
要验证的事情正在努力这一点我更换了样板在〜/浏览/首页/ Index.cshtml的代码产生一个普通的旧的HTML表格：
@model IEnumerable<mvc5_jTable.Models.Client>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.ID)
</th>
<th>
@Html.DisplayNameFor(model => model.LastName)
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ID)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
</tr>
}
</table>
当我运行的项目，我看到这一点，这表明我们是好为止：
现在，我想在一个JTable中显示的数据，所以我推出的NuGet通过“管理解决方案的NuGet包...”并搜索jTable。 NuGet为我找到了v2.4.0（我根据http://jtable.org/验证了它是最新的稳定版本），所以我点击了“安装”按钮。当安装完成后我检查“安装包”中的NuGet，并在该列表中我看到
的jQuery 1.10.2
jQuery用户界面（组合库）1.9.2
JTable中2.4.0
后一番搜索和几次不成功的尝试，我终于得到了使用
AJAX based CRUD tables using ASP.NET MVC 3 and jTable jQuery plug-in
的组合，并且在另一个论坛的问题的答案在这里
工作的东西jquery file error while loading jtable in MVC 4 application ASP.net
我更换了Index.cshtml视图的内容与
@{
Layout = null;
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Scripts/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui-1.9.2.js"></script>
<script src="~/Scripts/jtable/jquery.jtable.js"></script>
</head>
<body>
<div id="ClientTableContainer1"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#ClientTableContainer1').jtable({
title: 'Client List',
actions: {
listAction: '@Url.Action("ClientList")',
deleteAction: '@Url.Action("DeleteClient")',
updateAction: '@Url.Action("UpdateClient")',
createAction: '@Url.Action("CreateClient")'
},
fields: {
ID: {
key: true,
create: false,
edit: false,
list: true
},
LastName: {
title: 'LastName',
width: '12%'
}
}
});
//Load student list from server
$('#ClientTableContainer1').jtable('load');
});
</script>
</body>
</html>
，我增加了以下的方法来HomeController.cs：
[HttpPost]
public JsonResult ClientList()
{
try
{
List<Client> clients = new List<Client>();
clients.Add(new Client(1, "Starsky"));
clients.Add(new Client(2, "Hutch"));
return Json(new { Result = "OK", Records = clients });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
这样的作品，太
但它是一个独立的页面，没有利用网站的整体布局（_Layout.cshtml）。当我尝试通过将Index.cshtml的<head>部分中的样式表和脚本引用移动到_Layout.cshtml的<head>部分来尝试将Index.cshtml重新用作部分视图时，注释掉Layout = null;并仅将主体内容留在Index .cshtml
@{
//Layout = null;
ViewBag.Title = "Index";
}
<div id="ClientTableContainer1"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#ClientTableContainer1').jtable({
title: 'Client List',
actions: {
listAction: '@Url.Action("ClientList")',
deleteAction: '@Url.Action("DeleteClient")',
updateAction: '@Url.Action("UpdateClient")',
createAction: '@Url.Action("CreateClient")'
},
fields: {
ID: {
key: true,
create: false,
edit: false,
list: true
},
LastName: {
title: 'LastName',
width: '12%'
}
}
});
//Load student list from server
$('#ClientTableContainer1').jtable('load');
});
</script>
我得到标准的页眉和页脚从_Layout.cshtml但没有介于两者之间。
当我在Chrome中检查JavaScript控制台它显示的错误
Uncaught TypeError: undefined is not a function
与那一行是我（修订）Index.cshtml
$('#ClientTableContainer1').jtable({
线53我认为也许这个问题涉及_Layout.cshtml将正文内容包含在另一个<div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
但我在猜测这一点。
点上。当_Layout.cshtml自动生成时，在'
'节的底部有'@ Scripts.Render（“〜/ bundles/jquery”）'（和其他几个），所以我显然正在加载'jquery- .. ..js'两次。我将这些内容移到了''部分，并进行了一些整理，现在可以使用。谢谢！ – 2014-12-08 10:55:57