FineUIMvc随笔(4)自定义回发参数与自定义回发

声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版。

不能忘却的回发

在上一篇文章中,我们对FineUIMvc中的回发进行了详细描述,目的是为了告诉大家:

1. FineUIMvc中的回发其实是请求控制器方法的另一种表述而已

2. 回发是轻量级,只会传入你允许传入的参数

3. 回发是AJAX过程

4. 可以通过控件ID来快捷的附加相关参数

但是,上一篇文章没有讲解如何在回发中自行附加需要的参数,这个参数来源可以是:

1. 静态字符串

2. JavaScript变量或者函数返回值

自定义回发参数

为了更好的讲述问题,我们来看一个具体的示例:http://fineui.com/demo_mvc#/demo_mvc/Form/CheckBoxListUpdate

在这个例子中,点击[获取列表一的选中项]按钮时,会向后台传递两个参数:

1. 静态字符串:"列表一"

2. 列表一的选中项,通过自定义JavaScript函数返回

回发参数:静态字符串

首先来看下按钮的定义:

F.Button()
    .ID("btnCheckedItemsList1")
    .Text("获取列表一的选中项")
    .OnClick(Url.Action("btnCheckedItemsList_Click"),
        new Parameter("name", "列表一", ParameterMode.String),
        new Parameter("selected", "getCheckBoxListSelected(‘CheckBoxList1‘)"))

从VS的智能提示我们可以看到 OnClick 方法的一个重载定义:

可以看到第二个参数,是不定长可变参数数组(params Parameter[]),我们可以传入多个 Parameter 示例。

Parameter的构造函数中,第三个参数 ParameterMode 指定了参数类型,可以是字符串(String)或者脚本(Script)。由于默认是脚本,所以这里的静态字符串参数需要指定第三个参数为ParameterMode.String。

观察下本次HTTP的请求正文:

回发参数:JavaScript变量或者函数返回值

上面OnClick方法还指定了第二个请求参数:

new Parameter("selected", "getCheckBoxListSelected(‘CheckBoxList1‘)")

注意,由于默认ParameterMode类型是脚本,所以无需传入第三个参数,这里的 getCheckBoxListSelected 是页面上自定义的一个 JavaScript 函数:

<script>
    function getCheckBoxListSelected(cbxListID) {
        return F.ui[cbxListID].getValue();
    }
</script>

为了更仔细的对比 ParameterMode 的区别,我们来看下页面生成的HTML源代码,可以发现如下:

new F.Button({
    id: ‘btnCheckedItemsList1‘,
    text: ‘获取列表一的选中项‘,
    handler: function () {
        F.doPostBack({
            url: ‘/Form/CheckBoxListUpdate/btnCheckedItemsList_Click‘,
            disableControl: ‘btnCheckedItemsList1‘,
            params: {
                name: ‘列表一‘,
                selected: getCheckBoxListSelected(‘CheckBoxList1‘)
            }
        });
    }
});

注意:name 参数对应的是一个字符串,而 selected 参数对应的则是对一个 JavaScript 函数的调用。

自定义回发

有时我们需要在回发前进行逻辑控制,单纯的自定义回发参数就满足不了需要。类似的情况还有,多个控件的事件调用同一个控制器方法,如果每个事件都自定义参数的话会有很多重复代码,这时就需要在一个地方自定义回发了。

举例说明:http://fineui.com/demo_mvc#/demo_mvc/Grid/CheckAll

点击按钮[选中了哪些行(自定义回发)]时,我们需要首先判断表格是否有选中行,如果没有选中行的话,就给出一个提示框而不进行回发:

这个逻辑单独靠按钮的 OnClick 扩展方法和自定义回发参数就不行了。我们需要注册按钮的客户端 click 事件:

@(F.Button()
    .Text("选中了哪些行(自定义回发)")
    .ID("Button3")
    .Listener("click", "onButton3Click")
)

然后在自定义函数 onButton3Click 中,进行表格是否选中的逻辑判断,最后才在真正的回发:

<script>
    function getGridSelectedRows() {
        var result = [], grid = F.ui.Grid1;

        $.each(grid.getSelectedRows(true), function (index, item) {
            var itemArr = [];
            itemArr.push(item.id);
            itemArr.push(item.text);
            itemArr.push(item.values.Gender);
            itemArr.push(item.values.Major);

            result.push(itemArr);
        });

        return result;
    }

    function onButton3Click(event) {
        var grid = F.ui.Grid1;
        if (!grid.hasSelection()) {
            F.alert(‘没有选中项!‘);
            return;
        }

        // 触发后台事件
        F.doPostBack(‘@Url.Action("Button1_Click")‘, {
            ‘selected‘: getGridSelectedRows()
        });
    }
</script>

通过如下代码对表格是否存在选中项进行逻辑判断:

if (!grid.hasSelection()) {
    F.alert(‘没有选中项!‘);
    return;
}

自定义回发:

F.doPostBack(‘@Url.Action("Button1_Click")‘, {
    ‘selected‘: getGridSelectedRows()
});

第一个参数是控制器方法对应的URL,第二个参数是需要传入控制器方法的参数。这个 JavaScript 和按钮的 OnClick 扩展方法比较类似。

最终的显示效果:

小结

FineUIMvc对回发参数提供了三个级别的控制,适用于各种不同的场景。

传入控件ID适合于常见的大粒度控制,比如传入表单字段参数,表格分页排序参数。

自定义回发参数提供了细粒度的控制,可以任意传入静态字符串,或者经过JavaScript函数执行的返回值。

自定义回发不仅可以指定任何回发参数,还方便进行回发前的逻辑控制。

《FineUIMvc随笔》目录:http://www.cnblogs.com/sanshi/p/6473592.html

时间: 2024-10-14 16:59:55

FineUIMvc随笔(4)自定义回发参数与自定义回发的相关文章

微信公众平台自定义菜单新增扫一扫、发图片、发位置 LBS运作更便捷

今天微信公众平台发布更新,自定义菜单新增扫一扫.发图片.发送位置等功能,这对于有意挖掘微信LBS服务的运营者来说更便捷了,订阅号不用返回微信界面就能扫图.发送图片.调用地理位置,用户体验更友好,自然也提高了黏度,对涨粉也好一些.详细能力如下: 公众号自定义菜单新增扫一扫.发图片.发位置功能 1. 扫码推送事件 用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后显示扫描结果(如果是URL,将进入URL),且会将扫码的结果传给开发者,开发者可以下发消息. 2. 扫码推送事件,且弹出“消息接收

EXTJS下拉树ComboBoxTree参数提交及回显方法

http://blog.csdn.net/wjlht/article/details/6085245 使用extjs可以构造出下拉数,但是不方便向form提交参数,在此,笔者想到一个办法,很方便ComboBoxTree向form提交. 原理: 在form中增加一个隐藏的字段,当在comboBoxTree中选定值后自动在隐藏字段中赋值. 为实现此方法,需要重载comboBoxTree中collapse事件方法. Ext.ux.ComboBoxTree = function(){    this.t

Android开发 AIDL使用自定义对象作参数或返回值

http://www.pocketdigi.com/20121129/952.html 默认,AIDL支持对象作参数,但需要该对象实现Parcelable接口,且aidl文件应该是该类在同一包下,需要单独给该类定义一个aidl文件.定义模型类:EnglishItem.java: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

VS自定义项目模板:[8]自定义模板参数

如何在模板中定义和使用自定义模板参数? 1 CustomParameters元素的父元素是TemplateContent 下面定义一个模板参数$Para1$,值为MyObj. ps:CustomParameters元素定义在Project上方时,编译器会有一个警告,但不影响模板项目生成. 2 将源文件Class1.cs文件生成为目标项目的MyObj.cs文件 修改模板文件中的TargetFileName,模板项目文件中的包含文件以及Class1.cs的类名为自定义模板参数$Para1$ 3 重新

接收请求参数及数据回显

接收请求参数及数据回显 接收一个参数 //http://localhost:8080/r/user/t1?username=julia @GetMapping("/user/t1") public String test1(@RequestParam("username") String name, Model model) { return "test"; } 接受一个对象 //http://localhost:8080/r/user/t2?i

自定义View 篇一--------《自定义View流程分析》

本文部分内容参考自掘金网:点击打开链接 坐标图解: 概述 Android已经为我们提供了大量的View供我们使用,但是可能有时候这些组件不能满足我们的需求,这时候就需要自定义控件了.自定义控件对于初学者总是感觉是一种复杂的技术.因为里面涉及到的知识点会比较多.但是任何复杂的技术后面都是一点点简单知识的积累.通过对自定义控件的学习去可以更深入的掌握android的相关知识点,所以学习android自定义控件是很有必要的.所以,今天写的是怎么去自定义一个控件.而不是里面涉及到的细化知识点.一个东西我

超酷的计步器APP——炫酷功能实现,自定义水波纹特效、自定义炫酷开始按钮、属性动画的综合体验

超酷的计步器APP--炫酷功能实现,自定义水波纹特效.自定义炫酷开始按钮.属性动画的综合体验 好久没写博客了,没给大家分享技术了,真是有些惭愧.这段时间我在找工作,今年Android的行情也不怎么好,再加上我又是一个应届生,所以呢,更是不好找了.但是我没有放弃,经过自己的不懈努力,还是找到了自己喜欢的Android工作,心里的一块石头终于落下了.但是迎接我来的是更多的挑战,我喜欢那种不断的挑战自我,在困难中让自己变得更强大的感觉.相信阳光总在风雨后,因为每一个你不满意的现在,都有一个你没有努力的

自定义View(一),初识自定义View

看了无数资料,总结一下自定义View 先明白一个自定义View的三大流程 onMeasure() 测量,决定View的大小 onLayout() 布局,决定View在ViewGroup中的位置 onDraw() 绘制,画出这个View的内容 这三个方法都存在于View类中,我们自定义View需要针对这三个方法做出修改来达到我们需要的目标或功能 先来一个最基本的例子,我们单纯的画一个圆,我们只需修改onDraw()方法即可 MyCustomVew.java public class MyCusto

DRF认证、自定义认证和权限、自定义权限

源码分析 """ 1)APIView的dispath(self, request, *args, **kwargs) 2)dispath方法内 self.initial(request, *args, **kwargs) 进入三大认证 # 认证组件:校验用户 - 游客.合法用户.非法用户 # 游客:代表校验通过,直接进入下一步校验(权限校验) # 合法用户:代表校验通过,将用户存储在request.user中,再进入下一步校验(权限校验) # 非法用户:代表校验失败,抛出异常