Add a delay while displaying text in asp.net and c#

Question

I'm trying to display text in my application. The input is a text file that I'm accepting using FileUpload. I have to split the text into words, and every word into it's respective character. Then each word is displayed letter-wise first and then the entire word is shown, in a marquee.

So far, I've managed to accept the file. I've also managed to split the contents. But I'm clueless as to how to add a delay after every letter is displayed.Also, after each character is shown, it has to disappear before the next one appears. I tried using Thread.Sleep(), but all it does is freezes my UI, puts the thread to sleep at the start, and displays everything at once.

Ditto for await Task.Delay().

Someone told me to use timers, but I'm new to programming in C# and don't know how they work. This is what I've done, so far. The first button (ie Button1 ) displays the contents of the file, as they are. The second button (ie Button2 ) is meant for splitting text.

aspx.cs file:

protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
    String a = FileUpload1.FileName;
    String ext = Path.GetExtension(a);
    //Label1.Text = ext;
    if (ext == ".txt")
    {

        System.IO.StreamReader reader = new System.IO.StreamReader(FileUpload1.FileContent);
        string text = reader.ReadToEnd();
        //Response.Write(text);
        TextBox1.Text = text;



        //Above section for text file


    }
    if (ext == ".docx" || ext == ".doc")
    {
        //String b = FileUpload1.PostedFile.FileName;
        // Open a doc file.

        string filename = Path.GetFileName(FileUpload1.FileName);
        FileUpload1.SaveAs(Server.MapPath("~/") + filename);
        Application application = new Application();
        Document document = application.Documents.Open(Server.MapPath("~/") + filename);

        // Loop through all words in the document.
        int count = document.Words.Count;
        for (int i = 1; i <= count; i++)
        {
            // Write the word.
            string text = document.Words[i].Text;
            //Response.Write(text);
            TextBox1.Text = text;
        }
        // Close word file
        application.Quit();
    }
}

protected void Button2_Click(object sender, EventArgs e)
{
    String a1 = FileUpload1.FileName;
    String ext1 = Path.GetExtension(a1);
    if (ext1 == ".txt")
    {

        System.IO.StreamReader reader = new System.IO.StreamReader(FileUpload1.FileContent);
        string text = reader.ReadToEnd();


        /*foreach (char c in text)
        {
            TextBox2.Text = c.ToString();
            System.Threading.Thread.Sleep();
        }*/


        List<string> list = new List<string>(); //code for splitting 
        String[] words = text.Split();
        for (int i = 0; i < words.Length; i++)
        {
            list.Add(words[i]);
        }
        foreach (string word in words)
        {

            Char[] letters = word.ToCharArray();
            foreach (char letter in letters)
            {

                Response.Write("<marquee>"+letter+"</marquee>");
                Response.Write("<br>");



            }
            Response.Write("<marquee>" + word + "</marquee>");
            Response.Write("<br>");

        }

    }

}

Answer 1

you should use client scripts instead of servers code... use updatePanel.... :) in your aspx:

<asp:UpdatePanel ID="updatePanel1" runat="server">
  <ContentTemplate>
    <div style="display:none">
    <!-- Hidden Field For Storing our formatted Text -->
    <asp:Literal ID="hiddenLiteral" runat="server"/></div>
    <!-- a field for store Javascript -->
    <asp:Literal ID="scriptLiteral" runat="server"/>
    <!-- a field which use for Showing Text To User -->
    <asp:Literal ID="displayLiteral" runat="server"/>

   </ContentTemplate>
</asp:UpdatePane>

then write a javascript for literalValue and then update updatePanel, something like this:

protected void Button2_Click(object sender, EventArgs e)
{
    String a1 = FileUpload1.FileName;
    String ext1 = Path.GetExtension(a1);
    if (ext1 == ".txt")
    {

        System.IO.StreamReader reader = new System.IO.StreamReader(FileUpload1.FileContent);
        string text = reader.ReadToEnd();

        List<string> list = new List<string>(); //code for splitting 
        String[] words = text.Split();
        for (int i = 0; i < words.Length; i++)
        {
            list.Add(words[i]);
        }
        var textTobeShown = new List<string>();
        foreach (string word in words)
        {

            Char[] letters = word.ToCharArray();
            foreach (char letter in letters)
            {

               textTobeShown.Add("<marquee>"+letter+"</marquee>");

            }
               textTobeShown.Add("<marquee>" + word + "</marquee>");
        }
    //use <sep> for separating text
    hiddenLiteral.text=String.Join("<sep>",textTobeShown);
    //Call Our Javascript Function when updatePanel Update Fields Value
    scriptLiteral.Text=String.Concat("<script> DisplayText('",hiddenLiteral.ClientID,"','",displayLiteral.ClientID,"');  </script>");

    //updating our updatePanel
    updatePanel1.Update();
    }

}

and in your Html (aspx) Define a script Tag Like this:

<script>

    function DisplayText(hiddenFieldId,textFieldId){
      var hiddenValue=document.getElementById(hiddenFieldId);
      var textField=document.getElementById(textFieldId);
      if(!hiddenValue || !textField) {throw 'HddenField or TextField Not Find';}
      var textToBeShown=hiddenValue.innerHTML.split('<sep>');
      if(textToBeShown.length==0){throw 'there is nothing to show';}
      var count=textToBeShown.length;

      //create delay for shown Text, in  0.5secon,1second...
      var delay=0.5; 

      //loop  through text and show them, after showing each text, delay for   500ms(0.5s)
    timeout([0,count], 1, function(i){
    textField.innerHTML+=textToBeShown[i]+'<br />';
});

    }

 function timeout(range, time, callback){
    var i = range[0];                
    callback(i);
    Loop();
    function Loop(){
        setTimeout(function(){
            i++;
            if (i<range[1]){
                callback(i);
                Loop();
            }
        }, time*1000)
    } 
}    
</script>