ASP.NET does not seem to see the .css or .js for DataTables -
i'm working on displaying tabular info sql database in 'aspx' page added mvc template project have made within visual studio 2013.
i have sql datasource connected database bringing basic table. can display info in 'datatable.aspx' file. not able datatables.js or .css files run. or not think running. have checked far..
i can see jquery having loaded, , did install both jquery , datatables in 'nuget' bundle manager through visual studio 2013 (demo)the .net tab in firefox (sometimes shows .js , .cs files in debug session in black or gray. -i think 'datatables.aspx' file right (below).
<%: title %>. tasktable
<div> <asp:sqldatasource id="sqldatasource1" runat="server" connectionstring="<%$ connectionstrings:taskrfidatabaseconnectionstring %>" selectcommand="select [taskid], [tasktypeid], [taskcreatedby], [taskname], [taskdescription], [taskcreateddatetime] [tasktable]"> </asp:sqldatasource> <asp:repeater id="repeater1" runat="server" datasourceid="sqldatasource1"> <headertemplate> <table id="datatable"> <thead> <tr> <th>taskid</th> <th>tasktypeid</th> <th>taskcreatedby</th> <th>taskname</th> <th>taskdescription</th> <th>taskcreateddatetime</th> </tr> </thead> </headertemplate> <itemtemplate> <tr> <td><%# eval("taskid") %></td> <td><%# eval("tasktypeid") %></td> <td><%# eval("taskcreatedby") %></td> <td><%# eval("taskname") %></td> <td><%# eval("taskdescription") %></td> <td><%# eval("taskcreateddatetime") %></td> </tr> </itemtemplate> <footertemplate> </table> </footertemplate> </asp:repeater> </div> the site master has references .js , .css files datatables.
<%@ master language="c#" autoeventwireup="true" codebehind="site.master.cs" inherits="compass.sitemaster" %> <!doctype html> <html lang="en"> <head runat="server"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%: page.title %> - compass</title> <link href="content/datatables-1.10.3/css/jquery.datatables.css" rel="stylesheet" /> <script src="scripts/jquery-2.1.1.js"></script> <script src="scripts/datatables-1.10.3/media/js/jquery.datatables.js"></script> <asp:placeholder runat="server"> <%: scripts.render("~/bundles/modernizr") %> </asp:placeholder> <webopt:bundlereference runat="server" path="~/content/css" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> </head> <body> <form runat="server"> <asp:scriptmanager runat="server"> <scripts> <%--to larn more bundling scripts in scriptmanager see http://go.microsoft.com/fwlink/?linkid=301884 --%> <%--framework scripts--%> <asp:scriptreference name="msajaxbundle" /> <asp:scriptreference name="jquery" /> <asp:scriptreference name="bootstrap" /> <asp:scriptreference name="respond" /> <asp:scriptreference name="webforms.js" assembly="system.web" path="~/scripts/webforms/webforms.js" /> <asp:scriptreference name="webuivalidation.js" assembly="system.web" path="~/scripts/webforms/webuivalidation.js" /> <asp:scriptreference name="menustandards.js" assembly="system.web" path="~/scripts/webforms/menustandards.js" /> <asp:scriptreference name="gridview.js" assembly="system.web" path="~/scripts/webforms/gridview.js" /> <asp:scriptreference name="detailsview.js" assembly="system.web" path="~/scripts/webforms/detailsview.js" /> <asp:scriptreference name="treeview.js" assembly="system.web" path="~/scripts/webforms/treeview.js" /> <asp:scriptreference name="webparts.js" assembly="system.web" path="~/scripts/webforms/webparts.js" /> <asp:scriptreference name="focus.js" assembly="system.web" path="~/scripts/webforms/focus.js" /> <asp:scriptreference name="webformsbundle" /> <%--site scripts--%> </scripts> </asp:scriptmanager> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" runat="server" href="~/">application name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a runat="server" href="~/">home</a></li> <li><a runat="server" href="~/about">about</a></li> <li><a runat="server" href="~/contact">contact</a></li> <li><a runat="server" href="~/datatable">datatable</a></li> </ul> <asp:loginview runat="server" viewstatemode="disabled"> <anonymoustemplate> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/account/register">register</a></li> <li><a runat="server" href="~/account/login">log in</a></li> </ul> </anonymoustemplate> <loggedintemplate> <ul class="nav navbar-nav navbar-right"> <li><a runat="server" href="~/account/manage" title="manage account">hello, <%: context.user.identity.getusername() %> !</a></li> <li> <asp:loginstatus runat="server" logoutaction="redirect" logouttext="log off" logoutpageurl="~/" onloggingout="unnamed_loggingout" /> </li> </ul> </loggedintemplate> </asp:loginview> </div> </div> </div> <div class="container body-content"> <asp:contentplaceholder id="headercontent" runat="server"> <link href="content/datatables-1.10.3/css/jquery.datatables.css" rel="stylesheet" /> <script src="scripts/jquery-2.1.1.js"></script> <script src="scripts/datatables-1.10.3/jquery.datatables.js"></script> </asp:contentplaceholder> <asp:contentplaceholder id="maincontent" runat="server"> </asp:contentplaceholder> <hr /> <footer> <p>© <%: datetime.now.year %> - asp.net application</p> </footer> </div> </form> </body> </html> where else check? of examples have read have been either dealing simple page or using different methods. base of operations web/mvc template visual studio 2013 , jquery datatables.js installed through nuget.
some of other pages have hit: jquery datatable not working in asp.net mvc 4
http://www.codeproject.com/articles/155422/jquery-datatables-and-asp-net-mvc-integration-part
is there anyplace else should looking? andy..
woo hoo.. found it.
i'm learning ropes in world of mvc 5 , jquery/datatables.
let me restate problem: had vs(2013) project (web / .netframework4.5.1 / asp.net web application / webforms (checkd 'webforms', mvc)) added in references jquery & datatables through nuget bundle manager. wrongly thought magically set of references needed wireup
i added next objects via drag drop cookie cutter template used above info toolbox:
repeater (source set 'sqldatasource1') sqldatasource (setup connection database)so thought had of jquery / js / css using datatables. have done in straight javascript before (aptana) , not figure out references css have inserted. drove me crazy.
i know, it.. scripts there not doing anything. table generated didn't have css or scripty goodness wanted. problem no css or script behavior expected datatables.
what did: 1. started on new project, added jquery , datatables through nuget bundle manager. 2. opened "site.master" file , added references css in section
<link href="content/datatables-1.10.3/css/jquery.datatables.css" rel="stylesheet"/> added reference jquery.datatables.js file in same file "site.master"..
<asp:scriptmanager runat="server"> <scripts> <%--framework scripts--%> <asp:scriptreference name="msajaxbundle" /> <asp:scriptreference name="jquery" /> <asp:scriptreference path="~/scripts/datatables-1.10.3/jquery.datatables.js" /> <asp:scriptreference name="bootstrap" /> <asp:scriptreference name="respond" /> <asp:scriptreference name="webforms.js" assembly="system.web" path="~/scripts/webforms/webforms.js" /> <asp:scriptreference name="webuivalidation.js" assembly="system.web" path="~/scripts/webforms/webuivalidation.js" /> <asp:scriptreference name="menustandards.js" assembly="system.web" path="~/scripts/webforms/menustandards.js" /> <asp:scriptreference name="gridview.js" assembly="system.web" path="~/scripts/webforms/gridview.js" /> <asp:scriptreference name="detailsview.js" assembly="system.web" path="~/scripts/webforms/detailsview.js" /> <asp:scriptreference name="treeview.js" assembly="system.web" path="~/scripts/webforms/treeview.js" /> <asp:scriptreference name="webparts.js" assembly="system.web" path="~/scripts/webforms/webparts.js" /> <asp:scriptreference name="focus.js" assembly="system.web" path="~/scripts/webforms/focus.js" /> <asp:scriptreference name="webformsbundle" /> <%--site scripts--%> </scripts> </asp:scriptmanager> cleaned / rebuilt project
added final script phone call aspx page (final markup below)
<%@ page title="home page" language="c#" masterpagefile="~/site.master" autoeventwireup="true" codebehind="default.aspx.cs" inherits="maybe._default" %> staffid lname fname workphone <%# eval("staffid") %> <%# eval("lname") %> <%# eval("fname") %> <%# eval("workphone") %> "myselection text">
$('#datatable').datatable();rebuilt , ran .. worked!!. andy
sources: http://www.youtube.com/watch?v=bfclyawhvcm sql repeater http://msdn.microsoft.com/en-us/library/bb398991%28v=vs.100%29.aspx
asp.net-mvc datatables
No comments:
Post a Comment