Use C# to create html

Question

Working on a scrolling picture slider and need to dynamically create hyperlinks and divs in a specific div on the page so that I can then control it with JQuery.

<div id="scroller"><!-- here is where I want the html to be created and what needs to be created --><a href="#" class="scrollimage"><img src="images/image10.jpg"/> </a></div>

I have created an array that gathers the number of files in the directory and can loop the number of times to add the files but not sure how to place the html in the specific div.

Answer 1

Ideally you don't want to use C# to generate HTML.

Since your using .NET, I'm assuming that your using either ASP.NET Web Forms and ASP.NET MVC.

In the case of Web Forms, you should use a server control like the Repeater and databind to your array of files.

In the case of MVC, return the data as either your View Model or part of it.

If you're dead set on generating HTML in C#, take a look at Html32TextWriter

EDIT: Here's a way to do it in ASP.NET WebForms. Note that this isn't a complete example, it's just enough to get you on a right track.

Code Behind:

protected void Page_Load(object sender, EventArgs e)
{
    scrollerRepeater.ItemDataBound += BindScrollerItem;

    var files = Directory.GetFiles("*.jpg").Select(filename=>new FileInfo(filename));
    scrollerRepeater.DataSource = files;
    scrollerRepeater.DataBind();
}

private void BindScrollerItem(object sender, RepeaterItemEventArgs e)
{
    ListItemType type = e.Item.ItemType;
    if(type != ListItemType.Item && type!=ListItemType.AlternatingItem)
    {
        return;
    }

    var file = e.Item.DataItem as FileInfo;
    if(file == null)
        return;

    var image = e.Item.FindControl("scrollerImage") as HtmlImage;
    if (image == null)
        return;

    image.Src = 
}

ASPX

<div id="scroller">
<!-- here is where I want the html to be created and what needs to be created 
<a href="#" class="scrollimage"><img src="images/image10.jpg"/> </a>
-->
<asp:Repeater ID="scrollerRepeater" runat="server">
    <ItemTemplate>
        <a href="#" class="scrollimage"><img alt="" runat="server" id="scrollerImage"/>
    </ItemTemplate>
</asp:Repeater>
</div>

Answer 2

You can use XSL I made some reports in HTML with XSL, here an example