ASP.NET-FineUI开发实践-11

简介: 我用实例项目写了个子父页面传值,算是比较灵活的写法,可以把js提取出来写成包,然后调用,我先一步一步写,为有困难的朋友打个样。 先画个页面: 上面是个查询用的表单,底下是表格,内存分页,用到了VBox布局注意BoxFlex属性的应用,页面还有一个window页面。

我用实例项目写了个子父页面传值,算是比较灵活的写法,可以把js提取出来写成包,然后调用,我先一步一步写,为有困难的朋友打个样。

先画个页面:
上面是个查询用的表单,底下是表格,内存分页,用到了VBox布局注意BoxFlex属性的应用,页面还有一个window页面。我会把源码放出来。
1.先看查询
姓名的查询按钮会弹出一个window,打开window前后台都差不多,我用了前台,这个样子滴
<f:TriggerBox runat="server" Label="姓名" AutoPostBack="false" TriggerIcon="Search"
   OnClientTriggerClick="ShowWindow()" ID="TriggerBox1" EnablePostBack="False">
</f:TriggerBox>

 

1 //显示window
2         function ShowWindow() {
3             F('<% =Window1.ClientID %>').f_show('./selectgrid.aspx', '选择', 800, 500);
4         }

第一个参数是url,第二个是标题,然后是宽和高。js比回发快不多说。

选择window下有按钮三个:确定,确定并查询,取消在最底下,注意grid 的EnableMultiSelect 属性,三按钮都是前台写的,没有触发后台,可能是写的简单,但也感觉挺灵活的。
贴出来注意多看一眼注释,确认和确认并查询的方法,其实就是多个回发,但回发要在上层执行,方法写在后台我感觉乱,转不过来,所以都搬前台来了,一步一步写,所以灵活,我可以中间干点别的。
        function select(select_back) {
            //得到选择的行
            var rows = F('<% =Grid1.ClientID  %>').f_getSelectedRows();
            //选择项
            var provinceName;
            //注意each的使用
            Ext.Array.each(rows, function (rowIndex, index) {
                //得到选择的行数据和列数据
                var rec = F('<% =Grid1.ClientID  %>').store.getAt(rowIndex);
                provinceName = rec.get('Name');
            });
            //核心:得到当前的window
            var activeWindow = F.wnd.getActiveWindow();
            //核心:执行上层的js
            activeWindow.window.selectProvince(provinceName, select_back);
            //核心:隐藏该window
            activeWindow.f_hide();
        }

执行了上层的selectProvince方法,再把selectProvince方法贴出来,上层就是window_grid页面

        function selectProvince(name, select_back) {
            //给控件赋值
            F('<% =TriggerBox1.ClientID %>').setValue(name);
            //是否回发
            if (select_back) {
                //回发事件
                F.customEvent('SelectGrid');
            }
        }

 


其实有了customEvent方法 爱怎么回发怎么回发,后台方法就是通过姓名查询数据,没啥好写的。
这个例子主要是打开window,打开的window通过执行上层的js回发至后台灵活执行方法。
2.修改
也是打开个window,这里得到了一个选择行的Id,当做参数传过去了,后来发现这个没用到,反正我没用到,注意 rec.get(方法 参数是ColumnID
        function Grid_Edit() {
            var rows = F('<% =Grid1.ClientID  %>').f_getSelectedRows();
            var id;
            Ext.Array.each(rows, function (rowIndex, index) {
                var rec = F('<% =Grid1.ClientID  %>').store.getAt(rowIndex);
                id = rec.get('ItemId');
            });
            F('<% =Window1.ClientID %>').f_show('./gridedit.aspx?id=' + id, '修改', 500, 300);
        }

 加载数据也是js写的,Bindedit方法上下也用到了。

        F.ready(function () {
            Bindedit();
        });
        function Bindedit(Position) {
            var activeWindow = F.wnd.getActiveWindow();
            var id = activeWindow.window.GetSelectID(Position);
            F.customEvent('Bindedit_' + id);
        }

 用到了上层的GetSelectID方法,参数是上还是下。

        function GetSelectID(Position) {
            var grid = F('<% =Grid1.ClientID  %>');
            var selectedValues = [];
            var rows = grid.f_getSelectedRows(), id;
            Ext.Array.each(rows, function (rowIndex, index) {
                //上机制,到0了就上不去了
                if (Position == "top" && rowIndex != 0) {
                    rowIndex = rowIndex - 1;
                }
                //到最后也上不去了
                if (Position == "next" && rowIndex != grid.f_getPaging().f_pageSize - 1 && rowIndex != grid.getStore().getCount()) {
                    rowIndex = rowIndex + 1;
                }
                //想写翻页着,不好写
                if (rowIndex == grid.f_getPaging().f_pageSize - 1) {
                    //F.customEvent('rowIndex_Next_');
                }
                //新方法:选择当前行
                selectedValues.push(rowIndex);
                grid.f_selectRows(selectedValues);
                //得到行对应列的数据
                var rec = grid.store.getAt(rowIndex);
                id = rec.get('ItemId');
            });
            return id;
        }

 

还有一个方法是GetWindow,我以前写过,看看代码吧。晚了睡觉。
这个JS写的有点肿,可以直接后台调用,可以参见 ASP.NET-FineUI开发实践-17对传值进行了优化
发个图:
 
下载地址: CSDN 0 分  备用地址
目录
相关文章
|
15天前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
|
17天前
|
开发框架 .NET C#
VSCode开发.net项目时调试无效
【9月更文挑战第22天】在使用 VSCode 开发 .NET 项目时遇到调试问题,可从项目配置、调试配置、调试器安装、运行环境、日志和错误信息等方面排查。确认项目类型及文件配置,检查 `launch.json` 文件及配置项,确保调试器扩展已安装并启用,验证 .NET 运行时版本和环境变量,查看 VSCode 输出窗口和项目日志文件,检查权限及代码错误。若问题仍未解决,可查阅官方文档或社区论坛。
|
22天前
|
人工智能 前端开发 开发工具
解读.NET 技术的开发潜力
本文全面介绍了.NET技术在软件开发领域的核心优势、创新应用及面临的挑战。.NET以其统一的开发平台、强大的工具和跨平台能力,成为企业级应用、Web应用乃至游戏开发的理想选择。然而,在性能优化、容器化及AI集成等方面仍需不断突破。通过积极拥抱开源和社区驱动模式,.NET将持续推动软件开发的进步。
40 1
|
1月前
|
存储 运维
.NET开发必备技巧:使用Visual Studio分析.NET Dump,快速查找程序内存泄漏问题!
.NET开发必备技巧:使用Visual Studio分析.NET Dump,快速查找程序内存泄漏问题!
|
1月前
|
SQL 关系型数据库 数据库
七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
七天.NET 8操作SQLite入门到实战详细教程(选型、开发、发布、部署)
|
1月前
|
消息中间件 开发框架 前端开发
YuebonCore:基于.NET8开源、免费的权限管理及快速开发框架
YuebonCore:基于.NET8开源、免费的权限管理及快速开发框架
|
1月前
|
开发框架 JavaScript 前端开发
|
2月前
|
C# Windows 开发者
超越选择焦虑:深入解析WinForms、WPF与UWP——谁才是打造顶级.NET桌面应用的终极利器?从开发效率到视觉享受,全面解读三大框架优劣,助你精准匹配项目需求,构建完美桌面应用生态系统
【8月更文挑战第31天】.NET框架为开发者提供了多种桌面应用开发选项,包括WinForms、WPF和UWP。WinForms简单易用,适合快速开发基本应用;WPF提供强大的UI设计工具和丰富的视觉体验,支持XAML,易于实现复杂布局;UWP专为Windows 10设计,支持多设备,充分利用现代硬件特性。本文通过示例代码详细介绍这三种框架的特点,帮助读者根据项目需求做出明智选择。以下是各框架的简单示例代码,便于理解其基本用法。
79 0
|
2月前
|
Java Spring UED
Spring框架的异常处理秘籍:打造不败之身的应用!
【8月更文挑战第31天】在软件开发中,异常处理对应用的稳定性和健壮性至关重要。Spring框架提供了一套完善的异常处理机制,包括使用`@ExceptionHandler`注解和配置`@ControllerAdvice`。本文将详细介绍这两种方式,并通过示例代码展示其具体应用。`@ExceptionHandler`可用于控制器类中的方法,处理特定异常;而`@ControllerAdvice`则允许定义全局异常处理器,捕获多个控制器中的异常。
39 0
|
2月前
|
开发者 Apache 程序员
揭秘Apache Wicket:页面生命周期背后的神秘力量!
【8月更文挑战第31天】李工是一位热爱Web开发的程序员,近日在技术博客上分享了他对Apache Wicket框架的学习心得,特别是页面生命周期的理解。他认为掌握Wicket页面生命周期对于开发富交互式Web应用至关重要。他通过一个简单的计数器应用示例,详细解释了Wicket的组件化设计理念以及页面和组件在生命周期中的变化。
32 0

相关实验场景

更多