Question

我在asp.net中有一个数据GridView，它通过下拉菜单填充（当菜单更改时，它会使用由SQL查询填充的不同数据更改gridview）。在我的生活中，我无法获得使用JavaScript的搜索和分页功能。所有的链接和引用都在主页面中，如下所示，我需要搜索功能以及分页我不太确定我哪里出错了。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" 
    Inherits="UserManagement.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>ToolPath Software</title>
    <!-- Bootstrap Core CSS -->
    <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/bootstrap-social.css" rel="stylesheet" type="text/css" />
    <!-- MetisMenu CSS -->
    <link href="/css/metisMenu.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="/css/style.css" rel="stylesheet">
    <!-- Morris Charts CSS -->
    <link href="/css/morris.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="jquery-ui.min.css" rel="stylesheet">
    <link href="jquery.comiseo.daterangepicker.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script 
src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- jQuery -->
    <script src="/js/jquery.min.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="../lib/bootstrap/js/bootstrap.min.js"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script src="/js/metisMenu.min.js"></script>
    <!-- Morris Charts JavaScript -->
    <script src="/js/raphael-min.js"></script>
    <script src="/js/morris.min.js"></script>
    <!-- Custom Theme JavaScript -->
    <script src="/js/custom.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="moment.min.js"></script>
    <script src="jquery.comiseo.daterangepicker.js"></script>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body class="theme-blue">
<form id="form1" runat="server">
<asp:HiddenField ID="HiddenSlug" runat="server" />
<asp:HiddenField ID="HiddenRoleID" runat="server" />
<asp:HiddenField ID="HiddenRole" runat="server" 
OnValueChanged="HiddenRole_ValueChanged" />
<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" 
style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">ToolPath Software</a>
        </div>
        <!-- /.navbar-header -->
        <ul class="nav navbar-top-links navbar-right">
            <!-- /.dropdown -->
            <li>
<table border="0" align="left" cellpadding="7" cellspacing="7" 
style="margin-top:20px;" ><tr>
               <td>         
                   <div id="noti_Container">
<asp:HyperLink ID="HyperLink1" runat="server" 
</div>
 </td>
                  <td>
            </li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-
down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li>
                    <asp:HyperLink ID="HyperLinkProfile" runat="server"><i 
class="fa fa-user fa-fw"></i> My Profile</asp:HyperLink>

                    </li>                       
                    <li class="divider"></li>
                    <li>
                    <asp:LinkButton ID="LinkLogOut" runat="server" 
onclick="LinkLogOut_Click"><i class="fa fa-sign-out fa-fw">
</i>Logout</asp:LinkButton>                        
                    </li>
</td>
                 </tr>
                     </table>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->
        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu"> 
                   <%-- <li id='dashboard'>
                        <a href='/'><i class='fa fa-home fa-fw'></i> 
Dashboard</a>                                                                                     
                    </li>  --%>                    
                    <asp:Repeater ID="RepeaterMenu" runat="server"  
onitemdatabound="RepeaterMenu_ItemDataBound">
                    <ItemTemplate>
                    <li id='<%#Eval("Pageslug") %>'>
                        <a href='<%#Eval("PageUrl","/{0}") %>'><i 
class='<%#Eval("PageIcon","fa {0} fa-fw") %>'></i> <%#Eval("ModuleName") %> 
<asp:Literal ID="ltrArrow" runat="server"/></a>                                                         
                        <asp:Literal ID="ltrSubMenu" runat="server"/>
                    </li>
                    </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>
    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>
    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<script type="text/javascript">
    // tooltip 
    $('.tooltip-demo').tooltip({
        selector: "[data-toggle=tooltip]",
        container: "body"
    })       
</script>
</form>
</body>
</html>

以下是带有GridView的内容页面（列为Gridview1）我试图将java脚本引入：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" 
AutoEventWireup="true" CodeFile="Chart.aspx.cs" Inherits="Chart" %>

<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, 
Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" 
Runat="Server">
<div id="page-wrapper"> 
<br />
<br />
<br />
 <div class="subscription" align="center">
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
         <ContentTemplate>
             <asp:DropDownList ID="DropDownList1" runat="server" 
AutoPostBack="True" Height="47px" 
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" 
OnTextChanged="Refresh_Click">

             </asp:DropDownList>
             <asp:Button ID="Refresh" runat="server" OnClick="Refresh_Click" 
Text="Refresh" Height="47px"/>
             <asp:DropDownList ID="DropDownList2" runat="server" 
AutoPostBack="True" Height="47px" 
OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
                 <asp:ListItem>Tool</asp:ListItem>
             </asp:DropDownList>
             <br />
<br />
             <div class="table-responsive">
<asp:GridView ID="GridView1" runat="server" class="display table" 
width="100%" >
</asp:GridView>
</div>
             <br />
             <style>
.Button
{
    margin:10px;
}
</style>
             <div>
             <asp:Button ID="Btnreset" runat="server" 
OnClick="Btnreset_Click" Text="Reset Tool" Visible="False" CssClass="Button" 
/>

             <asp:Button ID="btnrstkit" runat="server" 
OnClick="btnrstkit_Click1" Text="Kit" Visible="False" CssClass="Button" 
margin="22px"/>
                 </div>
             <br />
             <asp:Label ID="lbltoolrst" runat="server"></asp:Label>
             <br />

             <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" 
Text="Compare " />
             <br />
     <asp:Chart ID="Tools" runat="server" Height="421px" Width="1200px" 
CssClass="chart" Palette="Grayscale">
       <Series>
    <asp:Series Name="Series1" IsValueShownAsLabel="True" Legend="Legend1" 
IsVisibleInLegend="False" LabelAngle="45" MarkerSize="9" Font="Microsoft 
Sans 
Serif, 14pt">
           </asp:Series>
</Series>
<ChartAreas>
    <asp:ChartArea Name="ChartArea1">
        <AxisY Enabled="False" LabelAutoFitMaxFontSize="12" 
MaximumAutoSize="80">
            <MajorGrid Enabled="False" />
            <MajorTickMark Enabled="False" />
        </AxisY>
        <AxisX TitleAlignment="Near" IsLabelAutoFit="False">
            <MajorGrid Enabled="False" />
            <MajorTickMark Enabled="False" />
            <LabelStyle Angle="45" Font="Microsoft Sans Serif, 14pt" />
        </AxisX>
        <AxisX2>
            <MajorGrid Enabled="False" />
            <MajorTickMark Enabled="False" />
        </AxisX2>
    </asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend Name="Legend1">
</asp:Legend>
</Legends>
</asp:Chart>
<br />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div style="width: 99%; height: auto; overflow: auto">
                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
  <!-- DataTables JavaScript -->
<script>
$(document).ready(function() {
$('#Gridview1').DataTable();
} );
</script>
</asp:Content>

enter image description here

Answer 1

检查呈现给页面的HTML。我敢打赌，gridview的Id不是：表#Gridview1。

改为使用：

<script>
$(document).ready(function() {
   $('#<%=Gridview1.ClientID%>').DataTable();
} );
</script>

这将获得由asp.net引擎呈现的完全解析的ID。见：https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid(v=vs.110).aspx。然后对asp.net webforms name mangling进行一些研究，看看为什么webforms会这样做。特别是母版页。

Answer 2

要使其运行，您可以提供ClientIDmode = static，以便它将提供静态ID来控制，这里您使用了母版页，因此id将基于母版页的内容占位符ID。

Javascript数据表不与MasterPage Asp.Net一起使用

2 个答案: