Having a small issue with IsPostBack (ASP.NET, C#)

Question

Am really enjoying my learning experience with ASP.NET with C# so far :). I am just having trouble understanding the IsPostBack function with respect to my code implementation. I have seen a few questions on here about IsPostBack but am after more "generalised" advice for my particular implementation.

The application is relatively simple - you select a font from a dropdown menu and type in some text in a textbox. When you press display, your text displays according to the font option you chose. I have got this working just fine, it is trying to implement the IsPostBack feature so when I try entering something else in the textbox, the text from the previous submission is not shown. I've tried changing where my FontsList() method is called from but that does not work - I get a Null Reference error (I know why).

Here is the "code-behind"/C# code I have compiled:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{

    List<String> folderNames;
    List<String> filePrefixes;
    List<String> fileSuffixes;

    protected void FontsList()
    {


        folderNames = new List<String> {"cartoon", "copperDeco", "decoTwoTone", "embroidery", "fancy", "goldDeco", "green",
                                        "greenChunky", "ice", "letsFaceIt", "lights", "peppermintSnow", "polkadot", "rainbow", "seaScribe",
                                        "shadow", "snowflake", "teddy", "tiger", "Victorian", "water", "wood", "zebra"};

        filePrefixes = new List<String> {"alphabet_" + "", "copperdeco-", "", "embroidery-", "art_", "golddeco-", "", "109", "ice",
                                         "faceoff-", "", "peppermint-", "polkadot-", "", "", "shad_", "snowflake-", "alphabear", "", "vic",
                                         "wr_", "wood", "zebra-"};

        fileSuffixes = new List<String> {"s", "", "4", "", "", "", "", "", "", "", "1", "", "", "", "", "", "", "" + "smblue", "",
                                         "", "", "", ""};


    }

    protected void Page_Load(object sender, EventArgs e)
    {
        FontsList();
        if (!IsPostBack)
        {
            //FontsList();
            foreach (String s in folderNames)
            {
                DropDownList.Items.Add(s);
            }
        }

    }

    protected void submitDisplay_Click(object sender, EventArgs e)
    {
        int index = folderNames.IndexOf(DropDownList.Text); //drop down box

        foreach (Char c in textBox.Text)
        {
            if(c == ' ')
            {
                displayText.InnerHtml += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
            }
            else
            {
            displayText.InnerHtml += "<img src = 'Alphabets/" + folderNames[index] + "/" + filePrefixes[index] + c + fileSuffixes[index] + ".gif' />";
            }
        }
    }
}

Unfortunately I don't have access to s server that has ASP.NET features, but am happy to send files etc if need be.

Anyone's help/feedback is very much appreciated, as always :).

Answer 1

In ASP .NET, the controls automatically store their state in the ViewState object. When the page is posted back, the displayText control still has it's value from the previous click, and your are appending the new images to it. You need to clear the previous data before appending the new values:

protected void submitDisplay_Click(object sender, EventArgs e)
{
    displayText.InnerHtml = "";

    int index = folderNames.IndexOf(DropDownList.Text); //drop down box

    foreach (Char c in textBox.Text)
    {
        if(c == ' ')
        {
            displayText.InnerHtml += "     ";
        }
        else
        {
            displayText.InnerHtml += "<img src = 'Alphabets/" + folderNames[index] + "/" + filePrefixes[index] + c + fileSuffixes[index] + ".gif' />";
        }
    }
}