将jTable（jQuery）集成到使用默认布局的ASP.NET MVC 5项目中

问题描述：

我很难将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>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
    </footer> 
</div>

但我在猜测这一点。

答

它可能与你的bundle配置引用和通过你的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">

点上。当_Layout.cshtml自动生成时，在'

'节的底部有'@ Scripts.Render（“〜/ bundles/jquery”）'（和其他几个），所以我显然正在加载'jquery- .. ..js'两次。我将这些内容移到了''部分，并进行了一些整理，现在可以使用。谢谢！ – 2014-12-08 10:55:57

将jTable（jQuery）集成到使用默认布局的ASP.NET MVC 5项目中

相关推荐