locked
wrapping data in html templates. there has to be a better way RRS feed

  • Question

  • Im currently working on an application that needs to take data from a class file and wrap it in an html template.

    The first go around I hard coded a template straight into the application, that didnt turn out so well when i needed to change or add new templates..

    Next, I opted to have an xml file to store the different templates so new ones can be added without the need to recompile...

    Here is a little background on what im doing to help understand.  I am taking information from an Advertisement class file and wrapping it up in a html template that gets processed by another application.

    Inside the template I have put placeholders for the some of the values like Year, Make, Model, ect..  The placeholders look like this {year}, {make}, {model} and they get replaced with the values from the advertisement class.

    The problem I've run into is this.

    Each Advertisement contains a list of Images and each ad has a different amount of images.

    Then each Template has a different way of displaying the images.

    This leaves me with having to generate the html for the image table based on the image count and template design.

    With each Template having a different way of displaying the images that would mean I would have to write a new piece of code for each and every template being added to the system.

    I hope all that makes sense.

    Basically I need help coming up with a better way to do this.. I've spent countless hours thinking and researching and im a bit stuck..

    Here is an example of how my template xml file looks right now.

    <?xml version="1.0" encoding="utf-8"?>
    
    <templates>
    
     <template id="1" description="basic template #1">
    
     <html>
    
      <![CDATA[
    
      <font face="Verdana" color="#000000">
    
      <center>
    
       <a href='{bannerlinkurl}' target='_blank'><img src='{bannerurl}' border='0' alt='' /></a>
    
       <font size="4">
    
        <b>{header}</b>
    
       </font>
    
       <br />
    
       <br />
    
       <br />
    
        {imagetable}
    
       <br />
    
       <br />
    
       <br />
    
       
    
       <font size="4" face="arial">Vehicle Details</font>
    
       <hr width="700" />
    
          <table border="0">
    
          <tr>
    
           <td align="left">Year: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{year}</b>
    
           </td>
    
           <td width="100"></td>
    
           <td align="left">VIN: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{vin}</b>
    
           </td>
    
          </tr>
    
          <tr>
    
           <td align="left">Make: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{make}</b>
    
           </td>
    
           <td width="100"></td>
    
           <td align="left">Stock #: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{stocknumber}</b>
    
           </td>
    
          </tr>
    
          <tr>
    
           <td align="left">Model: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{model}</b>
    
           </td>
    
           <td width="100"></td>
    
           <td align="left">Mileage: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{mileage}</b>
    
           </td>
    
          </tr>
    
          <tr>
    
           <td align="left">Trim: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{trim}</b>
    
           </td>
    
           <td width="100"></td>
    
           <td align="left">Exterior Color: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{exteriorcolor}</b>
    
           </td>
    
          </tr>
    
          <tr>
    
           <td align="left">Engine: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{engine}</b>
    
           </td>
    
           <td width="100"></td>
    
           <td align="left">Interior Color: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{interiorcolor}</b>
    
           </td>
    
          </tr>
    
          <tr>
    
           <td align="left">Transmission: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{transmission}</b>
    
           </td>
    
           <td width="100"></td>
    
           <td align="left"></td>
    
           <td width="28"></td>
    
           <td></td>
    
          </tr>
    
          <tr>
    
           <td align="left">Drivetrain: </td>
    
           <td width="28"></td>
    
           <td align="left">
    
           <b>{drivetrain}</b>
    
           </td>
    
           <td width="100"></td>
    
           <td></td>
    
           <td width="28"></td>
    
           <td></td>
    
          </tr>
    
          </table>
    
       <br />
    
       <br />
    
       <br />
    
       <font size="4" face="arial">Equipment</font>
    
       <hr width="700" />
    
       
    
        {optionstable}
    
       <br />
    
       <br />
    
      </center>]]>
    
     </html>
    
     </template>
    
    </templates>
    
    


    And here is how im creating the images table for this template based on the image count.

       'check to make sure we have images before we add the images table
    
       If ad.HasImages Then
    
        'we have images, continue.
    
    
    
        strBuilder.Append("<table border='0' cellpadding='10' cellspacing='0'>")
    
    
    
        For imagecounter As Integer = 1 To .ImageURLs.Count Step 2 'images are dislayed side by side so we step by 2
    
    
    
         strBuilder.Append("<tr>") 'table row start tag
    
    
    
         'add column and image
    
         strBuilder.Append(String.Format("<td><img width='400' border='0' src='{0}'></td>", _
    
             .ImageURLs(imagecounter - 1))) 'append image (subtracted 1 because string array is zero based)
    
    
    
         'check if there is at least one more image in the array, if so, add the column and image
    
         If imagecounter < .ImageURLs.Count Then
    
          strBuilder.Append(String.Format("<td><img width='400' border='0' src='{0}'></td>", _
    
             .ImageURLs(imagecounter))) 'append the following image
    
         End If
    
    
    
         strBuilder.Append("</tr>") 'table row end tag
    
    
    
        Next
    
    
    
        strBuilder.Append("</table>")
    
    
    
       End If
    
    

    I also have to do this for another table, but if I can figure out this one I can make the other one work too.

    I would really appreciate any advice on this.

    Thanks.


    Friday, July 15, 2011 5:32 AM

All replies

  • Hi

    For this case you better write XSLT transformer, to render xml to template file. I have doe the same when i had to build email content for different languages...

     

    and it is easy too... 

     

    check following documents how you can achieve....

    http://support.microsoft.com/kb/307322

    http://msdn.microsoft.com/en-us/library/14689742.aspx

     

    Hope this helps you....


    If this post answers your question, please click "Mark As Answer". If this post is helpful please click "Mark as Helpful".
    Friday, July 15, 2011 11:55 AM
  • i found the solution..   going to create a template engine and go from there.
    Saturday, July 16, 2011 6:56 AM