【经验分享】F.doPostBack处理JSON数据!

前言

之所以有今天这篇文章,是因为知识星球内一个网友的提问触动了我:https://t.zsxq.com/mY3F6qV

 

【经验分享】F.doPostBack处理JSON数据!_第1张图片

 

这句话说得有理有据,让我不得不思考怎么实现这个功能:

如果用 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

页面上定义两个文本输入框:


	
		
	



 

在第一个文本输入框获取焦点时,点击 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 请求的返回值:

【经验分享】F.doPostBack处理JSON数据!_第2张图片

很明显,这里的返回值的一段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/

你可能感兴趣的:(【经验分享】F.doPostBack处理JSON数据!)