Rendern Sie eine Zeichenfolge [] als eine Reihe von bearbeitbaren Steuerelementen?

Question

Ich habe eine Zeichenfolge [] mit einzelnen Wörtern aus einem Absatz des Textes analysiert. Ich muss jedes Wort in seiner eigenen Zelle anzeigen und jeder Zelle eine dynamische Breite zuweisen, die auf der Länge des Worts basiert. Ich möchte so viele Wörter wie möglich innerhalb der maximalen Breite jeder Zeile haben.

Kurz gesagt, ich versuche, einen bestimmten Textabschnitt als eine Reihe von bearbeitbaren Steuerelementen in einer Weise darzustellen, die wie ein reines Textdokument aussieht, wobei jedes Wort nur seinen erforderlichen Platz verbraucht auf jeder "Linie".

Ich habe zuerst versucht, eine DataList mit RepeatLayout im Tabellenmodus und RepeatColumns auf einen festgelegten Wert von 10 zu verwenden, mit einem Repeater innerhalb eines Label-Steuerelements; Dies führte zu 10 Wörtern pro Zeile, aber jeder Zelle mit einer festen Breite.

Ich habe überlegt, eine GridView mit einer einzigen Spalte zu verwenden, die ich mit so vielen Wörtern (in Form von Label-Steuerelementen) pro Zeile füllen würde, wie es passt, Hinzufügen neuer Zeilen nach Bedarf, bis der gesamte Absatz erstellt ist.

Könnte jemand bitte einen eleganten Weg teilen, dies zu tun?

Answer 1

Die Magie, nach der Sie suchen, ist das Attribut "contenteditable". Funktioniert in IE, Firefox und Chrome.

Ich bin nicht sicher, was zum Teufel Sie mit diesem zu tun, lmao ... aber dies sollte funktionieren:

Ihr Code hinter:

protected void Page_Load(object sender, EventArgs e) 
{ 
    //creating some bogus collection of strings. 
    string[] parts = { "this", "is", "a", "test", "of", "the", "goofiest", "ui", "ever" }; 
    //bind it to the repeater. 
    rptr.DataSource = parts; 
    rptr.DataBind(); 
    //now we'll add them to a JavaScript array we can access client side. 
    StringBuilder sb = new StringBuilder(); 
    sb.Append("document.stringItems = new Array();"); 
    for (int i = 0; i < parts.Length; i++) 
     sb.AppendFormat("document.stringItems[{0}] = '{1}';", i, parts[i]); 
    ScriptManager.RegisterClientScriptBlock(this, GetType(), "someKey", sb.ToString(), true); 
} 
protected void btnTest_Click(object sender, EventArgs e) 
{ 
    //display the result just so we can see it's working. 
    lblResult.Text = hdnResult.Value; 
} 

Ihre .ASPX:

Sie müssen auch Javascript für die onkeypress hinzufügen, um sicherzustellen, dass sie keine Wagenrücklaufzeichen oder Leerzeichen hinzufügen oder was auch immer Sie nicht möchten, dass sie einfügen ... aber das ist die Grundidee .

Ich hoffe, dass hilft. Viel Glück.

Answer 2

Der beste Weg, den ich mir vorstellen kann, wenn man sich so etwas nähert, ist einfach einen Repeater zu verwenden und alles zu schweben.

<asp:Repeater runat="server" id="rptr"> 
    <ItemTemplate> 
     <span style="float:left; height:22px; line-height:22px;"><%# Eval("Word") %></span> 
    </ItemTemplate> 
</asp:Repeater> 

Answer 3

ich beginnen werde, indem er sagte, dass aus einer Perspektive Benutzeroberfläche, ich bin nicht ganz sicher, warum Sie dies tun müssen, würde, aber wenn es Sie würden zusammen etwas tun getan werden muss, diese Linien:

• mit string []
• erstellen List<List<string>>
• Schleife durch Ihre ursprüngliche Array, das Hinzufügen der Saiten zu einem neuen List<string>
• O Beginnen nce Sie haben Ihre gewünschte Gesamtzeichenlänge erreicht, fügen Sie den List<string> zu Ihrem List<List<string>>
• wiederholen (was Ihre Zeilen enthält) diese Schritte, bis Sie den ganzen Weg durch Ihre ursprüngliche Array gegangen

Sobald dies ist getan, binden Sie die Liste der Liste an einen Repeater wie folgt (Pseudocode; könnte ein bisschen sein):

<asp:Repeater id="rpt1" runat="server"> 
<ItemTemplate> 
    <div> 
    <asp:Repeater id="rpt2" runat="server" DataSource='<%# Container.DataItem %>'> 
    <ItemTemplate> 
     <asp:TextBox id="txt1" runat="server" Text='<%# Container.DataItem %>' Width='<%# MyWidthAlgorithm(Container.DataItem) %>' 
    </ItemTemplate> 
    </asp:Repeater> 
    </div> 
</ItemTemplate> 
</asp:Repeater>