2017-09-07 1 views
-2

Ich habe eine Daten GridView in asp.net, die über ein Dropdown-Menü aufgefüllt wird (wenn das Menü ändert, ändert es die Gridview mit verschiedenen Daten von einer SQL-Abfrage aufgefüllt). Ich kann die Such- und Paging-Funktion nicht mit JavaScript für das Leben von mir arbeiten. Alle Links und Referenzen befinden sich auf der Masterseite, wie unten gezeigt. Ich brauche die Suchfunktion, um mit dem Paging zu arbeiten. Ich bin mir nicht ganz sicher, wo ich falsch liege.Javascript Datat funktioniert nicht mit MasterPage Asp.Net

<%@ 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> 

und hier ist der Content-Seite mit einem Gridview (Aufgeführt als Gridview1) Ich versuche, das Java-Skript vorstellen:

<%@ 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

+1

Bitte [Bearbeiten] Sie Ihre Frage Titel zu etwas beschreibenden. Der aktuelle Titel ist nichts anderes als eine Wiederholung von zwei der Tags, was bedeutungslos ist. Ihr Titel sollte das Problem, das Sie haben, oder die Frage, die Sie stellen, auf eine Weise beschreiben, die aussagekräftig ist, wenn ein zukünftiger Benutzer sie in einer Liste von Suchergebnissen sieht. Wenn Sie schon dabei sind, sollten Sie genauer auf das Problem eingehen als * es nicht zur Arbeit bringen *. Siehe [fragen]. –

+0

nicht klar ..... – AsifAli72090

+0

Bitte beschränken Sie Ihren Code auf das, was erforderlich ist, um das Problem zu beheben. Brauchen wir wirklich ALLE diese Masterpage Markup, ChartArea Markup etc? –

Antwort

0

Überprüfen Sie den HTML-Code, um gerendert Die Seite. Ich wette, die ID für Gridview ist nicht: #Gridview1 für den Tisch.

Stattdessen verwenden:

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

Dies wird die vollständig aufgelöst ID erhalten, wie durch die asp.net Engine gerendert. Siehe: https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid(v=vs.110).aspx. Dann recherchieren Sie auf asp.net webforms name mangling, um zu sehen, warum Webforms dies tut. Vor allem mit Masterseiten.

0

Um es laufen zu lassen, können Sie ClientIDmode = static angeben, so dass es die statische ID zur Kontrolle gibt, hier haben Sie die Masterseite verwendet, so dass die ID auf der Content-Platzhalter-ID der Masterseite basiert.

Verwandte Themen