Trick – Form Submit 仿 Ajax 送出表單

利用Ajax 送出表單比起傳統的Postback 方法，優點在於能不在刷新畫面下，就把資料送出至後端，雖然Postback能簡單快速應用，但是送出若是錯誤時，有些時候不方便恢復原來的輸入狀態，修正重送

模擬畫面如下：

於是，讓Postback 仿Ajax 方法技巧，作法如下：

我們在頁面上加上隱藏的iframe，讓postback目標指向這裡

HTML

<iframe name="result" style="display:none;"></iframe>
<form target="result" action="/home/index">
    <span>填寫數值：</span>
    <input type="text" name="number" />
</form>
<script>
    var fun = {
        showMsg: function (msg) {
            alert(msg);
        }
    }
</script>

C#

public ActionResult Index(string number = "")
{
    int num = 0;
    if (number != "" && int.TryParse(number, out num) == false)
    {
        return Content("<script>parent.fun.showMsg('請填寫整數');</script>", "text/html", System.Text.Encoding.UTF8);
    }
    /// 正確參數，往下執行
    return View();
}

改善作法後，postback也能有不刷新頁面的效果