Tablesorter 不适用于 Visual Studio 2010 上的 MVC3 Web 应用程序答案

【问题标题】：Tablesorter not working on MVC3 web app on Visual Studio 2010Tablesorter 不适用于 Visual Studio 2010 上的 MVC3 Web 应用程序
【发布时间】：2011-07-29 00:31:17
【问题描述】：

Tablesorter 不适用于 Visual Studio 2010 上的 MVC3 Web 应用程序？

重现问题：

打开 Visual Studio 2010
创建一个新的 ASP.NET MVC 3 Web 应用程序

将 Views/Shared/_Layout.cshtml 替换为：

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

@* This doesn't work and I don't know why *@
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.min.js")" type="text/javascript"></script>

@*This works*@
@*<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
*@

</head>
<body>
    <div class="page">

    <div id="main">
        @RenderBody()
    </div>
    </div>
</body>
</html>

将 Views/Home/Index.html 替换为：

<h2>debug jquery Kano</h2>
<p>
    testing
</p>

<table id="theTable" class="tablesorter">
<thead>
    <tr><th>Tic</th><th>Tac</th><th>Toe</th></tr>
</thead>
<tbody>
    <tr><td>o</td><td>o</td><td>x</td></tr>
    <tr><td>x</td><td>o</td><td>o</td></tr>
    <tr><td>o</td><td>x</td><td>x</td></tr>
</tbody>
</table>

<script type="text/javascript">
//    $(function () {
//        alert("$: jQuery found!");
//    });

    $(document).ready(function () {
        $("#theTable").tablesorter();
    });
</script>

从http://tablesorter.com下载jquery.tablesorter.min.js并放入/Scripts目录。
构建并运行应用程序。

如您所见，Index.cshtml 中的 tablesorter 调用似乎没有成功执行。

感谢您的帮助！

干杯，凯文

【问题讨论】：

标签： asp.net-mvc-3 tablesorter

【解决方案1】：

最好的办法是像这样将 tablesorter.js 添加到 bundleconfig.cs-

bundles.Add(new ScriptBundle("~/bundles/jquery.tablesorter").Include("~/Scripts/jquery.tablesorter.js"));

在 _layout.cshtml 页面上添加css-

@Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
          <link href="@Url.Content("~/Content/style.css")" rel="stylesheet" type="text/css" />
        </head>

并在底部添加类似脚本

 </footer>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @RenderSection("scripts", required: false)
    </body>
</html>

并在页面上使用为它添加一个会话.. 所以你不必在每个页面上都使用

@section scripts
{
    @Scripts.Render("~/bundles/jquery.tablesorter")
    <script type="text/javascript">       

        $(document).ready(function () {
            $("#myTable").tablesorter();
        });

        $(document).ready(function () {         
            $("#myTable").tablesorter({ sortList: [[0, 0], [1, 0]] });
        });
    </script>
}

【讨论】：

【解决方案2】：

问题似乎在于 Javascript 的缓存方式。解决方法是在运行之间关闭浏览器的所有实例，并尽量减少浏览器上后退按钮的使用。

【讨论】：