c# - 网格视图截断多个空格（在文本框中工作正常）

Question

我有一个 gridview BoundField 需要显示字符串中存在的值 - 无需应用 HTML 格式并在其间保留多个空格（就像文本框的行为方式一样）

我尝试了以下方法，但没有奏效。我们怎样才能让它像文本框一样工作？

标记

<form id="form1" runat="server">
<asp:TextBox ID="Textbox1" runat="server" EnableViewState="false"></asp:TextBox>
<asp:TextBox ID="Textbox2" runat="server" EnableViewState="false"></asp:TextBox>
<asp:TextBox ID="Textbox3" runat="server" EnableViewState="false"></asp:TextBox>
<asp:TextBox ID="Textbox4" runat="server" EnableViewState="false"></asp:TextBox>

<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="B" DataFormatString="<pre>{0}</pre>"
            HtmlEncode="true" ItemStyle-BackColor="Gray" />
        <asp:BoundField DataField="Name" HeaderText="D" HtmlEncode="true" ItemStyle-BackColor="Cyan" />
        <asp:BoundField DataField="Name" HeaderText="E" ItemStyle-BackColor="Orange" />
        <asp:BoundField DataField="Name" HeaderText="C" HtmlEncode="false" ItemStyle-BackColor="Teal" />
         <asp:BoundField DataField="Name" HeaderText="A" DataFormatString="<pre>{0}</pre>"
            HtmlEncode="false" ItemStyle-BackColor="Yellow" />

    </Columns>
</asp:GridView>
</form>

C# 代码

protected void Page_Load(object sender, EventArgs e)
{

    string selectedVal1 = "a    b";
    string selectedVal2 = "<br />";
    string selectedVal3 = "<script    1>";
    string selectedVal4 = "<script>";


    this.Textbox1.Text = selectedVal1;
    this.Textbox2.Text = selectedVal2;
    this.Textbox3.Text = selectedVal3;
    this.Textbox4.Text = selectedVal4;

    DataTable table = new DataTable();
    table.Columns.Add("Name", typeof(string));
    table.Rows.Add(selectedVal1);
    table.Rows.Add(selectedVal2);
    table.Rows.Add(selectedVal3);
    table.Rows.Add(selectedVal4);

    GridView2.DataSource = table;
    GridView2.DataBind();

}

HTML

<input name="Textbox1" type="text" value="a    b" id="Textbox1" />
<input name="Textbox2" type="text" value="&lt;br />" id="Textbox2" />
<input name="Textbox3" type="text" value="&lt;script    1>" id="Textbox3" />
<input name="Textbox4" type="text" value="&lt;script>" id="Textbox4" />

<div>
<table cellspacing="0" rules="all" border="1" id="GridView2" style="border-collapse:collapse;">
    <tr>
        <th scope="col">B</th><th scope="col">D</th><th scope="col">E</th><th scope="col">C</th><th scope="col">A</th>
    </tr><tr>
        <td style="background-color:Gray;">&lt;pre&gt;a    b&lt;/pre&gt;</td><td style="background-color:Cyan;">a    b</td><td style="background-color:Orange;">a    b</td><td style="background-color:Teal;">a    b</td><td style="background-color:Yellow;"><pre>a    b</pre></td>
    </tr><tr>
        <td style="background-color:Gray;">&lt;pre&gt;&lt;br /&gt;&lt;/pre&gt;</td><td style="background-color:Cyan;">&lt;br /&gt;</td><td style="background-color:Orange;">&lt;br /&gt;</td><td style="background-color:Teal;"><br /></td><td style="background-color:Yellow;"><pre><br /></pre></td>
    </tr><tr>
        <td style="background-color:Gray;">&lt;pre&gt;&lt;script    1&gt;&lt;/pre&gt;</td><td style="background-color:Cyan;">&lt;script    1&gt;</td><td style="background-color:Orange;">&lt;script    1&gt;</td><td style="background-color:Teal;"><script    1></td><td style="background-color:Yellow;"><pre><script    1></pre></td>
    </tr><tr>
        <td style="background-color:Gray;">&lt;pre&gt;&lt;script&gt;&lt;/pre&gt;</td><td style="background-color:Cyan;">&lt;script&gt;</td><td style="background-color:Orange;">&lt;script&gt;</td><td style="background-color:Teal;"><script></td><td style="background-color:Yellow;"><pre><script></pre></td>
    </tr>
</table>
 </div>

Answer 1

如果您想要值中的确切空间，那么您必须在设计视图中绑定 Gridview 上的字段...

试试下面的..

DataFormatString="<pre>{0}</pre>"  // - this formating displays the values with spaces

请注意，我们正在关闭 BoundField ( HtmlEncode="False") 中的 HTML 编码，因为我们正在使用pre标签。

来自HTML pre 标签

pre 元素中的文本以固定宽度字体（通常是 Courier）显示，并且保留空格和换行符。

来自BoundField.HtmlEncode 属性

HTML 编码字段值有助于防止显示跨站点脚本攻击和恶意内容。应尽可能启用此属性。

来自HttpServerUtility.HtmlEncode 方法

如果文本字符串包含小于号 (<) 或大于号 (>)，浏览器会将这些字符解释为 HTML 标记的左括号或右括号。当字符被 HTML 编码时，它们被转换为字符串 < 和 >，这会导致浏览器正确显示小于号和大于号。

在设计视图中设置gridview如下..

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name" HeaderText ="Name" DataFormatString="<pre>{0}</pre>" 
HtmlEncode="False" />
</Columns>
</asp:GridView>

在 C# 代码后面（这是我的示例...您可以在此应用您自己的...）

DataTable table = new DataTable();
table.Columns.Add("Name", typeof(string));
table.Rows.Add( "Ab      Sdf");
GridView1.DataSource = table;
GridView1.DataBind();

它的输出如下...

Answer 2

默认情况下，浏览器会删除连续的空格以在 HTML 文本中仅保留 1。如果您希望显示所有空格，则需要在 gridview 中显示时将它们替换为不间断空格字符“ ”

Answer 3

我在 RowDataBound 事件中使用了以下 C# 代码

e.Row.Cells[(int)logDescriptionIndex].Text = 
e.Row.Cells[(int)logDescriptionIndex].Text.Replace(" ", " ");

请注意以下事项

1. 不要将其应用于标题行
2. 不要将其应用于具有进一步格式（例如日期格式）的表格单元格，这些表格单元格可以在格式上有空格

注意：以下是基于另一个网格视图；不适用于有问题的网格视图。使用相关网格视图所需的微小更改

代码

    protected void SearchLogsGridRowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e != null)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                if (logDescriptionIndex == null)
                {
                    int index = 0;
                    foreach (TableCell cell in e.Row.Cells)
                    {
                        if (cell.Controls[0] != null)
                        {
                            if (String.Equals(((LinkButton)(cell.Controls[0])).Text.Trim(), UIConstants.LogDescriptionHeader))
                            {
                                logDescriptionIndex = index;
                            }
                        }
                        index++;
                    }
                }
            }

            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                if (logDescriptionIndex != null)
                {
                    //  Replace white spaces with HTML space.
                    //  This is to handle multiple white spaces between two characters
                    e.Row.Cells[(int)logDescriptionIndex].Text = e.Row.Cells[(int)logDescriptionIndex].Text.Replace(" ", " ");
                }
            }
        }

    }