การทำ URL Redirect ด้วย HTML
การทำ Redirect พร้อม POST ด้วย JavaScript
ให้ ASP.NET โหลดข้อมูลก่อนทำการ POST
ให้ ASP.NET ตรวจสอบบางอย่างก่อนเลือก POST หรือ Redirect

1.การทำ URL Redirect ด้วย HTML

เมื่อเปิดมาจะแสดงข้อความ “คุณกำลังไปที่หน้าหลัก phaisarn.com” ประมาณ 5 วินาที แล้วจะทำการ redirect

<!DOCTYPE html>
<html>

<head>
    <meta HTTP-EQUIV="Refresh" CONTENT="5;URL=https://phaisarn.com">
    <title>Phaisarn</title>
</head>

<body>
    คุณกำลังไปที่หน้าหลัก <a href="https://phaisarn.com/">phaisarn.com/</a>
</body>

</html>

2.การทำ Redirect พร้อม POST ด้วย JavaScript

How to redirect through ‘POST’ method using Javascript?

ใช้ JavaScript สร้าง form ขึ้นมา กำหนดค่าต่างๆให้ form (เมธอด POST, url ที่ต้องการส่งข้อมูลไป, ข้อมูลที่จะส่งไป)
แล้วนำ form ไปใส่ไว้ใน body
จากนั้นสั่งให้ form ทำการ submit

<!DOCTYPE html>
<html>

<head>
    <script>
        function redirectPost(url, data) {
            var form = document.createElement('form');
            document.body.appendChild(form);
            form.method = 'post';
            form.action = url;
            for (var name in data) {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = name;
                input.value = data[name];
                form.appendChild(input);
            }
            form.submit();
        }
    </script>
</head>

<body>
    <p>Press button to POST and redirect</p>
    <button type="button" onclick="redirectPost('http://www.example.com', { text: 'text\n\ntext' });">Try it</button>
</body>

</html>

เรียกไฟล์ HTML ขึ้นมา แล้วกดปุ่ม จะทำการเรียกเมธอด redirectPost(url, data) เพื่อทำการ POST และ redirect ไปที่ url

ถ้าต้องการให้ form ทำการ redirect ทันทีที่เปิดขึ้นมา แก้ภายใน tag body ดังนี้

<body onload="redirectPost('http://www.example.com', { text: 'text\n\ntext' });">
</body>

3.ให้ ASP.NET โหลดข้อมูลก่อนทำการ POST

ใช้ ASP.NET (C#) ทำการโหลดข้อมูลบางอย่างก่อน เพื่อนำข้อมูลนี้ส่ง POST ไปด้วย ให้ทำการโหลดข้อมูลในเมธอด Page_Load เมื่อทำงานเมธอดนี้เสร็จ ถึงจะทำการเรียกใช้ JavaScript ต่อไป ดังนั้นเราจะสามารถโหลดข้อมูลและส่งไปพร้อมกับ POST ได้

สร้างฟอร์มสำหรับใช้ POST โดยมี TextBox ชื่อ username และ somedata

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script>
        function redirectPost2(url) {
            var form = document.getElementById('myform');
            form.method = 'post';
            form.action = url;
            form.submit();
        }
    </script>
</head>

<body onload="redirectPost2('http://localhost:58480/api/Values');">
    <form id="myform" name="myform" method='POST'
        style="display: none" runat="server">
        <asp:TextBox ID="username" Text="" runat="server"></asp:TextBox>
        <asp:TextBox ID="somedata" Text="" runat="server"></asp:TextBox>
    </form>
</body>
</html>

ทำการกำหนดค่าให้ username และโหลดข้อมูลมาใส่ somedata

using System;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            username.Text = "phaisarn";
            somedata.Text = "LOAD SOMETHING FROM DATABASE or ...";
        }
    }
}

โดย Page_Load ใน code behind จะทำงานจนเสร็จก่อนจึงจะเรียก <body onload>

สร้างอีกโปรเจ็กส์ แบบ WebApi มาทดสอบรอรับการ POST

ไฟล์ ValuesController.cs

เพิ่มคลาส UploadData ซึ่งมีสมาชิกเป็น username และ somedata
เมธอด Post กำหนดให้รับค่าเป็นชนิด UploadData

using System.Collections.Generic;
using System.Web.Http;

namespace WebApi1.Controllers
{
    public class UploadData
    {
        public string username { get; set; }
        public string somedata { get; set; }
    }

    public class ValuesController : ApiController
    {
        // GET api/values
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }

        // GET api/values/5
        public string Get(int id)
        {
            return "value";
        }

        // POST api/values
        public void Post([FromBody]UploadData uploadData)
        {
        }
    }
}

4.ให้ ASP.NET ตรวจสอบบางอย่างก่อนเลือก POST หรือ Redirect

Calling JavaScript Function From CodeBehind

WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script>
        function redirectPost3() {
            var form = document.getElementById('myform');
            form.method = 'post';
            form.action = 'http://localhost:58480/api/Values';
            form.submit();
        }
    </script>
</head>
<body>
    <form id="myform" name="myform" method='POST'
        style="display: none" runat="server">
        <asp:TextBox ID="username" Text="" runat="server"></asp:TextBox>
        <asp:TextBox ID="somedata" Text="" runat="server"></asp:TextBox>
    </form>
</body>
</html>

WebForm1.aspx.cs

using System;
using System.Web.UI;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (true)
            {
                username.Text = "phaisarn";
                somedata.Text = "LOAD SOMETHING FROM DATABASE or ...";

                ScriptManager.RegisterStartupScript(this, GetType(), "posttosomewhere", "redirectPost3()", true);
            }
            else {
                Response.Redirect("http://www.google.com");
            }
        }
    }
}

บรรทัดที่ 10 กำหนดเงื่อนไขบางอย่าง เพื่อเลือกเส้นทาง ถ้า true ก็ POST พร้อม Redirect แต่ถ้า false ก็ Redirect ไปที่ไหนซักที่ เช่นหน้าแจ้งเตือน