Click here to Skip to main content
Click here to Skip to main content

Common UI Practices in ASP.NET Applications

, 23 Mar 2006
Rate this:
Please Sign up or sign in to vote.
When we start a new project, there are some common practices that should be followed on the following project. Regarding my development experience on previous 12 ASP.NET projects, I have listed some few practices which can be followed by a developer while developing an ASP.NET application.

Introduction

 

When we start a new project, there are some common practices that should be followed on the following project. Regarding my development experience on previous 12 ASP.NET projects, I have listed some few practices which can be followed by a developer while developing an ASP.NET application.

 

The Practices

 

Login page:

 

1. Include cookie based “Remember me” check box.

2. Include a “Forgot password” link, the user can request for password.

3. There will be a test log-in page before release the product.

4. If the user doesn’t interact with the application for 30 minutes (asp.net default), and tries to interact after then the user will be automatically redirected to the log-in page. However we can override the authentication timeout value.

 

# Relevant resources:

 

1. <ASP.NET 2.0> Login Controls
2. Building a Custom Registration and Login Control 
 

Site theme:

 

1. Use verdana as text font.

2. Normal text 10pt, paragraph text 11pt, heading text 12pt, bold (or inlcude in H1 html tag).

3. UI controls having right justified caption, and a spacer of 10 pt width between that.

4. Have common header, footer among all the pages. The footer will include the copyright text.

5. To make styles of text, hyperlinks, UI controls of the application uniform implement style sheet classes where possible. This makes the modification of the site theme easy as well as.

 

# Relevant resources: 

 

1. <ASP.NET 2.0> Applying Styles, Themes, and Skins

2. Applying Styles to Controls 
 

Data format:

 

1. Date format:

All dates will be considered in this format: MM/DD/YYYY, or the format specific to target culture.

 

2. Money format:

All money formats will be considered in 2 degree precision.

 

Validators:

 

1. When the user clicks to “Save” data, any field that is bound to validation logic, for which the validation logic fails (for example: no data has been provided for a “Required” field) will show a red “Validation” message at the right side of that control. Once data are entered and the focus is changed to other controls that red “Validation” message will be disappeared.

Here are the common validation types and messages that will be used in the application:

  • a. Required:  “Required”
  • b. Email address format: “Valid email address required”
  • c. Date format: “Not a valid date”
  • d. Number: “Not a number”
  • e. Fractional value: “Enter a valid number or value”

2. Include “*” for required fields and a text “* indicates required fields”, at the top right of the UI panel.

3. Text length: when the user exceeds the recommended length of text, a message box will be shown automatically and no characters can be entered.

 

# Relevant resources: 

 

1. <ASP.NET 2.0> Validating Form Input Controls
2. <ASP.NET 2.0> Validation Controls

3. <ASP.NET 1.1> Server Control Form Validation

 

Control focus:

 

When there is required to post back any control during the data insertion and the controls are placed at the bottom of the page (to which the user has been reached by scrolling the window), the next control will be automatically focused after the post-back.

 

# Relevant resources: 

 

Focus in ASP.NET Controls 
 

Grid:

 

1. Include ‘Delete Confirmation Box”

2. Include Paging

3. Include Sorting

4. For action buttons use text/ image

 

# Relevant resources: 

 

1. <ASP.NET 2.0> Grid Sorting and Paging 
2. <ASP.NET 1.1> Sorting Columns in DataGrid
3. <ASP.NET 1.1> Paging in DataGrid
4. Delete Confirmation Box    

 

Details page:

 

The details info of a record of tabular data can be viewed and updated in any of the following ways:

 

1. Grid

Data can be updated on the grid.

 

2. Details panel

Details content will be placed on the same caller page and can be updated.

 

3. Pop-up page

Content will be shown to show the details info of the corresponding record.

 

4. Multiple pages

a. Include back, next button to go to other portions of the corresponding entity or data table row.

b. Include save, cancel button

c. save data to database when any of the navigation button for the corresponding record is clicked.

 

# Relevant resources:

 

1. <ASP.NET 2.0> "DetailsView" Control
2. <ASP.NET 2.0> "FormView" Control  

 

Print page:

 

Generally web application pages may have graphical images and styles for better UI experience. However, the page containing graphical image may not be useful (or looks good) while this page is printed. A common UI practice is to have a 'Print this page' link in the application data pages, which redirects the user to a printer friendly page. This type of page contains a “Print” and a “Close” link, along with all the info of the corresponding record.

 

# Relevant resources: 

 

1. Using Style sheets to create a 'Print This Page' View 
2. A Simple HTML Builder Utility Class

 

Pop-up page:

 

No browser buttons will be displayed, rather only the page content and browser title bar will be visible.

 

# Relevant resources:
 

A Client Script Helper Utility Class 
 

Error page:

 

When there is an exception occurred while processing info, an error page will be shown with some text.

 

# Relevant resources:

 

Customizing Error Pages 
 

Session expire page:

 

If the user doesn’t interact with the application for 20 minutes (asp.net default), and tries to interact after then the user will be automatically redirected to the session expire page, which contains some text message. However we can override the session timeout value in "web.config" file.

 

# Relevant resources:

 

Detecting ASP.NET Session Timeouts  

 

Test page:

 

There will be some test page which will illustrate complex data processing. However these pages will be placed on the public page, or can be authenticated by the test log-in page.

 

E-mail notification:

 

1. Once data insertion is completed, an automated e-mail notification will be sent to a predefined and/or the email that was just provided in the data insertion.

2. Developers will be notified thru mail when there is an exception occurred by the application.

3. Please consider the “Email From” address while sending the automated mail. Generally this is set to the developers e-mail (example: joy_csharp@hotmail.com).

4. Consider who will be the default E-mail receiver. Generally this is set to the developers e-mail (example: joy_csharp@hotmail.com).

 

# Relevant resources:

 

1. <ASP.NET 2.0> Sending Email From ASP.Net 

2. Sending emails with ASP .NET
 

File attachment:

 

1. Uploaded files will be saved with the “fileid_” prefix, so that no future uploaded file can replace this file.

2. Multiple files can be downloaded by the dynamic generation of ‘upload’ control by specifying by the user that how many files will be uploaded.

3. For uploaded file size, asp.net default is 4 MB. Please mention the size if you need greater than that.

4. By default the file attachments will be placed on “Virtual directory\Attachments” folder.

 

# Relevant resources:

 

File Upload with ASP.NET 

 

User manual:

 

 1. Help location:
  • a. To get the help content for any page, the ‘Help’ button is located with the other page navigation tab.
  • b. For any control, a ‘Help’ button icon can be embedded with it.
2. Content:
  • a. For each item/ page the help text can be placed onto separate html file.
  • b. All of the help contents can be placed into one html file.
  • c. For a given control, a simple help text can be placed at the below location of that, with a gray, italic format.

Conclusion

However, the provided outlines can be considered as "UI Standard Template". Before starting a new project, you can use this template to have the clients an idea about the future UI standard of the project and thus can update the UI standard easily according to agreed model.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Mohammad Ashraful Alam
Chief Technology Officer
Bangladesh Bangladesh
Mohammad Ashraful Alam is a Software Engineer, who is dedicated to Microsoft .NET based development. This Bangladeshi national is involved with project management and development of several US based software projects from his country. Already he has managed and developed 15 software projects, which are being used by several users of different countries, such as USA, Canada, Australia, and Bangladesh. While developing and managing a team, he contains and maintains a set of well defined engineering practices developed by him and other online developer community. Beside software development, he has also written several technical articles and research papers published by IEEE Computer Society and many other worlds recognized publishers.
 
Before becoming engaged with software development, he was involved with Bengali literature and several Bengali news papers as freelance journalist and published around 150 articles, essays and short stories.
 
Due to his willingness to give effort to improve and share better software development practices, Ashraf has awarded as “Most Valuable Professional” (MVP) in ASP.NET category by Microsoft for multiple times, since 2007.
 
When not engaged with technical stuffs, he likes to pass time with his friends, and family members, listens music or watches TV.
 
Check his portfolio at: http://www.ashraful.net/.
 
Check his blog: http://blog.ashraful.net/.
 
Catch him thru mail: admin [attt] ashraful [dotttt] net (anti-spam text).

Comments and Discussions

 
GeneralTextbox in Datagrid Pinmembercoolnaveen123416-Apr-06 22:27 
Generalsome corrections... Pinmemberneilmcguigan27-Mar-06 8:25 
GeneralRe: some corrections... PinmemberMohammad Ashraful Alam27-Mar-06 21:09 
GeneralRe: some corrections... PinmemberMarek Konieczny30-Mar-06 1:22 
GeneralRe: some corrections... Pinmemberneilmcguigan30-Mar-06 5:27 
GeneralOn ASP.NET PinmemberSimone Busoli24-Mar-06 15:10 
GeneralRe: On ASP.NET PinmemberMohammad Ashraful Alam25-Mar-06 0:12 
GeneralRe: On ASP.NET PinmemberSimone Busoli25-Mar-06 3:35 
GeneralRe: On ASP.NET PinmemberMohammad Ashraful Alam25-Mar-06 4:25 
GeneralRe: On ASP.NET PinmemberMohammad Ashraful Alam26-Mar-06 8:44 
GeneralRe: On ASP.NET PinmemberSimone Busoli26-Mar-06 8:53 
GeneralASP.NET Site PinmemberMohammad Ashraful Alam23-Mar-06 8:48 
GeneralSome Suggestions Pinmembertrnelson23-Mar-06 8:38 
GeneralRe: Some Suggestions PinmemberMohammad Ashraful Alam23-Mar-06 8:40 
NewsDate Format PinmemberAmadrias22-Mar-06 10:20 
GeneralRe: Date Format PinmemberMohammad Ashraful Alam23-Mar-06 8:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140709.1 | Last Updated 23 Mar 2006
Article Copyright 2006 by Mohammad Ashraful Alam
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid