Friday, October 30, 2009

Posting form data from <a href="http://ASP.NET">ASP.NET</a> page to another URL


Sometime you need to post a form to an different url from pages, for example you might need to send user to third party payment processing system using post method, does not provide any straight forward way to accomplish this task.

Problem which most users faces with server side form in aspx page are, you are not allowed to change action of form and you are allowed to use only one server side form per page.

Possible Solutions.

1. One possible solution to this problem is to Create your own form control and use it on page this will allow you to change action of form, but again what if you do not want some existing input elements in current page to go to post.

2. There is good way to post form data using HttpWebResponse & HttpWebRequest class if you want to post data behind the scenes, but if you want to post data using user browser then you are stuck.

Our Solution.

I will try to show you one possible way to accomplish this task, we will create 1)component that will create form with required fields and post the form to specified url, 2) web page that will use that component to post data and 3) page which will receive that data and display posted data.

A) RemotePost Class.

Public Class RemotePost
Private Inputs As System.Collections.Specialized.NameValueCollection = New System.Collections.Specialized.NameValueCollection

Public Url As String = ""
Public Method As String = "post"
Public FormName As String = "form1"
Public Sub Add(ByVal name As String, ByVal value As String)
Inputs.Add(name, value)
End Sub
Public Sub Post()
System.Web.HttpContext.Current.Response.Clear()System.Web.HttpContext.Current.Response.Write("")System.Web.HttpContext.Current.Response.Write(String.Format("", FormName))System.Web.HttpContext.Current.Response.Write(String.Format("", FormName, Method, Url))
Dim i As Integer = 0
Do While i < Inputs.Keys.Count
System.Web.HttpContext.Current.Response.Write(String.Format("", Inputs.Keys(i), Inputs(Inputs.Keys(i))))
i += 1
End Sub
End Class

Properties of our component.

1. "Url" which is action of our form.
2. "Method" which is Method of our form, default is Post but you can also use Get.
3. "FormName" which is name of form.

Methods of our component.

1. "Add" which will be used to add form input name and value. and

2. "Post" which will render html on page to do actual posting, most important part of this method is onload event of rendered html's body which will post form to specified URL.

3. Private field Inputs which will hold name value pair collection of all inputs that goes into form.

4. You can compile this class to dll and use in your project but for simplicity I am including that class directly into page itself.

B) Sample Page.

Following is sample page code which posts form to specified url.

Dim myremotepost As RemotePost = New RemotePost
myremotepost.Url = htttp://"myremotepost.Add("field1", "Huckleberry")
myremotepost.Add("field2", "Finn")

C) Receiving Page.

Following is sample page code which posts form to specified url.

This is the page where posting will occur for simplicity we will just write posed value so that we can know what was posted.

If Not Request.Form("field1") Is Nothing Then
Response.Write("field1 : " & Request.Form("field1") & "")
End If
If Not Request.Form("field2") Is Nothing Then
Response.Write("field2 : " & Request.Form("field2") & "")
End If

Run Sample

Click "" target="new">here to run sample

There will be cases where you will need to tweak the code to suit your requirement. you will also need to check scenario where user uses back button of browser(from posted p
in reference to:
"Posting form data from ASP.NET page to another URL"
- Posting form data from ASP.NET page to another URL (view on Google Sidewiki)

Monday, October 5, 2009

Install CSS Viewer For Firefox 3.5.X

Install CSS Viewer For Firefox 3.5.X
CSSViewer is a very handy add on for Firefox, which shows the css parameters of any element in a website. If you use it once then you cannot live without it.

The bad news are that it is not compatible with the Firefox 3.5.* version, and from what I can understand there are no plans for an update.

The good news are that there is a really easy way to install it and make it work perfect in Firefox 3.5.*

1. Copy the following address to another browser than Firefox (so that the pop up installation window will not come out)

if you do not have any other browser installed go to

2. Download the file cssviewer-1.0.3-fx.xpi

3. Use 7-zip (or any other extractor) to open it and extract it

4. Open install.rdf with notepad (I used Notepad++ to find easily the line I must change)

5. On line 18 you see 3.0.* you must change it to 3.5.*

6. Save the file and select all the files you extracted and make a zip file

7. Now you must rename the zip file including the zip extension to cssviewer-1.0.3-fx.xpi (it will prompt you if you are sure you want to change the file name extension and you must click yes)

8. Now drag n’ drop the xpi file to Firefox 3.5.* and the installation window will pop up. Install it normally ;)

I have checked it and it works great in Firefox 3.5.1

Sunday, October 4, 2009

Best Web Developer tools for Firefox and Internet Explorer

Best Web Developer tools for Firefox and Internet Explorer
May 4th, 2008 | Save to now(84)
Here are 11 web developer tools & add-ons that i personally use and find them very useful. These are the tools that i need whenever i am doing any web application development, In their absence i feel i have become a handless person.
This list is in priority order of my usage or in other words, their importance to my work.
1. Firebug
2. Measure It
3. ColorZilla
4. Web developer Tool bar
6. YSlow
7. Screengrab & FireShot
8. IE Developer Tool bar
9. Delicious Button for Internet Explorer
10. DebugBar
11. Nikhil’s Web development Helper

Add-ons That I use on Firefox

All these extensions complement each other really good. check out this screenshot to see their exact location.
1. Firebug
If I have to choose between all these plugins I will choose firebug. It is a very versatile tool, which provides ability to see html source code in a formated manner. You can see style sheet applied to each and every element in the webpage and you can see all the ajax request headers. You can actually edit the css to see them affecting the website in real time. this is swiss army knife of web development world. Download the firebug.

2. Measure It
A very handy and simple tool, Measure It allows you to measure the width and height of any area in the webpage. You don’t have to any image editors any more to get the width and height of that block. Download Measure It.
3. ColorZilla
This is a very cool color picker tool that is available for Firefox. If you want to know the color of any thing opened in the web browser, yes even images, then this is the tool for you.

You can see all the options that are available. Download ColorZilla.

4. Web Developer Toolbar
This is another very useful tool, You can use this to disabling js, css images etc to simulate different conditions. You can read and delete cookies, clear caches, enable or disable form elements and lot of other things easily. Get the Web Developer Toolbar.

5. Delicious Bookmarks

Well, In general if you see, it does not contribute to web application development directly, but it’s ability to share my bookmarks across different machines that i use, It becomes very valuable. After all those book marks are all the references collected from the web that are related to my web development activities. Get Delicious Bokmarks.
6. YSlow
A plugin from yahoo, this one helps me analyze the speed of my website as per yahoo’s recommendations for optimizing and speeding up the website for my users. Get YSlow.

7. Screengrab And/Or FireShot

I was using screen grab for capturing screenshot’s of webpages that i liked, and sometimes, to show my colleagues what’s wrong with their layout. Get ScreenGrab.Since i have found out about FireShot, i am using it exclusively for this purpose.

FireShot provides the features to added notes without opening any image editor, this is the feature that made me fall in love with it. Get FireShot now.

Extensions That I use on Internet Explorer
Even though lot of people have to use Internet Explorer for development. Very small percentage of them know about the tools available for Internet Explorer. Lack of these tools had forced me to switch to Firefox(otherwise i would have never known about beauties of firefox.), but now that i know about these tools i use them every time i have to fix an issue in IE. It has made my life very easier.

1. IE Developer Toolbar
This is a combination of firebug+web developer toolbar+colorzilla and measure it, but for Internet Explorer. Though It does not provides all the features of firebug, still something is better then nothing. I liked the way you can add ruler with this plugin. Get IE Developer Toolbar now.
Designers on Design
2. Buttons for Internet Explorer

Well I need easy access to Delicious on every browser. Download it from Delicious website.
3. DebugBar
Premium Designer Hard Crystal Snap-on Case for Apple iPod Touch 2, Touch 3, 3rd Generation 8GB, 32GB, 64GB - Cool Black Rainbow Peace Print
I use it because it provides ability to grab screen shot’s of the website and color picker in a easy access way via toolbar on top. Get the DebugBar.
4. Nikhil’s Web Development Helper
It provides ability to capture all the http request, ability for javascript debugging.
HOT Geneva Black Ceramic Silicone Fashion Watch with Crystal Accents ~ As Seen on The Blind Side Movie
Get Nikhil’s web development helper.
Well these are all the tools that help me in my web development activity. Am I missing some tools? please help me find them.