Mental Jetsam

By Peter Finch

Archive for February, 2011

Displaying XML data in .NET

Posted by pcfinch on February 14, 2011

The following is an example of displaying information from a XML document in .NET using an “xmlDataSource” and “DataList”. This is a very simple way to display record base information from an XML data source placed in the application directory like the file below (e.g. “~/data/news.xml”), and it is easy to convert to an “sqlDataSource”, in the future, by replacing the “XPath()” function with “Eval()”.

<?xml version="1.0" encoding="utf-8" ?>
 <item id='a1'>
 <title>New Website</title>
 <date>Monday, 7th Feb 2011</date>
 <short>New Development Labs website.</short>
 <item id='a2'>
 <title>New Taskbar</title>
 <date>Monday, 207th Dec 2010</date>
 <short>Released new taskbar functionality.</short>

Just insert the following code into the C# webform and masterpage.

<asp:XmlDataSource ID="newsDataSource" runat="server" DataFile="~/data/news.xml">
<asp:DataList ID="newsDataList" runat="server" DataSourceID="newsDataSource">
 <img src='images/<%#XPath("image")%>' />
 <a href='details.aspx?id=<%#XPath("@id") %>'>
 <%#XPath("title") %>
 <div><%#XPath("date") %></div>
 <div><%#XPath("short") %></div>

A subset of the XML document can be selected by adding an optional “XPath” attribute to the “xmlDataSource” tag…

  ID="newsDataSource" runat="server"

or using the following C# code.

newsDataSource.XPath = String.Format("/news/item[@id='{0}']", id);

Posted in C#.NET, HTML | Leave a Comment »

3 column HTML page layout with fixed left and right sidebars using CSS

Posted by pcfinch on February 8, 2011

The following is a simple 3 column HTML page layout using CSS (no tables) so that the left and right “sidebars” have a fixed size and the content expands and contracts to fit the remaining page width.

There are a couple of “tricks” to get this working.

  • Use “float:left” and “float:right” to position the left and right sidebars.
  • The “lbar” and “rbar” divisions MUST appear before the “middle” division.
  • [Optional] Remove the margin from the h1 heading “margin:0” otherwise it looks odd on some browsers if it’s the first element in the division.
<style type="text/css">
body { font-size:10pt }
.lbar { float:left ; width:120px; background-color:yellow }
.rbar { float:right ; width:120px; background-color:yellow }
.middle { margin-left:130px; margin-right:130px; background-color:gray }
h1 { margin:0; font-size:12pt; background-color:blue ; color:white ;  }
<h1>Left Bar</h1>
<h1>Right Bar</h1>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<p>

Posted in CSS, HTML | Leave a Comment »