Javascript数据表不适用于母版页Asp.Net_Javascript_Asp.net_Gridview_Datatable_Webforms

Javascript数据表不适用于母版页Asp.Net

javascript asp.net gridview

Javascript数据表不适用于母版页Asp.Net,javascript,asp.net,gridview,datatable,webforms,Javascript,Asp.net,Gridview,Datatable,Webforms,我在asp.net中有一个数据GridView，它通过下拉菜单填充（当菜单更改时，它使用SQL查询填充的不同数据更改GridView）。我无法让搜索和分页功能在我的一生中使用JavaScript。所有的链接和参考都在母版页中，如下图所示，我需要搜索功能和分页功能，我不太确定哪里出了问题 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="UserManageme

我在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>


刀具路径软件




--%%>


//工具提示
$（'.tooltip demo'）。工具提示({
选择器：“[数据切换=工具提示]”，
容器：“主体”
})

这是一个包含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>








工具






按钮
{
利润率：10px；
}








$（文档）.ready（函数（）{
$（'#Gridview1'）.DataTable（）；
} );

检查呈现到页面的HTML。我打赌gridview的Id不是：

#Gridview1

而是使用：

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


$（文档）.ready（函数（）{
$（'#'）。数据表（）；
} );

这将获得asp.net引擎呈现的完全解析的ID。请参阅：。然后对asp.net webforms名称混乱进行一些研究，看看webforms为什么会这样做。特别是母版页。

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

请将您的问题标题改为描述性内容。当前的标题只是其中两个标签的重复，没有意义。当未来的用户在搜索结果列表中看到你的问题时，你的标题应该以一种有意义的方式来描述你所遇到的问题。当你做这件事的时候，对这个问题要更具体一些，不要让它起作用。请参阅。不清楚……请将您的代码限制为解决此问题所需的代码。我们真的需要所有母版页标记、图表区域标记等吗？