Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

March 11, 2014

Display raw XML in html page

I was working on a page where I had to display raw XML to an page and surprisingly it turned out to be quite challenging. Seriously, how hard can it be. I remember displaying xml by encoding it but that's not really an option in my scenario.

XML control – did not work

I tried using the XML control but it did not work. The control renders xml without displaying the raw xml. I could see the xml displayed in the source code of the browser but it would not appear in the browser.

Label & Literal control – did not work

Then I tried using the Label and Literal control but it did not display any content from the xml. The xml appeared in the source code but the browser could not interpret it. However, the controls can display xml once the xml is encoded.

<Pre> , <code>html elements – did not work

Then I tried using the <pre> and <code> elements but there was no improvement. The browser still would not display the xml. The <pre> tag basically can display xml once it is encoded.

TextArea element – finally it worked

Finally, I used the textarea element and it worked.  The problem with textarea is that it is editable and it has other display features like border and resize options. Fortunately, these properties can be modified using css. So, here is the code to display xml in a textarea. I have used dummy xml for the snippet.

  1. <!DOCTYPE html>
  3. <html xmlns="">
  4. <head runat="server">
  5.     <title></title>
  6.     <style>
  7.         .tbox { width:80%; height:80px; border:0; overflow:visible; resize:none; outline:none; }
  8.     </style>
  9. </head>
  10. <body>
  11.     <form id="form1" runat="server">
  12.     <div>
  13.         <asp:TextBox ID="t1" runat="server" ReadOnly="true" CssClass="tbox" TextMode="MultiLine"></asp:TextBox>
  14.     </div>
  15.     </form>
  16. </body>
  17. </html>


And here is the back end code to get the xml.

Back end
  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     DisplayXml();
  4. }
  6. private void DisplayXml()
  7. {
  8.     string xml = "<data><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test><test id=\"1\">some text</test></data>";
  9.     t1.Text = xml;                   
  10. }


Now run the page and it should just work. With the height and width of the text area, set to something that is reasonable in your application.

October 24, 2012

GridView can be used to display tabular data. Sometimes, instead of paging data, it might be user friendly to display all data in a scrollable format.

It's quite easy to implement this using CSS. In the example below, I have got a div element with a GridView in it and have applied styles to the div to allow scrolling. 

  1. <div style="height:200px; overflow:scroll;">
  2.     <asp:GridView ID="Gv2" runat="server" AutoGenerateColumns="true"
  3.             DataKeyNames="Uid" DataSourceID="EntityDataSource2">
  4.     </asp:GridView>
  6.     <asp:EntityDataSource ID="EntityDataSource2" runat="server"
  7.         ConnectionString="name=ProductsEntities"
  8.         DefaultContainerName="ProductsEntities" EnableFlattening="False"
  9.         EntitySetName="Products">
  10.     </asp:EntityDataSource>    
  11. </div>

September 12, 2012

Asp.Net GridView can be used to display a large amount of data on a page. Sometimes it would be a better design to style the GridView to display with background colours for alternate rows and a different background colour on hover. The GridView control already has AlternateRowStyle property for setting the alternate colours on rows. The hover feature can be implemented by using css styles.

Here is an example of how to declare the GirdView.

  1. <asp:GridView ID="Grid1" runat="server" CellPadding="4" ForeColor="#333333"
  2.         GridLines="None">
  3.     <AlternatingRowStyle BackColor="White" />
  4.     <EditRowStyle BackColor="#2461BF" />
  5.     <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  6.     <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  7.     <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
  8.     <RowStyle BackColor="#EFF3FB" />
  9.     <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
  10.     <SortedAscendingCellStyle BackColor="#F5F7FB" />
  11.     <SortedAscendingHeaderStyle BackColor="#6D95E1" />
  12.     <SortedDescendingCellStyle BackColor="#E9EBEF" />
  13.     <SortedDescendingHeaderStyle BackColor="#4870BE" />
  14. </asp:GridView>

The AlternateRowStyle property sets the background colour of alternate row and the RowStyle’s BackColor property set the background colour of the row.

The GridView is rendered as a table and the hover feature can be implemented using css as per below.

GridView Css Styles
  1. <style type="text/css">
  2. table tr:hover { background-color:#eee;}
  3. table tr td:hover { background-color:#ccc;}
  4. </style>

July 31, 2009

Bind LinkedList to ListView

In the previous example, I showed how to bind a GridView to a LinkedList object. In this example, I will bind a LinkedList to a ListView. I will use the same Country class, add Country objects to the LinkedList and bind it to the ListView.

Here is the aspx page,

As can be seen, I am using unordered list for the ListView's data display and applying different styles for the alternate rows. The styles are here,

The code-behind for the page is almost same as in the previous example, except that it in Page_Load, I am binding the LinkedList object to the ListView. Here, is the code for the code-behind ,

The code for the Country object can be obtained from the previous example. The output when the page is run is below.

July 11, 2009

Get Styles from Web Controls

In this example, I will show how to retrieve all the styles and its values from code-behind of an page. To do so, I will create a page with a div control with some styles. Here is the code for the page,

    <form id="form1" runat="server">
    <div style="color:Red; border:solid 1px red;" runat="server" id="div1">

It's a very simple page with one html control with color and border styles. From the code-behind, I will identify the individual style attribute, that is, color and border and find the assciated values.

Here is the code-behind,

    HtmlGenericControl hc = (HtmlGenericControl)Page.FindControl("div1");//get the div control
    IEnumerator keys = hc.Style.Keys.GetEnumerator();

    while (keys.MoveNext())
    string key = (string)keys.Current;//getting current key
    Response.Write("style: " + key + " value: " + hc.Style[key]);

Here, at first, I am finding the div control using FindControl method and casting it as HtmlGenericControl. Then, creating a iEnumerator collection and assigning it to the styles of the control. Then, looping the collection and getting each value.

July 7, 2009

Dynamically add styles to page

In this example, I will create a page and then dynamically add styles to it. Here is the page code,

    <form id="form1" runat="server">
    <div>this div has a yellow 
    <br /><br />
    <div id="div1">This div has id div1</div>
    <br /><br />
    <div id="div2" runat="server">This div has id div2</div>

As you can see, it is a very basic page with three div elements. One of the div elements is plain, the other has an id attribute and the last one has both an id attribute and runat="server" attribute. I will be applying styles to this div elements based on the id attributes or tag names.

From code-behind, Page_Load method,

protected void Page_Load(object sender, EventArgs e)
            Page.Header.StyleSheet.CreateStyleRule(GetStyleByTagName(), null, "div");
            Page.Header.StyleSheet.CreateStyleRule(GetStyleByTagName(), null, "#div1");
            Page.Header.StyleSheet.CreateStyleRule(GetStyleByTagName(), null, "#div2");

I am adding styles to the head element of the page using CreateStyleRule method and passing in a method GetStyleByTagName() and the div element for which the style will be added to.

Here, is the code for the  GetStyleByTagName() method.

private Style GetStyleByTagName()//set style for a div element
            Style style = new Style();//creating Style object
            style.ForeColor = System.Drawing.Color.Red;//setting fore color to red
            style.BackColor = System.Drawing.Color.Yellow;//setting background color to yellow
            style.BorderWidth = 1;//setting border width to 1
            style.BorderColor = System.Drawing.Color.Blue;//setting border color to blue
            style.BorderStyle = BorderStyle.Solid;//setting border style to solid
            return style;

In this method, I am creating a Style object and then adding color, background color, border styling and then returning the style. This style is added to the div elements specified in the Page_Load method.

When the page is run, the following is generated in the source code of the page.
<<span class="start-tag">style</span><span class="attribute-name"> type</span>=<span class="attribute-value">"text/css"</span>>
div { color:Red;background-color:Yellow;border-color:Blue;border-width:1px;border-style:Solid; }
#div1 { color:Red;background-color:Yellow;border-color:Blue;border-width:1px;border-style:Solid; }
#div2 { color:Red;background-color:Yellow;border-color:Blue;border-width:1px;border-style:Solid; }
</<span class="end-tag">style</span>>

April 13, 2009

Convert text to uppercase using CSS

In many pages, I have noticed people writing javascripts to enable simple text transformation like converting all characters to uppercase, etc. Some of these features can be easily achieved using CSS styles.

In this example, I will use CSS to convert all characters in a div, span, asp:Label and asp:TextBox to uppercase.

In the head section, declare the style.

<head runat="server">
title>Convert text to uppercase</title><style type="text/css">.upper { text-transform:uppercase; }</style></head>

In the body section, declare the content elements and associate them with the CSS style.


<form id="form1" runat="server">

<div class="upper">one line of div text.</div><br />

<span class="upper">one line of span text.</span><br />

<asp:TextBox ID="TextBox1" runat="server" CssClass="upper"></asp:TextBox><br/>

<asp:Label ID="Label1" runat="server" Text="one line of Label text." CssClass="upper"></asp:Label><br />


That's it, when you run the page, all the text in the page will be displayed as uppercase.

Reference: Shahed Kazi at