将jTable（jQuery）集成到使用默认布局的ASP.NET MVC 5项目中
戈德·汤普森
我很难将jTable集成到使用默认布局（_Layout.cshtml）的ASP.NET MVC 5项目中。这是我尝试使用MCVE的尝试：
我在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();
}
}
}
为了验证一切正常，我用代码替换了〜/ Views / Home / 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 UI（组合库）1.9.2
jTable 2.4.0
经过大量搜索和几次失败的尝试，我终于结合使用了
使用ASP.NET MVC 3和jTable jQuery插件的基于AJAX的CRUD表
以及另一个论坛的问题答案
在MVC 4应用程序ASP.net中加载jtable时出现jquery文件错误
我将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）。当我尝试通过将样式表和脚本引用从<head>Index.cshtml的<head>部分移到_Layout.cshtml的部分中来重新处理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控制台时，显示错误
未捕获的TypeError：undefined不是函数
令人讨厌的行是我（经修订）Index.cshtml的第53行
$('#ClientTableContainer1').jtable({
我认为问题可能与_Layout.cshtml将正文内容包含在另一个内容中有关 <div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
但我现在正在猜测。
罗伯特·安德森
它可能与您的包配置引用以及通过Layout.cshtml加载脚本有关，因为当您在视图中对引用进行硬编码时，它可以工作。
使用这些插件，正确加载文件的顺序以及指向正确方向的引用非常重要。
例如，在Layout.cshtml的标题中：
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jquery.jtable")
然后在bundles.config中，确保将这些引用指向正确的位置-例如，使用{version}和*以确保下次通过nuget更新时仍然可以。
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
在标题之后，您还需要在主体中呈现脚本，方法是将其包含在布局视图中，然后在索引视图中添加一个部分。
在版式中：
<div id="body">
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
@RenderSection("scripts", required: false)
</body>
在索引中：
@model ARAWeb.Models.PurchaseOrder
@{
ViewBag.Title = "Index";
}
@*Links to css*@
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
@section scripts {
<script type="text/javascript">
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将ASP.NET MVC 5项目迁移到ASP.NET 5
- 2
在同一项目中使用MVC5和Web API 2
- 3
如何在ASP.NET MVC 5项目中获得“添加控制器”和“添加视图”菜单选项？
- 4
在MVC 4项目中使用XSockets.NET。在IIS 7.0上部署项目
- 5
如何在MVC5项目中将Json.NET用于JSON模型绑定？
- 6
我如何在asp.net 5项目中添加本地dll
- 7
如何创建视图以显示ASP.Net MVC 4项目中的文件列表
- 8
将.net 3.5，MVC 1项目升级到.net4.5和MVC 5
- 9
可以在asp.net mvc6项目中添加iis快速配置（Windows身份验证）吗？
- 10
在本地运行ASP.NET MVC 5项目
- 11
在ASP NET MVC 6项目中使用System.Net.Mail
- 12
我应该在ASP.NET-MVC 5项目中的哪个位置存储WebAPI控制器？
- 13
从ASP.Net 5项目中完全删除凉亭
- 14
为什么我不能将Asp.Net 5 MVC 6项目中的EF 6.1.3与类库一起使用
- 15
在多个项目中的asp.net 5依赖项注入
- 16
根据新ASP.NET 5项目中的配置名称发布构建事件
- 17
在VS2015中将MVC添加到空ASP.NET 5项目中：空500响应
- 18
ASP.NET 5项目中的TypeScript Tools版本设置在哪里？
- 19
在非Asp.Net 5项目中使用gulp或grunt
- 20
在现有的ASP.NET MVC 5项目中使用WebAPI 2.2
- 21
在asp.net mvc4项目中使用draggable（）jQuery函数？
- 22
使用Twitter Bootstrap将响应图像插入ASP.NET MVC5项目
- 23
如何在ASP.NET MVC6 beta5项目中添加控制器？
- 24
如何在ASP.NET 5 MVC 6项目中切换到完整的.NET堆栈
- 25
如何在ASP.Net MVC4和Web API 1项目中进行属性路由？
- 26
将Angularjs集成到ASP.NET MVC 5中
- 27
ASP.NET MVC 5项目中VS2017连接MySQL
- 28
ASP.NET 在 mvc 6 项目中
- 29
在 Asp.net MVC 3 项目中引用和使用 Angular 5+ 组件
我来说两句