I am posting values to from an ASP.NET website to a completely different site (Paypal actually). I accomplish this by returning a page to the user that has all the hidden form inputs written and then a Javascript function that automatically submits the form.
The process is supposed to be seamless, but the blank page is noticeable for the couple seconds it shows up. Users are just supposed to click the button on the ASP.NET page, then be redirected to Paypal. But I inject this blank page in the middle to post the variables in the middle (variables like billing info, order items, etc). The blank page is too noticable and am hoping for either a better way of doing this or suggestions on making the process seem more seamless.
Here is the method I am using:
public static void PostToRemote(string url, Dictionary<string, string> inputs)
{
if (String.IsNullOrEmpty(url))
return;
HttpContext context = HttpContext.Current;
//CREATE UNIQUE FORM NAME
string formName = "remoteform1";
//ERASE ENTIRE RENDER OF CURRENT PAGE
context.Response.Clear();
//OUTPUT SINGLE FORM TO POST DATA
context.Response.Write("<html><head></head>");
//ON LOAD, PAGE WILL POST FORM TO NEW URL
context.Response.Write(String.Format("<body onload=\"document.{0}.submit()\">", formName));
context.Response.Write(String.Format("<form name=\"{0}\" method=\"{1}\" action=\"{2}\" >", formName, "post", url));
//ADD PARAMETERS TO PAGE TO POST
foreach (var item in inputs)
{
context.Response.Write(String.Format("<input name=\"{0}\" type=\"hidden\" value=\"{1}\">", item.Key, item.Value));
}
context.Response.Write("</form>");
context.Response.Write("</body></html>");
context.Response.End();
}
Any suggestions in making this more seamless or more enjoyable to the user? Thanks!
What you can do is instead of writing the paypal form to the response stream, create a separate asp.net page and within that page write the paypal form info out with a asp.net repeater or similar control. Give the form that was written a name so that you can access it via javascript – for the purposes of this example well assume you named the form “paypal” (id=”paypal”). See below:
Next put an image tag with an animated gif, some sort of progress spinner. Ok so now here is the important part: add a small javacript function to the page that will be responsible for posting the paypal form to the paypal server. See the following for an example:
So now all you have to do is call this “submitform()” function from the body tag of the page like the following:
So here is what the whole thing looks like.
When you run this page the first thing that loads is the spinner image then the javascript posts the values to paypal giving you the effect your looking for.
Hope this was helpful.
Enjoy!