我很難將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