GridView列项目符号显示问题及描述列代码技术咨询

Hey there, let's break down why your GridView's list bullets are behaving this way and walk through the fixes!

Why This Happens #

The core issue comes down to how plain text vs. HTML structured content is rendered by the browser:

• When you remove HTML tags, you’re stripping out the <ul> and <li> elements that define a proper list structure. A plain text bullet (like - or •) is just a regular character—browsers don’t automatically treat it as a list item, so it won’t show up with proper bullet formatting or indentation.
• When you save form details using a text field that preserves the list structure, you’re actually keeping the <ul><li>...</li></ul> HTML tags. When you use HtmlDecode on that content, the browser parses those tags correctly and renders a proper bulleted list, which is why the bullets appear in the previous cell.

Solutions #

We have three targeted approaches depending on your content storage setup:

Option 1: Convert Plain Text Lists to HTML

If you’re storing plain text (e.g., each list item on a new line starting with -), convert it to valid HTML list tags during binding to give the browser the structure it needs.

First, update your GridView TemplateField:

<asp:TemplateField HeaderText="Description" SortExpression="description">
    <ItemTemplate>
        <asp:Literal ID="Description" runat="server" 
            Text='<%# ConvertPlainTextToHtmlList(System.Web.HttpUtility.HtmlDecode(Eval("description").ToString())) %>'>
        </asp:Literal>
    </ItemTemplate>
</asp:TemplateField>

Add this helper method in your code-behind (C#):

protected string ConvertPlainTextToHtmlList(string plainText)
{
    if (string.IsNullOrWhiteSpace(plainText))
        return string.Empty;

    // Split plain text by line breaks to get individual list items
    string[] listItems = plainText.Split(new[] { Environment.NewLine }, StringSplitOptions.RemoveEmptyEntries);
    StringBuilder htmlBuilder = new StringBuilder("<ul>");

    foreach (string item in listItems)
    {
        // Clean leading bullets/whitespace and encode content to prevent XSS risks
        string cleanedItem = item.TrimStart('-', '•', ' ', '\t');
        htmlBuilder.AppendFormat("<li>{0}</li>", System.Web.HttpUtility.HtmlEncode(cleanedItem));
    }

    htmlBuilder.Append("</ul>");
    return htmlBuilder.ToString();
}

Option 2: Use CSS to Style Plain Text as a List

If you prefer not to modify the content with HTML, use CSS to force plain text to display like a list. This works best for simple, single-level lists.

Update your GridView to wrap the Literal in a styled div:

<asp:TemplateField HeaderText="Description" SortExpression="description">
    <ItemTemplate>
        <div class="plain-text-bullet-list">
            <asp:Literal ID="Description" runat="server" 
                Text='<%# System.Web.HttpUtility.HtmlDecode(Eval("description").ToString()) %>'>
            </asp:Literal>
        </div>
    </ItemTemplate>
</asp:TemplateField>

Add this CSS to your page or stylesheet:

.plain-text-bullet-list {
    display: list-item;
    list-style-type: disc; /* Swap with 'circle' or 'square' for different bullet styles */
    margin-left: 25px;
    white-space: pre-line; /* Preserves line breaks in the plain text */
}

Option 3: Preserve HTML List Tags (If Possible)

If your form allows users to input structured HTML (or you generate it programmatically), ensure you don’t filter out <ul> and <li> tags when saving content. Your existing code with HtmlDecode will already render these correctly—just remember to sanitize user input (e.g., using the AntiXSS library) to allow only safe tags and prevent XSS attacks.

内容的提问来源于stack exchange，提问作者P Mohite