| Bedingt durch ein Posting in der ASP.NET-Mailingliste habe ich ein wenig mit der ASP.NET DataList gespielt - Resultat ist die Möglichkeit, Inhalt in DataListItems per Mausklick ein- und auszublenden.
Zur Verdeutlichung rechts einige Screenshots. Dargestellt sind die Kunden aus der bekannten Northwind-Datenbank.
Der Code der .aspx-Datei:
<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false" Inherits="BlogSamples.DataListItemInvisible._default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>default1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:datalist id="DataList1" runat="server">
<headertemplate><h1>Kunden</h1> </headertemplate>
<itemstyle backcolor="#ffffff" />
<itemtemplate>
<asp:linkbutton runat="server" id="lbtShowHide" commandname="show">
<%# DataBinder.Eval(Container, "DataItem.CompanyName") %>
</asp:linkbutton>
<br/>
<asp:label id="lblAddress" runat="server" visible="False">
<%# DataBinder.Eval(Container, "DataItem.Address") %>
</asp:label>
<asp:label id="lblCountry" runat="server" visible="False">
<%# DataBinder.Eval(Container, "DataItem.Country") %>
</asp:label>
<hr/>
</itemtemplate>
</asp:datalist>
</form>
</body>
</html>
Der Code der .aspx.cs-Datei:
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.OleDb;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace BlogSamples.DataListItemInvisible
{
/// <summary>
/// Zusammenfassung fr default.
/// </summary>
public class _default : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataList DataList1;
private void Page_Load(object sender, System.EventArgs e) {
if(!Page.IsPostBack)
{
// Datenbindung
DataList1.DataSource = this.ReadDataFromDB();
DataList1.DataKeyField = "CustomerID";
DataList1.DataBind();
}
}
// Daten aus der Northwind-DB lesen
private DataSet ReadDataFromDB() {
OleDbConnection MyNWConn =
new OleDbConnection("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("../data/Nwind.mdb"));
DataSet MyDataSet = new DataSet();
OleDbDataAdapter oCommand = new OleDbDataAdapter();
OleDbCommand oledbcmd = new OleDbCommand();
oledbcmd.CommandType = CommandType.StoredProcedure;
oledbcmd.CommandText = "[SelectCustomers]";
oledbcmd.Connection = MyNWConn;
oCommand.SelectCommand = oledbcmd;
oCommand.Fill(MyDataSet,"Orders");
MyNWConn.Close();
return MyDataSet;
}
#region Vom Web Form-Designer generierter Code
override protected void OnInit(EventArgs e) {
//
// CODEGEN: Dieser Aufruf ist fr den ASP.NET Web Form-Designer erforderlich.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Erforderliche Methode fr die Designeruntersttzung.
/// Der Inhalt der Methode darf nicht mit dem Code-Editor gendert werden.
/// </summary>
private void InitializeComponent() {
this.Load += new System.EventHandler(this.Page_Load);
this.DataList1.ItemCommand += new DataListCommandEventHandler(DataList1_ItemCommand);
}
#endregion
//Auswertung des geklickten LinkButtons
private void DataList1_ItemCommand(object source, DataListCommandEventArgs e) {
if(e.CommandName == "show") {
((Label)e.Item.FindControl("lblAddress")).Visible = true;
((Label)e.Item.FindControl("lblCountry")).Visible = true;
((LinkButton)e.Item.Controls[1]).CommandName = "hide";
}
if(e.CommandName == "hide") {
((Label)e.Item.FindControl("lblAddress")).Visible = false;
((Label)e.Item.FindControl("lblCountry")).Visible = false;
((LinkButton)e.Item.FindControl("lbtShowHide")).CommandName = "show";
}
}
}
}
|
Zunächst die Liste vor dem Klick auf den Namen des Kunden:
Nach dem Klick auf den Namen des Kunden erscheinen die übrigen Daten:
Ein weiterer Klick auf den Namen lässt die erweiterten Informationen wieder verschwinden:
|