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

前言

之所以有今天這篇文章，是因為知識星球內一個網友的提問觸動了我：https://t.zsxq.com/mY3F6qV

 

 

這句話說得有理有據，讓我不得不思考怎么實現這個功能：

如果用 jQuery.ajax 還需要對 F.doPostBack之前已有的功能還要再做一遍，如 Loading，Form 與 Grid 等數據的收集等操作

 

是增加一個參數呢？還是利用現有功能？

后來發現目前的 F.doPostBack 就支持這個功能，只不過需要一個小小的技巧。

 

=======================

 

 

F.doPostBack用於自定義回發，在FineUIMvc/Core/JS中多有采用，之前我曾經寫過一篇文章詳細介紹：https://www.cnblogs.com/sanshi/p/11995203.html

 

F.doPostBack交互詳解

下面來看下官網示例的用法：https://pages.fineui.com/#/Other/CustomPostback

頁面上定義兩個文本輸入框：

<f:TextBox ID="TextBox1" ShowLabel="false" EmptyText="輸入一些文字並按 ENTER 鍵">
	<Listeners>
		<f:Listener Event="enter" Handler="onTextBoxEnter" />
	</Listeners>
</f:TextBox>
<f:TextBox ID="TextBox2" ShowLabel="false">
</f:TextBox>

 

在第一個文本輸入框獲取焦點時，點擊 ENTER 鍵，會發起一個自定義回發（由F.doPostBack觸發）：

function onTextBoxEnter() {
	// 觸發后台事件
	F.doPostBack('@Url.Handler("TextBox1_ENTER")', {
		text1: this.getValue()
	});
}

　　

在后台C#處理函數 TextBox1_ENTER 中：

public IActionResult OnPostTextBox1_ENTER(string text1)
{
	var textBox2 = UIHelper.TextBox("TextBox2");

	textBox2.Text(text1);
	textBox2.Focus(true);

	return UIHelper.Result();
}

這里做了 3 件事情：

1. 將第二個文本框的值設置為和第一個文本框一模一樣
2. 讓第二個文本框獲取焦點
3. 返回 UIHelper.Result()

 

而 UIHelper.Result() 就是 FineUICore 施展魔法的地方，FineUICore會將前面的 C# 調用轉換為客戶端的 JS 調用，看下 HTTP 請求的返回值：

很明顯，這里的返回值的一段JavaScript代碼：

F.ui.TextBox2.setValue('FineUICore');
F.ui.TextBox2.focus(true);

　　

那么問題就來了，能不能用 F.doPostBack 返回 JSON 數據呢？

答案是肯定的！

 

F.doPostBack處理JSON數據

還是上面這個例子，頁面標簽是一模一樣的，只是在自定義回發的腳本有了大的變化：

function onTextBoxEnter() {
	var me = this;

	// 觸發后台事件
	F.doPostBack({
		url: '@Url.Handler("TextBox1_ENTER")',
		params: {
			text1: me.getValue()
		},
		complete: function (data) {
			var json = JSON.parse(data);

			F.ui.TextBox2.setValue(json.text);
			F.ui.TextBox2.focus();

			// 阻止FineUI將返回的內容當做腳本解析
			return false;
		}
	});

}

通過將一個JS對象傳入 F.doPostBack 來定義回發，注意這里用到的 3 個參數：

1. url：本次AJAX請求（POST）提交的網址
2. params：請求時附帶的參數
3. complete：請求結束時的回調函數　

需要特別注意的是 complete 最后的 return false; 語句，這句話很關鍵，用來阻止FineUI將返回的內容當做腳本解析！

也就是說我們需要自行解析返回的字符串數據data：

var json = JSON.parse(data);

F.ui.TextBox2.setValue(json.text);
F.ui.TextBox2.focus();

 

最后，來看下對應的后台返回JSON字符串的方法：

public IActionResult OnPostTextBox1_ENTER(string text1)
{
	return new JsonResult(new { type = "enter", text = text1 + " - server" });
}

　　

是不是很簡單！

 

小結

由此可見，F.doPostBack處理JSON數據的關鍵是在回調函數中返回false，類似如下的代碼結構：

F.doPostBack({
	url: '...',
	params: {
		text1: '....'
	},
	complete: function (data) {
		var json = JSON.parse(data);

		// 處理JSON對象

		// 阻止FineUI將返回的內容當做腳本解析
		return false;
	}
});

　　

 

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