How to avoid duplication of html in client and server side tempates?

Question

In my experience it seems that there is a lot of duplication of html in server and client side templates. By client side I mean something like Jquery templates, and by server-side I'm mean using server-side variables with html.

In the code below the foreach loop gets executed on every page load and is used to create a list of items. Notice that it surrounds a block of html with variable placeholders that are used for dynamic values.

Below the foreach loop we have a Jquery template with the exact same html structure, the only thing that differs is the variable syntax.

Is there way to "merge" it so I don't have to repeat the same html markup structure in both cases? It just seems wrong having to use the exact same html block in both cases.

ex

   <h1>Portfolio's</h1>
            <ul id="portfolioList" class="portfolio">
                <% foreach (Portfolio p in Portfolios)
                   {  %>        
                        <li>
                            <span class="delete">[X] </span>
                            <a href="/portfolioDetails.aspx?p=<%=p.PortfolioId %>"><%=p.Name %></a>
                        </li>
                <% } %>
            </ul>

            <!-- portfolio template -->
            <script id="portfolioTemplate" type="text/x-jquery-tmpl">
                <li>
                    <span class="delete">[X] </span>
                    <a href="/portfolioDetails.aspx?p=${PortfolioId}">${Name}</a>
                </li>
            </script>  

Answer 1

As I understand, your js-template is used later, to render additional portfolios, recived with AJAX?

If so, you can either - get rid of js-tmpl and return with ajax prerendered html

-OR-

Get rid of prerendering on serverside and use only js for this. The second is probably 'cleaner' - and if you dont want to make one more ajax request at start, you can allways render initial data into json (just like template), and only run js rendering func on it.

<h1>Portfolio's</h1>
<ul id="portfolioList" class="portfolio">
</ul>

<!-- portfolio template -->
<script id="portfolioTemplate" type="text/x-jquery-tmpl">
    <li>
        <span class="delete">[X] </span>
        <a href="/portfolioDetails.aspx?p=${PortfolioId}">${Name}</a>
    </li>
</script>

<!-- initial rendering -->    
<script>
    (function(){
        var initData = [
          <% foreach (Portfolio p in Portfolios) { %>
            { PorfolioId : <%=p.PortfolioId%>, Name : "<%=p.Name%>" },
          <% } %>
        ];
        $("#portfolioTemplate").tmpl(initData).appendTo("#portfolioList");
    }());
</script>

Probably you should make some adjusments, but should work without problems.