How to properly display line breaks in asp GridView BoundField without turning HTML encoding off

Question

I need to show line breaks in the contents of the asp BoundField in an asp GridView. I originally had \r\n, but the page completely ignored this line breaking. The second thing I did was replace my line breaks with in the string, but the page just showed the literal text "" wherever I had this in the string. The last thing i tried technically worked, and I achieved this by putting in my string for the field with HTML encoding for the element set to "false". The problem I have with this solution is that I heard this can cause security concerns. How do I have line breaks in these fields without setting HTML encoding to false.

Answer 1

By default, HTML treats line breaks, tabs and spaces as common white-space, and collapses multiple white-space characters into a single space for rendering. So including line breaks in your HTML will not usually impact the way the text is rendered in the browser. For some more information and background on this topic I refer you to this previous question, which has some very informative comments.

However, if you want line breaks in your text to be rendered as line breaks in the browser, you can achieve this in pure CSS without turning HTML encoding off or introducing any security concerns. The white-space CSS property is standard and has been supported by all major browsers for a long time, and enables you to instruct the browser to render line breaks as is.

Changing the HTML generated by ASP.Net GridView to include CSS styling can be achieved by use of the <ItemStyle> tag as demonstrated below:

<style>
    .preformatted 
    {
        white-space: pre-line;
    }
</style>

<asp:GridView runat="server" ...>
    <Columns>
        <asp:BoundField ...>
            <ItemStyle CssClass="preformatted"/>
        </asp:BoundField>
    </Columns>
</asp:GridView>

Instead of using white-space: pre-line; you could also try white-space: pre;, but this takes away the browser's ability to flow the text to fit the available space, so may result in your grid column becoming too wide if your text does not contain sufficient line breaks.

Answer 2

You can do a search and replace in the RowDataBound event of the GridView.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    //check if the row is a datarow
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //find the boundfield cell
        string cellValue = e.Row.Cells[0].Text;

        //replace the encoded <br> with a real one and put the string back
        e.Row.Cells[0].Text = cellValue.Replace("&lt;br /&gt;", "<br />");
    }
}

You may need to extend the replace to include more br types, like <br>, <br/>, <BR> etc.