2011-07-29 99 views
1

Tablesorter不適用於Visual Studio 2010上的MVC3 Web應用程序?Tablesorter不適用於Visual Studio 2010上的MVC3 Web應用程序

要重現該問題:

  • 打開Visual Studio 2010中
  • 創建一個新的ASP.NET MVC 3 Web應用程序
  • 更換次數/共享/ _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> 
    
  • 將視圖/主頁/ 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調用似乎沒有成功執行。

謝謝你的幫助!

乾杯, 凱文

回答

0

的問題似乎是在JavaScript是緩存的方式。解決方法是在運行之間關閉瀏覽器的所有實例,並儘量減少瀏覽器上後退按鈕的使用。

3

百威做的就是添加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> 
} 
相關問題