C＃ASP.NET根据db中的数据将html代码插入转发器

Question

So needed help again

Sorry a bit confusing but, I am trying to create a chat box which user can submit and then retrieve it again from the DB, I am following this script https://bootsnipp.com/snippets/EkQe7

As you can see, from the HTML code, there is two types, one is when you chat and another is when other people chat,

<div class="chat">   
      <div class="chat-history">
        <ul class="chat-ul">
          <li>
            <div class="message-data">
              <span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
            </div>
            <div class="message you-message">
            A new client?!?! I would love to help them, but where are we going to find the time?

            </div>
          </li>
          <li class="clearfix">
            <div class="message-data align-right">
              <span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
            </div>
            <div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality.  </div>
          </li>

        </ul>

      </div> <!-- end chat-history -->

    </div> <!-- end chat -->

So now, what I am trying to do is from the retrieve the message from DB then code-behind submit the HTML code into the Repeater, If it is "You", then will use this code

    <div class="message-data">
      <span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
    </div>
    <div class="message you-message">
    A new client?!?! I would love to help them, but where are we going to find the time?

    </div>

If it is other people, then will use this code

  <li class="clearfix">
    <div class="message-data align-right">
      <span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
    </div>
    <div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality.  </div>
  </li>

My question is how to do that from Code-Behind PageLoad? How to add the code above into the Repeater from code-behind?

Thanks!

Answer 1

First, you'll have to retrieve the records in the database in the code behind. (See this msdn article for details)

messages.DataSource = myMessages;
messages.DataBind();

Now we can use Repeater, in which the html is separated by author, to iterate the data. Note that I am assuming how your database of messages is structured.

<asp:Repeater id="messages" runat="server">
    <ItemTemplate>
        <div runat="server" visible='<% (Container.DataItem("author") == "us") %>'>
              <li>
                <div class="message-data">
                  <span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
                </div>
                <div class="message you-message">
                    <%# Eval("testMessage") %>
                </div>
              </li>
        </div>
        <div runat="server" visible='<% (Container.DataItem("author") != "them") %>'>
              <li class="clearfix">
                <div class="message-data align-right">
                  <span class="message-data-name"><%# Eval("authorName") %></span> <i class="fa fa-circle me"></i>
                </div>
                <div class="message me-message float-right">
                    <%# Eval("testMessage") %>
                </div>
              </li>
        </div>          
    </ItemTemplate>
</asp:Repeater>

I haven't tested this code, but its a high level idea of what to do. You may also want to see some Examples on using Repeater .