附加到具有特定类的 div

Question

How can I append some html to a div with a specific class name?

frontend:

<div class="school-team-popup"></div>

backend:

StringBuilder _html = new StringBuilder();

_html.AppendFormat("<li>Hi there</li>");

I would like to append _html inside the school-team-popup div. How can I do this from the backend?

Answer 1

I'm going to explain the Web Forms way of doing things.

If you have some static markup that you want to selectively show/hide on your page, that's generally accomplished by setting the Visible property of the control.

<%-- This is in your ASPX markup (.aspx) --%>
<asp:Panel runat="server" id="HelloWorldPanel">
  <p>Hello, world!</p>
</asp:Panel>

//This is in your code behind (.aspx.cs)
//hide the panel
HelloWorldPanel.Visible = false;
//show the panel
HelloWorldPanel.Visible = true;

If you're trying to grab dynamic data from some other source and display it on the page, you would declare the markup on your page to show this data, and then bind the data to the markup. There are many controls you can bind data to .

One example of a control you can bind data to is a repeater. Repeaters are good when you want tight control over the markup that gets rendered on the page. You bind them to some enumerable object such as a List<T> and then it will repeat some markup for each element in the enumerable object.

//This is in your project somewhere
namespace MyNamespace
{
    public class Product
    {
        public int Id { get; set; }

        public int Name { get; set; }
    }
}

<%-- This is in your ASPX markup (.aspx) --%>
<ul>
  <asp:Repeater runat="server" id="ProductRepeater" ItemType="MyNamespace.Product">
    <ItemTemplate>
      <li><%#: Item.Id %> - <%#: Item.Name %></li>
    </ItemTemplate>
  </asp:Repeater>
</ul>     

//this is in your code behind (.aspx.cs)
protected void Page_Load(object sender, EventArgs e)
{
    if(!IsPostback)
    {
        List<Product> products = MyDataLayer.GetProducts();
        ProductRepeater.DataSource = products;
        ProductRepeater.DataBind();
    }
}