【經驗分享】F.doPostBack的說明文檔

FineUIPro/Mvc/Core的下個版本（v6.1.0），我們對客戶端JS函數 F.doPostBack 進行了增強，並增加說明文檔。

 

 

 

如果你還沒有查閱過FineUI的客戶端文檔，可以收藏下這個在線鏈接：https://fineui.com/js/api/

 

F.doPostBack用於自定義回發，一般用於FineUIMvc/Core/JS版本，而WebForms版本是不適用的：

• FineUIPro：請使用 __doPostBack 函數回發，參考示例：https://pro.fineui.com/#/other/custom_postback.aspx
• FineUIMvc/Core/JS：可以使用 F.doPostBack 自定義回發，參考示例：https://core.fineui.com/#/Other/CustomPostback

 

F.doPostBack有兩種調用形式，推薦的函數定義如下所示：

F.doPostBack(url, fields, params)

其中三個參數的意義：

• url：發送請求的地址
• fields：【可選】發送到服務器的表單字段數據，以逗號分隔多個表單字段（如果是容器，則查找容器內的所有表單字段）
• params：【可選】發送到服務器的數據

一個典型的示例：

F.doPostBack('/Other/FormAjaxComplete/onForm1Submit', 'Form1', {
    key1: 'value1',
    key2: {
        'sub1': 'sub-value1',
        'sub2': 'sub-value2'
    }
});

在這個例子中：

1. 請求會被回發到：/Other/FormAjaxComplete/onForm1Submit
2. 發送請求時，FineUI會查找名為Form1控件下所有的表單字段，並將這些表單字段的值放在請求正文中
3. 除了Form1容器內的表單數據，還會把 key1, key2 的值放到請求正文中回發到服務器

 

 

完整的 F.doPostBack 函數定義：

F.doPostBack(options)

這里的 options 可以對請求進行一個細微的控制，但是並不常用，具體的參數列表可以看下在線文檔。

再來看下一個示例：

F.doPostBack({
    url: '/Other/FormAjaxComplete/onForm1Submit',
    fields: 'Form1',
    params: {
        key1: 'value1',
        key2: {
            'sub1': 'sub-value1',
            'sub2': 'sub-value2'
        }
    }
});

這個示例實現的功能和前面的代碼其實是一模一樣的。

 

但是在這種調用形式下，我們可以加入更多的控制，比如在AJAX結束后執行一個回調。

下面這個官網示例正好作為演示：https://core.fineui.com/#/Other/FormAjaxComplete

// 自定義回發，設置完成時回調complete
F.doPostBack({
    url: '@Url.Action("onForm1Submit")',
    fields: 'Form1',
    // 不顯示頁面加載動畫
    enableAjaxLoading: false,
    complete: function (data) {
        // AJAX回發結束時隱藏面板加載動畫
        form1.hideLoading();
    }
});

 

官網示例已更新：

• FineUIPro：https://pro.fineui.com/
• FineUIMvc：https://mvc.fineui.com/
• FineUICore：https://core.fineui.com/
• FineUICore （Razor Pages & Tag Helpers）：https://pages.fineui.com/
• F.js：https://js.fineui.com/

 

 

延伸閱讀

【經驗分享】F.doPostBack處理JSON數據！

 

 

現在加入【三石和他的朋友們】星球，下載FineUIPro/Mvc/Core（基礎版）：https://fineui.com/fans/