GridView + ItemTemplate + JavaScript + AJAX 使用方法
WebForm4.aspx |
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" MasterPageFile="~/Site.master" Inherits="WebApplication9.WebForm4" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <script type="text/javascript"> function chk(obj) { var hiddenobjid = (obj.id).replace("MainContent_GridView1_HyperLink1_", "MainContent_GridView1_HiddenField1_"); var ajaxobjid = (obj.id).replace("MainContent_GridView1_HyperLink1_", "MainContent_GridView1_Label1_"); var itemcount = 10; for (var i = 0; i < itemcount; i++) { document.getElementById("MainContent_GridView1_Label1_" + i.toString()).setAttribute("style", "display:none"); } document.getElementById(ajaxobjid).setAttribute("style", "display:"); ajax_result(document.getElementById(hiddenobjid).getAttribute("Value").toString(), ajaxobjid); } function ajax_result(recid, objid) { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById(objid).innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", "WebForm1.aspx?TeamID=" + recid , true); xmlhttp.send(); } </script> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.\SqlExpress; Initial Catalog=Soccer; Integrated Security=SSPI" SelectCommand="SELECT * FROM dbo.Team" /> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true" PageSize="10"> <Columns> <asp:TemplateField HeaderText="Team Name" ItemStyle-Width="250"> <ItemTemplate> <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Eval("Team_ID") %>' /> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#" onclick="chk(this)" Text='<%# Eval("Team_Name") %>' /> <asp:Label ID="Label1" runat="server" Text="" style="display:none" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </asp:Content> |
WebForm1.aspx |
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication9.WebForm1" %> |
WebForm1.aspx.cs |
using System; using System.Text; using System.Data; using System.Data.SqlClient; using System.Web.UI; namespace WebApplication9 { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { GetTeamReader(); } private void GetTeamReader() { String URLGet = Request.QueryString["TeamID"]; if (URLGet != null) { String connectionString = "Data Source=.\\SqlExpress; Initial Catalog=Soccer; Integrated Security=SSPI"; SqlConnection con1 = new SqlConnection(connectionString); con1.Open(); StringBuilder sb = new StringBuilder(); sb.Append("SELECT * FROM Player WHERE Team_ID = "); sb.Append(URLGet); sb.Append("; "); SqlCommand cmd1 = new SqlCommand(sb.ToString(), con1); SqlDataReader dr = cmd1.ExecuteReader(); String HTMLResult = ""; if (dr.HasRows) { Response.Write("<br />"); while (dr.Read()) { HTMLResult += " - " + dr[1].ToString() + "<br />"; } } Page.Controls.Add(new LiteralControl(HTMLResult)); con1.Close(); con1.Dispose(); } } } } |