Modify and add html from asp.net

Question

I'm trying to add several <img> tags to my html document from asp.net codebehind. I looked at Adding Html from Code Behind in Asp.net and it seems to be the solution, but I'm not sure how divcontrol.Controls.Add determines where exactly it's going to start adding html. For all I know, it's at the end of the html. I also found Write Html Markup from code behind in asp.net, but I'm not certain how to use it either.

So here's the html that I'm using. How can I add the img tag I have also included?:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gallery</title>
    <script type='text/javascript' src='/jquery-11.0.min.js'></script>  
    <script type='text/javascript' src='theme-tiles.js'></script>
</head>
<body>
    <form id="form1" runat="server">
    <h2>Tiles - Justified</h2>
    <div id="gallery" style="display:none;">
    </div>

    <script type="text/javascript">

        jQuery(document).ready(function () {

            jQuery("#gallery").gallery({
                tiles_type: "justified"
            });

        });

    </script>
    </form>
</body>

</html>

This is the <img> tag that I need to add between the <div id="gallery"> tag:

<img alt="img1"
    src="images/thumbs/tile1.jpg"
    data-image="images/big/tile1.jpg"
    style="display:none"/>
</a>

This is the code I would use to add the html:

HtmlGenericControl divcontrol = new HtmlGenericControl();
divcontrol.Attributes["class"] = "sxro sx1co";
divcontrol.TagName = "div";
pnlUserSearch.Controls.Add(divcontrol);
Label question = new Label();
divcontrol.Controls.Add(question); // add to the new div, not to the panel

score 0 · Answer 1 · answered Aug 02 '16 at 21:16

If you're creating client-side HTML (not server controls) then you can just create a Literal, like this:

<div id="gallery" style="display:none;">    
  <asp:Literal runat="server" ID="MyLiteral" />
</div>

Then, in your code-behind, set

MyLiteral.Text = "<whatever html you want>"

I'm answering your question literally (no pun intended.) There may be better/other ways to accomplish the end goal. Mixing "normal" client HTML with webforms can get a little messy. Webforms wants you to do everything its way.

It might make more sense if your container div (gallery) is a server control instead. If you're looking to add multiple images then perhaps what you need is a Repeater.

To be really honest, if you're not too far down the development path it might be best to take a look at ASP.NET MVC instead.

Another approach:

Just add your image itself as a server control directly in the markup.

<div id="gallery" style="display:none;">    
  <img runat="server" ID="MyImage" Visible="False"/>
</div>

In your code-behind if you want to display it,

MyImage.Src = "/image url";
MyImage.Visible = true;

Modify and add html from asp.net

1 Answers1