Seree Woradechjamroen » asp.net

The most easiest method to implement a SEO-friendly URL for ASP.NET application

Seree — Tue, 06 Oct 2009 05:55:03 +0000

Well, as a ASP.NET developer. You and me know that it’s a bit hard to apply what we called SEO-friendly URL for ASP.NET applications.

What is SEO-friendly URL?

It’s a URL that search engine love and will result in a better ranking for your web pages/site.

Let’s say you have an accounting system software and your product URL is http://www.xxx.com/product.aspx?Id=432 //Search engine will never know what the product is all about. They just saw Id=432 which doesn’t make sense for them. Actually, it also doesn’t make sense for human as well.

The SEO-friendly URL is a ‘wrapped’ URL to let people/robot read and know what this URL is all about. Let’s say about the above Product which have a new URL as http://www.xxx.com/product/AccountingSoftware

Search engine will know that this URL is all about Accounting software, then they will forward some traffic to your site with the “Accounting software” keyword.

In the PHP/Apache platform, the developer will usually use URL rewrite module easily. Almost every web hosting support this.

Unlike ASP.NET/IIS which is less flexible for configuration. You have to enable some URL rewrite ISAPI libraries which almost every web hosting don’t allow you to do that.

The good news is after ASP.NET MVC was released, it has a built-in routing feature which let you implement a SEO-friendly URL easily without messing up with IIS ISAPI.

You can provide many samples on Google, or even on Microsoft ASP.NET MVC website as well. See –> ASP.NET MVC –> Learn –> Routing and you will see how it’s easy to implement.

I’ll not provide a sample code here as I just want to mention that now you can easily implement SEO-friendly URL with ASP.NET.

Just try and leave me some messages if you got a problem implement it.

See ya babe!

In research of a javascript library to be used with ASP.NET on my next project…

Seree — Thu, 16 Oct 2008 06:26:49 +0000

Hi fellow readers,

Today I come to share with you how I choose a javascript library to be used on my new project.

I’m not talk about choosing just an AJAX library but I want some ‘full’ set of library which including both AJAX core and user interface core.

Here are my choices before consideration…

jQuery
YUI (Yahoo User Interface)
ExtJs

Sorry that I didn’t included other libraries because I’m not impressed with any other at all.

First, jQuery, this is by far the best AJAX + effect library for me personally. I really love it because it produces a ‘short’ script. Especially when compared to YUI.

However, what jQuery lack of is UI components. You have to find out 3rd party for yourself.

So, I decide to move on YUI which currently have a bunch of UI components included.

What I can say about YUI is I really impressed with it. It has a BUNCH of UI included in the library which you can select to use or bypass.

However, most of the script produced by YUI is so ‘long’ when compared to jQuery.

So, now, I hold on both YUI and jQuery and finding for a better library in the market.

I finally found ExtJs.

Try yourself and let me know how you feel about it.

I feel the ‘MOST’ impress with ExtJs.

Cool UI and effect and I decided to use it in combination with jQuery.

This will help me reduce much time to develop my project.

Technical details will be continued in the next part while I’m developing my project.

Talk soon,

Seree W.

Why you need validation in your web application?

Seree — Tue, 18 Mar 2008 08:08:14 +0000

Hi folks,

Did you ever use ASP.NET validation controls?

If you never heard or never use it before, see on the toolbox at the “validation” group.

Those are all validation controls.

- RequiredFieldValidator

- RangeValidator

- CompareValidator

- RegularExpressionValidator

- CustomValidator

- ValidationSummary

The main point of this control group is to be used to validate the input form entered by user before doing any postback.

But why?

As we can implement validation easily in code-behind.

Right?

It had to say Yes and No.

Yes, because validation coding in server-side (code-behind) is easier to code.

No, because while you know at the client that the data is invalid. Why you will let user postback to server?

Waste of bandwidth.

Totally waste!

This is the main reason why you have to use validation controls in your web forms.

Because it’ll help to reduce the unnecessary roundtrip between client and web server.

This will not affect much on the application that consumes less resource.

But it will be a big pain on the application that consumes much resource.

So, when you are dealing with input form.

Always use validation controls!

I know it will help you much.

How do you do when dealing with cross-browser web development?

Seree — Sun, 04 Nov 2007 23:46:19 +0000

Hi friends,

I just want to know that how do you do when you’re dealing with cross-browser web development.

Which tools you are using?

How do you handle those all buggies browser?

What experiences you faced?

As I’m dealing with cross-browser web development project where I generally strict with XHTML 1.0 standard. (As I’m using Microsoft Visual Studio 2005 and there is built-in XHTML 1.0 validator. Also, it has a built-in CSS validator too.)

I generally focus to most popular browsers including Internet Explorer 6.x, 7.x and Mozilla Firefox 2.x.

Below is my experiences and how I handle the project after I failed one. Yes, I failed one! Don’t get wrong like me! It waste your valuable time.

Internet Explorer 7.x, I love this one as it’s easiest to work with while I’m using Visual Studio 2005. For me, it’s not that hard to make Internet Explorer 7.x render HTML as I want.

Next, Firefox is ok but need some care to make it render HTML as you want.

Last, Internet Explorer 6.x is sucks for me as it made me headache over a few nights to get pass its rendering issues. Did you believe that if your pages crash. It might cause you’re using some standard CSS the wrong way (IE6 wrong way) such as float:left; Yes, it can crash most of IE6. Just try to googling for “IE6 float:left crash” and you gonna see the weird thing.

So, If you gonna begin on cross-browser web development. I suggests to go this way…

1. Open up your Visual Studio 2005, for your all pages (.aspx, .html). Set the HTML validator to “XHTML 1.0 Transitional”. This will let Visual Studio 2005 warn you when you not follow the XHTML 1.0 standard. Which is a good way to go. (Don’t go with later version of XHTML as It seems IE6 didn’t fully support it)

2. When working with CSS files. Set your CSS validator to “Internet Explorer 6.0″ or “CSS 1.0″. Don’t go later version for safety. Believe me, less version = less pain.

3. Using your targeted browsers to test your page layout in step-by-step. Do it strictly or you will entering the impossible to solve state after your hard work. I’m using IE7 as the main one. Then using Firefox in the same machine. For IE6, I go with Virtual PC. Yes, I’m working like this actually!

If you follow these 3 steps strictly. You will never get wrong with cross-browser issue like me. When I got this pain, I’ve to waste my time to re-architecture all pages layout.

More tips…

- If you’re using “float:left;” just follow with “display:inline;” to avoid the silly bug of IE6.

- If you’re in design state. Don’t go with table layout. Force yourself to go with table-less layout. Yes, I means using

instead of . Googling “tableless layout css” for more information. Strictly follow this! or you gonna hate IE later. Forget all about

, it’s history now.

Conclusions

I’m very appreciated to receive all comments. Maybe your experiences or tips or …

Thanks you

7 Tips made rendering HTML faster (Do it lately!)

Seree — Tue, 02 Oct 2007 16:57:26 +0000

Any serious web developers should experience a too long rendering time for his/her web pages. Here is the list that I usually do it before release my web application to production stage. I call it my “Optimization check-list”. Please note that, some of tip should be used on ASP.NET specifically and any other may not.

Please keep in mind that, these tips can be effectively used after you’ve completed develop your web application too. As it doesn’t required much effort to re-design or re-programming. I’ll release another tips series that can be done before development begin too as It’s very effective than these tips.

Let’s roll out your hand now.

Tip 1 : Turn off debugging (Very effective)

This tip is for ASP.NET only, just go to your web.config and finding then change debug=”false”

This will increase your web application performance dramatically!

What’s behind the scene?

When you change debug flag to false. All web resources (WebResource.axd?xyz) will be cached by browser while not when debug flag is true. Also, any script related with ASP.NET will be decreased in size. The output assembly will reduce on size too.

Don’t thinks much, when you go to production stage. Just turn it off!

Tip 2 : Turn off un-necessary ViewStates (Very effective)

This be able to do with ASP.NET only and will dramatically decrease your output HTML size! and you can do it just like turn off debug flag at the above.

Find out your ASP.NET standard control tags and check to see whether its state needed to be kept on every page lifecycle? If not, change the attribute “EnableViewState” to “false”. Do it all for every ASP.NET controls in your pages.

What’s behind the scene?

ViewState was used to keep the state on every page lifecycle. They implement by adding some characters into your output HTML. You can see it by view source at the browser and finding for ViewState keyword. You then see the unreadable characters in the output HTML. There is where the control’s state be kept. This tip can reduce much size on the output HTML!

Tip 3 : Re-organize objects in the page

Re-organize, I means revise the order of objects in your pages. Move your unnecessary objects (objects in my meaning is everything that reside on HTML including HTML tags, script, CSS, …) to the bottom of the page. Such as move your big script into the bottom of the page. This will let browser render the layout first then load big scripts later. In some case, very effective!. In one of my project, I can use this method to reduce around 12-15 seconds by re-organize objects in the page.

Tip 4 : Wrap up your inline/external script into a big external file

This means if you have write your javascript inline in the page. You may consider to wrap it up into one single external file. (assume myscripts.js)

Also, If you have many external files. (many .js) You may consider to combine all of them in to one big file instead of.

What’s behind the scene?

Browser can cache the external script file. (.js) and combine them into one single file will benefits on reducing the number of roundtrip when browser need to do cache validation.

Tip 5 : Change your HTML formatting style into CSS style

Throw away the old HTML formatting style such as ,, etc…

Replace with CSS formatting style that use class based. Define the formatting class then apply it to any tag you want.

eg.

.hilight
{
font-family:tahoma;
font-size:small;
color:white;
}

When any tags want to use this format, just apply to it.

eg.

…

Then combine your all classes into one big CSS file. (.css) This will gain the benefits like what Tip 6 did. Browser will cache it and reduce the number of roundtrip when browser do some cache validation.

Tip 6 : Use progressive rendering on your

If your targeted browser is Mozilla FireFox, just skip this tip as FireFox will do it naturally. But for Internet Explorer? No luck today. We’ve to do it ourselves to let Internet Explorer do progressive rendering. Before we go,

What’s progressive rendering?

In nature, when Internet Explorer found

tag that generally be used to arrange the page’s layout. Internet Explorer will need to …

- Determine the table’s size by determine every cell’s size first

- Rendering entire table

This means, when Internet Explorer can’t determine the cell’s size then it will slow on rendering. Such as the case that you have a complex content in some cells that can’t be determine the content’s size. So, Internet Explorer should wait until all content be loaded and it’ll be able to determine the cell’s size now then it will render table later.

So, this will generate a very slow rendering for Internet Explorer when it found many complex content within the table.

Now, we should known the key that made Internet Explorer so slow rendering on table. Because it needs to know every cell’s size first!

So, what will happen if we can fix the size of cell?

Absolutely, it’ll render much faster and this is what we call “Progressive Rendering”. So now, how can I do it?

Here are the steps…

1. Apply CSS attribute called “table-layout:fixed” to

2. Enter the

’s width in style-sheet.

Here is what we’ll get…

…

3. Enter each column’s width by using

tag and style-sheet class.

For style-sheet,

.col1 {width: 31px;}
.col2 {width: 118px;}
.col3 {width: 109px;}
.col4 {width: 140px;}
.col5 {width: 376px;}
.col6 {width: 9px;}
.col7 {width: 200px;}
.col8 {width: 17px;}
.col9 {width: 1px;}

For

tag,

…
…

4. That’s all!

Tip 7 : Don’t slice your image too many!

Wow, go to the previous time. Web developer try to do their page to response faster by slicing a large image into many small images and use table to lay it out. It’s good for the pass, but in my opinion. It’s bad for now if you slice the images too much.

Why?

You may know that the browser such as Internet Explorer has a main thread to load for main page and 2 children threads to load related resources from the main page. So, what will happen If you have too much resources in the page? Even all of the resources are small. It loads very fast, but how about the roundtrip occurred? I seen many cases that too many small files will be loaded much slower than a few medium files.

So, just try and prove yourself that too many resource files can be pain to your page than a less but larger in size.

Conclusion

In the next time, I’ll write the optimization check-list that you can do it in design stage and can gain much benefits than these methods. I’ll include how-to do things like what PageFlake, NetVibes did. Highly interactive with fast response time. Ajax!

Prevent your .NET application from SQL Injection

Seree — Mon, 03 Sep 2007 12:53:56 +0000

Hello everyone,

Now I’ll talking about a technique that script kiddies widely used to attack to the first wall of your application. If you’re a rookie for security topics on development then you may never heard about this before. In my .NET courses training experiences, most of my trainees never know about this issue before and they feel very surprises when I’ve hacked into their system in no time.

What is SQL injection?

Straightly, It’s something like you try to inject some unexpected characters into SQL querying process to gain the out-of-case result.

Let’s see it in more detail!

What should you do If you want to coding your application to authenticate user’s credential that kept in database?

So easy, right? I’m just querying the result from database with this simple SQL query and a few line of code.

Dim strSQL As String = “Select COUNT(*) From Members WHERE LoginName=’” & txtLoginName.Text & “‘ AND Password=’” & txtPassword.Text & “‘”

Dim cmd As New SqlCommand(strSQL, con)

cmd.ExecuteScalar()

It works perfectly! but how the it’ll handle if a hard core user input something unexpected into login name just like the following

xyz’ OR ’1′=’1

When it concatenate into SQL string. It’ll result in to…

Select COUNT(*) From Members
WHERE LoginName=’xyz’ OR ’1′=’1‘ AND Password=’1234‘

Yeah, you can see that OR ’1′=’1′ which always result in TRUE. So, the hard core user can authenticate to the application without knowing of any user’s login name or password.

How can I prevent SQL injection?

Yeah, it’s very easy to do. Just use the technique named as “Parameterized Query”.

OMG! What’s about it? I never heard about those “Parameterized Query”.
You get me in trouble again!

Not that serious, It’s very easy to implement this technique as .NET alraedy provide the framework for you. Just do the following two steps.

1. When you want to create the dynamic SQL query string just like this case. You should use parameter instead of concatenate the variables yourself.

Select COUNT(*) From Members WHERE LoginName=@LoginName AND Password=@Pwd

We call @LoginName and @Pwd as parameter.

2. Before executing the command. Please specify the value for each parameter first.

cmd.Parameters.AddWithValue(“@LoginName“, txtLoginName.Text)

cmd.Parameters.AddWithValue(“@Pwd“, txtPassword.Text)

cmd.ExecuteScalar()

When the command was executed. All parameters will be transformed into the value that suitable for the data type of those database. The good things you get here is that. For string (varchar) data type, generally it should open and close with single quote ” ‘ “. (You can see this code of the first code block) But not for parameterized query, as it will do automatically internal. So, you don’t have to pay your attention to those data type symbol for each database. (Especially datetime data type) and another point, the generated SQL query will never been attacked by SQL injection anymore as it know now how to handle those type of technique.

This is all about that!

For more information about SQL injection, please visit here.

Real world ASP.NET authentication

Seree — Thu, 02 Aug 2007 15:49:32 +0000

Hello everyone,

I’m here to say that most of ASP.NET books on the market didn’t provide you the effective way to use authentication cookies.

Assume that when you’re working with form-based authentication. (Setting in web.config) When we do some manual authentication method, we imports System.Web.Security and using FormsAuthentication.RedirectFromLoginPage(“userName”, false). The ASP.NET authentication engine will automatically create a cookie to persist authenticate status. This cookies was used to identify the user have been signed in or not. So, when we want to store some of user’s profile. How do we do it?

We can coding to create new cookie object to store those profile but we already known that ASP.NET authentication engine already created the cookie when signed in. The question should be “How do we access this cookie? Is it possible?”.

Certainly, you can do it. Please review the following code.

In your login button’s click event.

if(AuthSucceeded){

HttpCookie cookie = FormsAuthentication.GetAuthCookie(txtLoginName.Text, false);

FormsAuthenticationTicket ticket = FormsAuthentication.Decrypt(cookie.Value);

FormsAuthenticationTicket newticket = new FormsAuthenticationTicket(ticket.Version, ticket.Name, ticket.IssueDate, ticket.Expiration, ticket.IsPersistent, “Secret|Role|CustomVar1″, ticket.CookiePath);

cookie.Value = FormsAuthentication.Encrypt(newticket);

Context.Response.Cookies.Set(cookie);

}

The above code was used to create an authenticated cookie with custom profile/data. (“Secret|Role|CustomVar1″)

When we need to extract the custom profile/data, we do with the following code.

FormsIdentity ident = (FormsIdentity)User.Identity;string strCustomData = ident.Ticket.UserData.ToString();

With this method, we don’t need any separated cookies to store the authenticated user’s profile anymore.

Hope this help you get step ahead on your ASP.NET skill.

Create RSS Feed from your data with .NET

Seree — Thu, 02 Aug 2007 12:51:34 +0000

Hello,

Today I’ll give you a quick guide on how to create RSS Feed channel from your existing data. Before we go to the implementation, let’s see a brief overview of What is RSS, Feed or Atom?

RSS, Feed or Atom is a format name of the method for latest generation webmaster to feed their own updated contents into external web sites or any external applications. I focus to the word updated contents because this is a point of the method. (Now I’ll call it RSS and no more Feed or Atom) The content that provide RSS Feed channel almost often updated.

RSS content can be read by any RSS reader software such as Internet Explorer 7.0, Mozilla FireFox, Microsoft Outlook or any third party. Sometime it called “Feed reader” or “Aggregator” instead of “RSS reader”. Most of RSS reader can monitoring the RSS Feed channel and seeing if there are any changes occurred in the content when compared to previous time. This is very useful when some user don’t want to spend too much time to load any UI as it takes so much time than actual contents. If you still don’t get an idea and you have some RSS reader installed, you can try it online here. (Sorry, but the content of the feed is in Thai language. Just prove to get you idea)

For webmaster or developer like us, If you want to build your web site to stay tuned with Web 2.0 trend. You should build RSS Feed channel to your web application to let external applications consume your data and get more traffics.

In technically terms. RSS, Feed or Atom are all just an XML file that had their own format which RSS reader can be read. You can see the sample of XML structure here. (Just RSS 2.0)

So, how can we coding to build up RSS Feed channel from the existing data? It’s very easy, easier than you thinks!

Let’s examine the RSS 2.0 specification first.

Latest Know-How
http://www.knowhowdd.com/
Latest knowhow from www.knowhowdd.com
en-us
Tue, 10 Jun 2003 04:00:00 GMT
rss@knowhowdd.com
webmaster@knowhowdd.com

Custom ASP.NET Membership Provider http://www.knowhowdd.com/ShowKnowhow.aspx?khId=11
How to create your own custom ASP.NET authentication membership provider
Tue, 03 Jun 2003 09:39:21 GMT

Custom ASP.NET Role Provider
http://www.knowhowdd.com/ShowKnowhow.aspx?khId=25
How to create your own custom ASP.NET authentication role provider
Fri, 30 May 2003 11:06:42 GMT

What I’ve hi-lighted in blue are header and footer sections which describe itself meaning. Next, what I’ve hi-lighted as red is body which contains your content items.

So, our development task is just to generate this XML stream from the existing data. It’s really easy to complete this task as .NET already provide a great XML class library. Let’s begin coding with VB.NET.

First of all, import some necessary namespaces.

Imports System.Text
Imports System.Xml

Then go to the code block where you want to generate the RSS Feed and coding to build header section just like the following…

‘Clear response
Response.Clear()

‘Write the beginning of RSS content
Response.ContentType = “text/xml”
Dim xtwFeed As New XmlTextWriter(Response.OutputStream, Encoding.UTF8)
xtwFeed.WriteStartDocument()
xtwFeed.WriteStartElement(“rss”)
xtwFeed.WriteAttributeString(“version”, “2.0″)
xtwFeed.WriteStartElement(“channel”)
xtwFeed.WriteElementString(“title”, “KnowHowDD.com – Latest Know-How on group : ” & g.Title)
xtwFeed.WriteElementString(“link”, “http://www.knowhowdd.com”)
xtwFeed.WriteElementString(“description”, “The latest know-how from KnowHowDD.com”)
xtwFeed.WriteElementString(“copyright”, “Copyright 2006 – 2007 KnowHowDD.com. All rights reserved.”)

The header section was completed now, then we’ll begin to build the body section of the RSS feed. Normally I’ll loop through the collection of data which I want to provide as RSS Feed channel.

‘Loop through all records to generate RSS body
For Each kh As KnowHowEntity In knowHows
‘Write body (Extract from database)
xtwFeed.WriteStartElement(“item”)
xtwFeed.WriteElementString(“title”, kh.Title)
xtwFeed.WriteElementString(“description”, kh.Description)
xtwFeed.WriteElementString(“link”, “http://www.knowhowdd.com/ShowKnowHow.aspx?knowHowId=” & kh.KnowHowId)
xtwFeed.WriteElementString(“pubDate”, kh.PubDate.ToString(“dd/MM/yyyy hh:mm:ss”))
xtwFeed.WriteEndElement()
Next

Now, the body section was completely built. Let’s complete the footer section.

‘Write the ending of RSS content
xtwFeed.WriteEndElement()
xtwFeed.WriteEndElement()
xtwFeed.WriteEndDocument()
xtwFeed.Flush()
xtwFeed.Close()
Response.End()

Easy or not, now it’s completed and we all got RSS Feed channel in our Web 2.0 style application!

Great 3rd party Ajax control suite

Seree — Fri, 22 Jun 2007 06:47:10 +0000

Have you ever tried Ajaxify your ASP.NET application? Have you tried and tired?

I’m one of those guys who already tried and tired on ajaxify the application to fully working in Ajax basis. Until the day I found one of a great Ajax control suite named Telerik RadControls for ASP.NET. It was combined by various ASP.NET UI controls. Most of the controls, I can say nearly 100% already ajaxified for your instant using without deep knowledge on Javascript writing.

I found that my productivity was much increased by this suite and their support are great as I never seen this support anywhere even the more famous controls suite like Infragistics NetAdvantage, ComponentArt, ComponentOne or any other else. You can get quick response back within 24 hours with many samples on your desired case. So, for me It doesn’t a hard decision to afford it for 1 year subscription. After I’ve purchased, I found the bonus are very impressive as Telerik give us many interesting things than I thought. In my case, I purchase Telerik RadControls for ASP.NET with subscription for 1 year. I got Telerik RadControls for WinForms too. After purchase date around three months, Telerik releases new version of Telerik RadControls for WinForms with WPF. (Windows Presentation Foundation) and they give me too! What’s a kindly guy! In next six months, I found that the product was continuously updated around 4 times with many new features. Again, when they release their Telerik Reporting product. I also got it from current subscription and I thinks this reporting product are compact, fast and very easy on deployment. (I kicked out Crystal Reports, Microsoft Reporting Services and even DevExpress’ one – Every products I listed here are required to install some special executables into web server but Telerik’s just use XCOPY method)

If you are finding for a great Ajax controls suite. I can say that you will got the point when working with Telerik’s suite. Very very impressive!