Archive for the ‘Data Presentation’ Category

DataBinder.Eval function

I am creating a blog and I need to preserve white space for user comment. So I need to put <pre> tag around the comment content. In ASP.NET, I could do it in the ItemDataBound function and then use the FindControl function and append <pre> tags to the text property of the label. But there is a much better and easier way. Use the DataBinder.Eval function like below

<asp:Label ID=”CommentLabel” runat=”server” Text='<%# DataBinder.Eval(Container.DataItem,”comment_content”,”<pre>{0}</pre>”) %>’></asp:Label>

In my case, the “comment_content” is the name of the field in my table that contains the user htmlencoded content.


Using CSS Friendly Control Adapter to existing project

What it is:
Download and Install:

1. Downloading the current release. Go to the Releases tab. You should see three prominent links to files. The zip file contains the source code, the CSSFriendly.dll file contains the compiled source code, and the the CSSFriendlyAdapters.browser file is a configuration file. You only need the dll and browser files.
2. Add a reference to CSSFriendly.dll. This is typically done by right-clicking your web project, choosing the Add References command, browsing for the CSSFriendly.dll file, and clicking OK.
3. Add the CSSFriendlyAdapters.browser file to the AppBrowsers folder in the root of your web project. If the AppBrowsers folder doesn’t exist, create it.

You may notice the autoFormat you selected for your gridview or other controls is not working anymore. You will have to use the cssclass property of the control to specify the style you want.

Ways to pass data for website

  1. ViewState – Maintain data for postback for a page
  2. Context items collection – Simple data pass from 1 page to another. (common use for server farm)
  3. QueryString – put value in the URL
  4. Session – Server store value per user (example: user id)
  5. Application – For the whole web application
  6. Cache – Server storing data among all users (example: the product table)
  7. Cookie – Store information on the user’s pc for a long time (example: track first time visit)
  8. PreviousPage object

…and others

Wilco Syntax Highlighter for ASP.NET Tutorial

I am looking for a good syntax highlighter for my new site. I was searching the forum on ASP.NET and eventually stumble upon Wilco’s syntax highlighter. It is open source which gives you the power to configure it. That site lacks a good tutorial and no examples are provided, so it took me a while to figure out how to customized it. (maybe because I’m still a newbie)

First, open and build Wilco’s project in Visual Studio. Then go to “Wilco.SyntaxHighlighting\bin\Debug” folder to get copy the compiled dll file and paste into the bin folder of your other project. Add reference and browse the dll file. Add it to the toolbox by right clicking the area in the toolbox section, browse the dll file again. You should see 4 more controls in the toolbox. Now just drag and drop it into your web page. Select the mode, language and text.

To customize the look, you can change the style setting in the SyntaxHighlighterTemplates.cs file.

Context.Items vs. ViewState

To pass values from one page to another, Context.Items and ViewState are used most often.

It is important to keep in mind that values stored in the Context.Items collection only last for the current request. If I were to do a postback on the page, the Context item would be lost. Most of the time this is convienient since we only need to store that value between pages and no longer.

To keep track of values between postback, use ViewState. Unlike Context.Items collection that is used to transfer data from one page to another, ViewState can be only used for the same page. It is useful for postback. Also, Context.Items is used very often in the server farm architecture.

It’s common to use this in the page_load function of the page. Check out the example below. Note that the IsPostBack condition below. If that is not there, then the postback of the page will read Context.Items(“id”) again which will be null. This will cause a problem. That is why it is important to have it there.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Dim ProductToShow As Integer
If Not Me.IsPostBack Then
ProductToShow = Context.Items("Id")
Me.ViewState("Id") = ProductToShow
ProductToShow = Me.ViewState.Item("Id")
End If
End Sub

Website display partially in IE 7

I am still using IE 6 at work and the website looks fine. When I get home, the website only display partial of the page.  It turns out that it only effect web pages with the Panel control on it. The problem is the default height for the Panel control is 50 px. IE 6 display the whole thing and IE 7 is more restrict and hence only display 50px of the panel. Solution is to get rid of the height.

the menu control in ASP.NET

To use sitemap file as the datasource for the the horizontal menu control,

  1. Put the SiteMapDataSource into the aspx page.
  2. Drag the menu control to the aspx page.
  3. Change its datasource to the SiteMapDataSource.
  4. Change the Orientation property of the menu to Horizontal.
  5. Change the StaticDisplayLevels property to 2, so that it will display the first 2 levels of the SiteMap. Default is one which is useless in my opinion if you are using a SiteMap file because it only shows the “Home” button or the first node in your SiteMap file.

Set the DefaultFocus or DefaultButton in a Page Based on a Master Page

When user type in the keyword in the search textbox and press the Enter key on keyboard, the webpage just do a simple postback. It doesn’t run the query until the user hit the “Search” button.

Use defaultfocus and defaultbutton.
defaultfocus puts the mouse cursor into the control when the page loads
defaultbutton cause the button click event, without it, it just cause a pagepost back

Because of the Master page, UniqueID and ClientID is necessary for this to work properly.

protected void Page_Load(object sender, EventArgs e)
Page.Form.DefaultButton = this.Button_Continue.UniqueID;
Page.Form.DefaultFocus = this.TextBox_PN.ClientID;

No javascript detection message

Below is the html code that I have been using for many website to tell the visitor to enable the Javascript. Any code between the <noscript> tag will only be displayed if user’s browser doesn’t support Javascript. It will put the message fixed at the top of the website. The message will take about 3.5em, that is why I have the top margin in the <noscript> tags.

In the aspx page:
<style type=”text/css”>
body { margin-top:3.5em; }
<div id=”noscript-warning” style=””> This website works best with JavaScript enabled </div>

In the css file:
#noscript-warning {
padding:10px 0;

ASP.NET MultiView

Designer View:

<asp:Menu ID=”Menu1″ runat=”server” Orientation=”Horizontal” ForeColor=”#666666″>
<asp:MenuItem Text=”OPEN” Value=”0″ Selected=”True”></asp:MenuItem>
<asp:MenuItem Text=”ACCEPTED” Value=”1″></asp:MenuItem>
<asp:MenuItem Text=”REJECTED” Value=”2″></asp:MenuItem>

<asp:MultiView ID=”MultiView1″ runat=”server” ActiveViewIndex=”0″>
<asp:View ID=”View1″ runat=”server”>…</asp:View>
<asp:View ID=”View2″ runat=”server”>…</asp:View>
<asp:View ID=”View3″ runat=”server”>…</asp:View>

Code View:

Protected Sub Menu1_MenuItemClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs) Handles Menu1.MenuItemClick
MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)
End Sub