SQLDataSource + GridView + ItemTemplate + DropDownList + JavaScript (DOM) 使用方法

 
SQLDataSource + GridView + ItemTemplate + DropDownList + JavaScript (DOM) 使用方法
 

   WebForm5.aspx
 
   <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master"
   AutoEventWireup="true" CodeBehind="WebForm7.aspx.cs" Inherits="WebApplication9.WebForm7" %>
 
   <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
 
      <script type="text/javascript">
 
         function SelectTeam(obj) {
 
            if (obj.value.toString() == 0) {
 
               for (var k = 0; k < CountRow(); k++) {
 
                  document.getElementById("MainContent_GridView1_Label1_" + k.toString()).setAttribute("style", "display:");
 
               }
 
            }else{
 
               for (var j = 0; j < CountRow(); j++) {
 
                  if (document.getElementById("MainContent_GridView1_HiddenField2_" + j.toString()).getAttribute("value") == obj.value.toString()) {
 
                     document.getElementById("MainContent_GridView1_Label2").innerHTML = obj.options[obj.selectedIndex].text + " Player Name";
                     document.getElementById("MainContent_GridView1_Label1_" + j.toString()).setAttribute("style", "display:");
 
                  } else {
 
                     document.getElementById("MainContent_GridView1_Label1_" + j.toString()).setAttribute("style", "display:none");
 
                  }
 
               }
 
            }
 
         }
 
         function CountRow() {
 
            for (var i = 0; (document.getElementById("MainContent_GridView1_HiddenField1_" + i.toString()) != null); i++) {}
 
            return i;
 
         }
 
      </script>
 
   </asp:Content>
 
   <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 
      <asp:SqlDataSource ID="SqlDataSource1" runat="server"
      ConnectionString="Data Source=.\SqlExpress; Initial Catalog=Soccer; Integrated Security=SSPI"
      SelectCommand="SELECT * FROM dbo.Team ORDER BY Team_Name" />
 
      <asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="SqlDataSource1"
      DataTextField="Team_Name" DataValueField="Team_ID" onChange="SelectTeam(this);"
      AppendDataBoundItems="True">
         <asp:ListItem Selected="True" Text="All Record" Value="0"/>
      </asp:DropDownList>
 
      <br /><br />
 
      <asp:SqlDataSource ID="SqlDataSource2" runat="server"
      ConnectionString="Data Source=.\SqlExpress;
      Initial Catalog=Soccer; Integrated Security=SSPI"
      SelectCommand="SELECT * FROM dbo.Player" />
 
      <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource2"
      AutoGenerateColumns="false" GridLines="None" CellPadding="0"
      BorderStyle="None" >
 
         <Columns>
            <asp:TemplateField HeaderStyle-HorizontalAlign="Left">
            <HeaderTemplate>
               <asp:Label ID="Label2" runat="server" Text="Player Name" />
            </HeaderTemplate>
            <ItemTemplate>
               <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("Player_ID") %>' />
               <asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Eval("Team_ID") %>' />
               <asp:Label ID="Label1" runat="server" Text='<%# Eval("Player_Name") %>' style="display:" />
            </ItemTemplate>
            </asp:TemplateField>
         </Columns>
 
      </asp:GridView>
 
   </asp:Content>