代码之家 › 专栏 › 技术社区 › Darth Continent

是否将字符串[]呈现为一系列可编辑控件?

string formatting dynamic asp.net

Darth Continent · 技术社区 · 16 年前

我有一个字符串[]包含从一段文本中解析出来的单个单词。我需要在自己的单元格中显示每个单词,并根据单词的长度为每个单元格指定一个动态宽度。我希望在每行的最大宽度内尽可能多地使用单词。

简而言之,我试图取一段给定的文本,并以一种类似于纯文本文档的方式将其呈现为一系列可编辑控件,每个单词在每一行中只消耗其所需的空间。

我首先尝试在表模式下使用repeatlayout和repeatcolumns设置值为10的数据列表,其中包含标签控件的中继器;这导致每行有10个单词,但每个单元格的宽度都是固定的。

我已经考虑过使用一个网格视图和一个单列,我会在每行中填充尽可能多的单词(以标签控件的形式),在构建整个段落之前根据需要添加新行。

有人能分享一种优雅的方式吗?

3 回复 | 直到 16 年前

Ben Lesh 16 年前

您要寻找的魔力是“contenteditable”属性。适用于IE、Firefox和Chrome。

我不知道你到底在干什么,拉莫…但这应该奏效:

您的代码隐藏:

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;
}

你的.ASPX:

<asp:Repeater ID="rptr" runat="server">
    <ItemTemplate>
        <span contenteditable="true" style="border: solid 1px;" onkeyup="updateItem(event, <%#Container.ItemIndex%>)">
            <%#Container.DataItem%></span>
    </ItemTemplate>
</asp:Repeater>
<asp:HiddenField ID="hdnResult" runat="server" />
<asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" />
<script type="text/javascript" language="javascript">
    //<![CDATA[
    function updateItem(e, index) {
        //get the source element. (magic here for cross browser lameness)
        var src;
        if(window.event) {
            e = window.event;
            src = e.srcElement;
        }else{
            src = e.target;
        }
        //update our item in our array.
        document.stringItems[index] = src.innerHTML;
        //update our hidden field.
        var s = '';
        var space = false;
        for (var i = 0; i < document.stringItems.length; i++) {
            if (space)
                s += ' ';
            else
                space = true;
            s += document.stringItems[i];
        }
        var hdnResult = document.getElementById('<%=hdnResult.ClientID%>');
        hdnResult.value = s;
    }
    //]]>
</script>
<asp:Label ID="lblResult" runat="server"></asp:Label>

你也必须为onkeypress添加一些javascript,以确保它们不会添加回车或空格,或者任何你不希望它们加入的内容…但这是基本的想法。

希望有帮助。祝你好运。

John 16 年前

我首先要说的是,从用户界面的角度来看,我不完全确定您为什么需要这样做,但如果必须这样做,您可以按照以下几行做:

从你的字符串开始
创建一个 List<List<string>>
循环遍历原始数组,将字符串添加到新的 List<string>
一旦达到所需的字符总长度,添加 列表<字符串> 对你 列表<列表<字符串>> (包含您的行)
重复这些步骤,直到您完全完成了原始数组

完成此操作后,您可以将列表o'列表绑定到如下所示的中继器(伪代码;可能有点关闭):

<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>

LorenVS 16 年前

我能想到的接近这样的东西的最好方法就是简单地使用一个中继器,然后把剩下的东西都浮起来。

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