Generating front-page HTML from Codebehind in ASP.Net VB

I am working on a recreational project right now to help myself learn the ins and outs of vb.net and interconnecting it. So any suggestions that could improve my methodology are appreciated!

Right now, I am working on taking a self-updating excel sheet and building small html blocks from the sheet which will fit into a JQuery list sorter and image viewer (tags and tags ). The problem I am running into is that by placing the code onto the page in a literal the html is never placed on the page, it is generated on the fly, thus the JQuery handler can not hook the tags and the sorter does not function.

I know there is a way to add variables from the code behind with <%=var%>, but I need to add a large number of variables that will change as the excel sheet updates, which is why I am using a code behind function to generate a glob of instead of rewri开发者_StackOverflow中文版ting it constantly.

Here is my current Code behind function that generates and inserts into literals:

        Dim count As Integer
        count = ds.Tables(0).Rows.Count
        Dim tags As String
        Dim HeroNm As String
        For i = 0 To count Step 1

            tags = ds.Tables(0).Rows(i).Item("Tags").ToString
            HeroNm = ds.Tables(0).Rows(i).Item("Champion Name").ToString

            ' Add the sorter entry
            Panel1.Controls.Add(New LiteralControl("<li style='display: block;' class='" & tags & "' >"))
            Panel1.Controls.Add(New LiteralControl("<b><a id='inline' href='#data" & i & "'><img src='Pictures/Heroes/" & HeroNm & ".jpg ' alt='' /></a></b>"))
            Panel1.Controls.Add(New LiteralControl("<p>" & HeroNm & "</p>"))
            Panel1.Controls.Add(New LiteralControl("</li>"))

            ' add the popup entry
            Panel2.Controls.Add(New LiteralControl("<div style='display:none'>"))
            Panel2.Controls.Add(New LiteralControl("<div id='data" & i & "'>"))
            Panel2.Controls.Add(New LiteralControl("Testing text for " & HeroNm))
            Panel2.Controls.Add(New LiteralControl("</div>"))
            Panel2.Controls.Add(New LiteralControl("</div>"))
        Next i

    Catch
    Finally
        ' Close connection
        oledbConn.Close()

    End Try

End Sub

The Code needs to be inserted into two parts as listed on the front page:

<ul id="portfolio-list">

        <asp:Panel ID="Panel1" runat="server">
        </asp:Panel>

        <!-- clear -->
        <li style="overflow: hidden; clear: both; height: 0px; position: relative; float: none; display: block;"></li>
    </ul>

And the second one being listed later, which is partially unimportant as it displays the information on-click of the item entries.

I am using Portfolio Sorter and a lightbox variant

If you render out a unique ID or CSS class for the elements you need to target, you can attach event handlers to whatever you want. Have your page also render out the following JS:

panel2.Controls.Add(new LiteralControl("<script type='text/javascript'>myJScalls</script>"));

You can write out a:

$(document).ready(function() {
   $("#myelementbyID").whatever();
});

Also, if you are looking for reusability, make it a custom control.

HTH.