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.
<o:p>
The Practices
Login page:<o:p>
<o:p>
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:<o:p>
<o:p>
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.
<o:p>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.
<o:p>
<o:p># Relevant resources:
<o:p>
<o:p>1. <ASP.NET 2.0> Applying Styles, Themes, and Skins
<o:p>2. Applying Styles to Controls
Data format:<o:p>
<o:p>
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.
<o:p>
Validators:<o:p>
<o:p>
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.
<o:p>
<o:p>
<o:p># Relevant resources:
<o:p>
<o:p>1. <ASP.NET 2.0> Validating Form Input Controls
2. <ASP.NET 2.0> Validation Controls
<o:p>3. <ASP.NET 1.1> Server Control Form Validation
Control focus:<o:p>
<o:p>
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.
<o:p>
<o:p># Relevant resources:
<o:p>
Focus in ASP.NET Controls
Grid:<o:p>
<o:p>
1. Include ‘Delete Confirmation Box”
2. Include Paging
3. Include Sorting
4. For action buttons use text/ image
<o:p>
<o:p>
<o:p># Relevant resources:
<o:p>
<o:p>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
<o:p>4. Delete Confirmation Box
Details page:<o:p>
<o:p>
<o:p>The details info of a record of tabular data can be viewed and updated in any of the following ways:
<o:p>
<o:p>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:<o:p>
<o:p>
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.
<o:p>
<o:p># Relevant resources:
<o:p>
<o:p>1. Using Style sheets to create a 'Print This Page' View
2. A Simple HTML Builder Utility Class
<o:p>
Pop-up page:<o:p>
<o:p>
No browser buttons will be displayed, rather only the page content and browser title bar will be visible.
<o:p>
<o:p># Relevant resources:
<o:p>
<o:p><o:p>A Client Script Helper Utility Class
<o:p>
Error page:<o:p>
<o:p>
When there is an exception occurred while processing info, an error page will be shown with some text.
<o:p>
<o:p># Relevant resources:
<o:p>
<o:p>Customizing Error Pages
<o:p>
Session expire page:<o:p>
<o:p>
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.
<o:p>
<o:p># Relevant resources:
<o:p>
<o:p>Detecting ASP.NET Session Timeouts
<o:p>
Test page:<o:p>
<o:p>
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.
<o:p>
E-mail notification:<o:p>
<o:p>
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: <st1:personname w:st="on">joy_csharp@hotmail.com).
4. Consider who will be the default E-mail receiver. Generally this is set to the developers e-mail (example: <st1:personname w:st="on">joy_csharp@hotmail.com).
<o:p>
<o:p># Relevant resources:
<o:p>
<o:p>1. <ASP.NET 2.0> Sending Email From ASP.Net
<o:p>2. Sending emails with ASP .NET
<o:p>
File attachment:<o:p>
<o:p>
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.
<o:p>
<o:p># Relevant resources:
<o:p>
<o:p>File Upload with ASP.NET
<o:p>
User manual:<o:p>
<o:p>
<o:p> 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.
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).
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
(
