ASP.NET: Langen Text per Klick ein- und ausklappen

Hallo!

Ich sitze seit langem mal wieder an einem kleinen privaten Projekt. Aus Platzgründen und aus Gründen der Optik würde ich gerne bsw. News ein- und ausklappen.
Als Beispiel:

• Newstitel
  Newstext Newstext Newstext Newstext Newstext Newstext Newstext Newstext..

Wenn man auf das "+" klickt wird der Text ausgeklappt und bei nochmaligem Klicken wieder eingeklappt. (also wie bei der Quellcodeansicht hier im Forum)
Nun hab ich schon eine ganze Weile im Netz gesucht und immer finde ich nur TreeView als Vorschlag, das funktioniert zwar soweit auch aber der Text ist so lang, dass er meine Seite komplett in die Breite zieht.
Wenn ich überall in dem TreeView Element max. 400px Breite angebe, bringt dies leider auch nichts.
Ich denke TreeView hat keine Möglichkeit den Text umzubrechen oder?
Dann ist aber die Frage, was könnte man dafür noch nehmen ohne explizit Java zu lernen?

Gruß sKiLLeSS

Hallo,

Du kannst das entweder clientseitig oder serverseitig lösen.

Beispiel für clientseitig:
Sende den kurze Text und den kompletten Text zum Browser und zeige zunächst nur (mittels CSS und Javascript) die kurze Version an. Bei einem Click auf das Pluszeichen tauschst du dann den kurzen mit dem langen Text aus. Das geht z.B. mit jQuery und toggle() sehr leicht. Statt einen langen und einen kurzen Text zu senden kannst du ggf. das Kürzen auch mittels Javascript vornehmen.

Beispiel für Serverseitig:
Sende zunächst nur den kurzen Text. Mach aus dem Pluszeichen ein Linkbutton. Bei einem Klick auf den Button tauschst du (serverseitig) den kurze Text durch einen langen Text aus.

Beispiel für eine Kombination aus Client und Server (AJAX):
Sende zunächst nur den kurzen Text. Bei einem Click auf das Pluszeichen setzt du einen AJAX-Request an den Server ab, der dir den langen Text sendet. Tausche dann den kurzen Text durch den langen Text aus.

Grüße,
Andre

Entweder verwendest du die bereits genannte JQuery Variante, oder verwendest den CollapsiblePanelExtender aus dem AjaxControlToolkit: http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/CollapsiblePanel/CollapsiblePanel.aspx

Eine dritte Variante wäre, in dem Control in welchem der Text angezeigt wird, dass Du cleintseitig mit JavaScript zuerst

overflow="hidden"

machst und wenn ein Klick darauf geschieht den overflow wieder zulässt.

Als Beispiel (Ist VS2010 und daher JQuery-Syntax)

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" Inherits="ASP.NET.LangenTextperKlickeinUndAusklappen._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
        <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1-vsdoc.js" ></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#Header").click(function () {
                    var headerBefore = $("#Header");
                    $("#Header").css("width", "auto");
                    $("#Header").css("height", "auto");
                    $("#Header").css("background-color", "Yellow");
                });
            });
        </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <div id="NewsContent" style="width:auto; height:auto; overflow:hidden;">
    <div id="Header" style="width:50px; height:15px; overflow:hidden; border:2px; border-bottom-style:groove;">Dies ist ein öffentlicher oder freigegebener Computer</div>
    <br />
    <div id="Content" style="width:auto; height:auto;">
    Ok. Super. Werde ich morgen noch machen...
    Ich habe vorhin (um ca. 20.00 uhr) noch schnell darauf geschaut. Diagramm eins (Aufg.a) finde ich ok. Bei B&C musst du mehr oder weniger nur die 2 Buchungen (objekte) reinzeichnen. Sonst sahen die ok aus! Also näm z'lang...


    Ha geng no kes UML Buech ufta... I maag eifach nid ;-)
    Hilbä!
    </div>
    </div>
</asp:Content>

Wenn man dann auf das entsprechende Div klickt wirds gelb und der ganze Inhalt wird sichtbar. Bei einem weiteren Klick passiert noch nichts. (Quick and dirty)