Friday, May 18, 2012

How to embed image into HTML document?


In this blog post, I will demonstrate how to embed image into HTML document.

Usually we provide image path to the src attribute of image tag.
<img src=” C:\SamplePictures\lighthouse.png” />

However there will be circumstances in web applications where you want to provide the HTML as downloadable content to the user. In such circumstances if the HTML document contains any external resources like Images, CSS etc., they will not be referenced/preserved along with the downloaded HTML document Hence the end user may not be viewing the appropriate document.

To achieve the integrity of the HTML document, external resources like images, CSS can be embedded into the document. This can be achieved in 2 steps.

Step 1: Create Base64 representation of Image
string base64 = Convert.ToBase64String(imageBytes); //This will convert the image bytes into base64 string.

Step 2: In the src attribute of image tag, provide image information in below format.
Format:
data:[<MIME-type>][;charset=<encoding>][;base64],<data>

ex:
<img src="data:image/png;base64,iVBsafd .. .. ..”/>

Now open the document in browser, we can view the embedded image.

Data URI scheme:
Data URI scheme is a URI scheme that provides a way to include data in-line with web pages as if they were external resources. This allows images and style sheets to be fetched in single HTTP request rather than multiple HTTP request.

Browser support:
All major browsers like Firefox, Safari, Android, Chrome, IE8 and IE9 provide support for this data URI scheme.

Sample C# code snippet:
FileStream fs = new FileStream(<<ImagePath>>, FileMode.Open, FileAccess.Read);
byte[] imageBytes = new byte[fs.Length];
fs.Read(imageBytes, 0, imageBytes.Length);
StreamWriter streamWriter = new StreamWriter("test.html");
streamWriter.WriteLine("<html>");
streamWriter.WriteLine("<title>EmbeddingImage</title>");
streamWriter.WriteLine("<body>");
streamWriter.Write("<img src=\"data:image/"+ <<FileExtension>>
+ ";base64," + Convert.ToBase64String(imageBytes) + "\"/>");
streamWriter.WriteLine("</body>");
streamWriter.WriteLine("</html>");
streamWriter.Close();
System.Diagnostics.Process.Start("test.html");

For more information on this refer below links:

Thursday, May 3, 2012

How to feed Atom into your ASP.Net application using Repeater control?


In this blog post, I will show you step by step illustration on how to feed Atom into the ASP.Net application using Repeater control.

What is Repeater Control?
The Repeater control is used to display a repeated list of items that are bound to the control. The Repeater control may be bound to a database table, an XML file, or another list of items.

What is Atom?
        Atom Syndication format was developed as an alternative to RSS used for web feeds. Atom syndication format was published as an IETF  proposed standard. For more information refer: Atom_Wiki

An example document in the Atom Syndication format
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Example Feed</title>
  <subtitle>A subtitle.</subtitle>
  <link href="http://example.org/feed/" rel="self" />
  <link href="http://example.org/" />
  <id>urn:uuid:60a76c80-d399-11d9-b91C-0003939e0af6</id>
  <updated>2003-12-13T18:30:02Z</updated>
  <author>
    <name>Rajendran SP</name>
    <email>rajsp@example.com</email>
  </author>
  <entry>
    <title>Atom-Powered Robots Run Amok</title>
    <link href="http://example.org/2003/12/13/atom03" />
    <link rel="alternate" type="text/html" href="http://example.org/2003/12/13/atom03.html"/>
    <link rel="edit" href="http://example.org/2003/12/13/atom03/edit"/>
    <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
    <updated>2003-12-13T18:30:02Z</updated>
    <summary>Some text.</summary>
  </entry>
</feed>

The best way to learn more about Atom is go through the xml contents of the feed.

How to feed Atom - step by step:

Step 1: Create an empty website and add a Default.aspx web page.

Step 2: Create RemoveNamspaces.xsl document.
        Atom feed contains namespaces that are not supported in XMLDataSource. Hence we need to remove those namespaces while providing the feed as data source. For that create an xsl transform document using below contents and save it as RemoveNamespaces.xsl document. We will be using this document while feeding Atom as XML data source for Repeater control.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="*">
    <!-- Remove any prefixes -->
    <xsl:element name="{local-name()}">
      <!-- Work through attributes -->
      <xsl:for-each select="@*">
        <!-- Remove any attribute prefixes -->
        <xsl:attribute name="{local-name()}">
          <xsl:value-of select="."/>
        </xsl:attribute>
      </xsl:for-each>
      <xsl:apply-templates/>
    </xsl:element>
  </xsl:template>
</xsl:stylesheet>

Step 3: Add data repeater control.























Step 4: Select new Data source in smart tag.













Step 5: Add xml data source.
































Step 6: Configure XML data source and provide details as in below screenshot.























Here for Atom feed we are going to provide following details.

Data file: provide the Atom blog post feed link.
Transform file: provide or browse the RemoveNamespaces.xsl document.
XPath: “feed/entry”

Step 7: In Source view of the aspx page, Add below item template code.
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1">
            <ItemTemplate>
            <br />
            <a target="_blank" href='<%# XPath("link[@rel='alternate']/@href") %>'>
                    <strong> <%# XPath("title").ToString()%> </strong></a>
            <br />
            </ItemTemplate>
        </asp:Repeater>

Step 8: Compile and run

Output:


























On an additional Note, you can also view the content/summary of the blog along with the title by using below code in source.
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1">
            <ItemTemplate>
            <br />
            <a target="_blank" href='<%# XPath("link[@rel='alternate']/@href") %>'>
                    <strong> <%# XPath("title").ToString()%> </strong></a>
            <br />
       <%# XPath("content").ToString() %>
            </ItemTemplate>
        </asp:Repeater>

Note: No Code behind involved.

References:

How to feed RSS into your ASP.Net application using Repeater control?


In this blog post, I will show you step by step illustration on how to feed RSS into the ASP.Net application using Repeater control.

What is Repeater Control?
The Repeater control is used to display a repeated list of items that are bound to the control. The Repeater control may be bound to a database table, an XML file, or another list of items.

What is RSS?
         RSS (RDF Site Summary) is a family of web feed formats used to publish/post frequently updated works like blog entries, news headlines, audio and video in a standardized format. For more information refer: RSS_Wiki

An example document in RSS format
<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title>RSS Title</title>
<description>This is an example of an RSS feed</description>
<link>http://www.someexamplerssdomain.com/main.html</link>
<lastBuildDate>Mon, 06 Sep 2010 00:01:00 +0000 </lastBuildDate>
<pubDate>Mon, 06 Sep 2009 16:45:00 +0000 </pubDate>
<ttl>1800</ttl>
<item>
<title>Example entry</title>
<description>Here is some text containing an interesting description.</description>
<link>http://www.wikipedia.org/</link>
<guid>unique string per item</guid>
<pubDate>Mon, 06 Sep 2009 16:45:00 +0000 </pubDate>
</item>
</channel>
</rss>


The best way to learn more about RSS is go through the xml contents of the feed.

How to add RSS - step by step:

Step 1: Create an empty website and add a Default.aspx web page.

Step 2: Add data repeater control.
  

















Step 3: Select new Data source in smart tag.


















Step 4: Add xml data source.


















Step 5: Configure XML data source and provide details as in below screenshot.


















Here for RSS feed we are going to provide following details

Data file: provide the RSS blog post feed link from MSDN
Ex: http://blogs.msdn.com/b/MainFeed.aspx?Type=BlogsOnly

XPath: rss/channel/item

Step 6: In Source view of the aspx page, Add below item template code in repeater control.
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1">
<ItemTemplate>
<a target="_blank" href='<%# XPath("link") %>'>
<strong> <%# XPath("title").ToString()%> </strong></a>
<br />
</ItemTemplate>
</asp:Repeater>


Step 7: Compile and run

Output:


















On an additional Note, you can also view the description of the blog along with the title by using below code in source.
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="XmlDataSource1">
<ItemTemplate>
<a target="_blank" href='<%# XPath("link") %>'>
<strong> <%# XPath("title").ToString()%> </strong></a>
<br />
<%# XPath("description").ToString() %>
</ItemTemplate>
</asp:Repeater>


Note: No code behind involved.

References:

In my next post, I will show the steps on how to feed Atom into ASP.Net