Post to another page site works, but shows a blank page in the process_问答_开发者

Post to another page site works, but shows a blank page in the process

开发者 https://www.devze.com 2023-01-20 22:08 出处：网络

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

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></hea开发者_高级运维d>");

        //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:

function submitform()
{
    document.forms["paypal"].submit();
}

So now all you have to do is call this "submitform()" function from the body tag of the page like the following:

<body onload="submitform()">

So here is what the whole thing looks like.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body onload="submitform()">
    <div style="text-align: center;">
        <h1>
            Redirecting to PayPal</h1>
        <img src="http://www2.lionair.co.id/assets/imgs/ajax-loader.gif" />
    </div>
    <form id="form1" runat="server">
        <!--This is where you write out the paypal form data - use a repeater or create a custom control-->
    </form>
    <script type="text/javascript">
function submitform()
{
    document.forms["paypal"].submit();
}
    </script>
</body>
</html>

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!