ASP.NET环境下全表格编辑控件的优化设计_邓涛.pdf

2023.7电脑编程技巧与维护1概述ASP.NET是由Microsoft创建的开放源代码Web框架，帮助使用.NET生成现代Web应用和服务1。其自带的GrieView控件用于在表中显示数据源的值，其中每列表示一个字段，每行表示一条记录。作为一个ASP.NET的原生控件，它自带的设计面板能为初学者提供方便的数据绑定功能。简单的拖动和设置可以轻松地编写简单的Web应用程序，很容易给初学者带来良好的学习体验，但也有其不足之处。（1）由于GrieView自带的样式老套、有限，其在前端的表现能力很难让用户满意。在前端UI已经很丰富、生动的当下，其前端难以简单套用成熟UI的样式。（2）单元格编辑过程中如果要使用组合框等控件，则每行都要使用模板字段将组合框所定义的下拉绑定数据带入浏览器，如果表格行数和列表选取内容较多，则后端将向前端输出较多的重复数据，并且只能使用简单的数据库值（显示值）类型的下拉组合框。（3）每次只能编辑、提交一条数据，其选择和编辑按钮不能从表格中分离，需每行都带出，这样的编辑体验很难让用户满意。并且其只读模板与编辑模板分离，在后端的设计过程中，开发人员很难控制前端的样式。（4）对于非SqlDataSource或ObjectlDataSource数据源（或未定义增、删、改方法的SqlDataSource或Ob-jectlDataSource数据源），不能根据表格列属性自动生成增、删、改的SQL语句，不能实现数据的自动保存。2优化方案设计方案针对以上不足，秉承GrieView原生控件自动生成列、自动进行数据保存的优势，以EasyUI前端UI为例，全新设计EasyGrid服务器控件，设计思路如图1所示。（1）控件继承于CompositeDataBoundControl，之所于没有直接继承GrieView，是因为前端只需要输出表头字段信息，由EasyUI渲染，具体的数据由easyui-data-grid参数url以Ajax的方式从服务器获取。（2）核心字段Columns类型为DataControlFieldCol-lection，这是GrieView中Columns的原生类型，之所于选择它，一方面可以大幅减少代码量；另一方面可以与GrieView中Columns的列匹配，方便原有表格升级。（3）核心字段DataKeyNames用于记录数据表的主键信息，自动保存数据时能根据主键信息执行this.Get-Data().Insert()、this.GetData().Delete()、this.GetData().Update()方法。（4）核心字段Parameters的类型为ParameterCollec-tion，配合DataKeyNames属性，自定义可更新字段，用于动态生成增、删、改的SQL语句，实现灵活多变的自动数据存储。（5）核心设计器EasyGridDesigner继承自DataBound-ControlDesigner，该设计器使用IDataSourceViewSchema2接口检查数据源的方法和属性。可以方便用户选择数据源、绑定SqlDataSource或ObjectlDataSource并自动生成列和Parameters参数。示例代码如下：private void AddKeysAndBoundFields(IData-SourceViewSchema schema)DataControlFieldCollection columns=(Easy-Grid)base.Component).Columns;columns.Clear();作者简介：邓涛（1971），男，高级实习指导教师，研究方向为ASP.NET桌面和网站开发。ASP.NET 环境下全表格编辑控件的优化设计邓涛（云南省玉溪工业财贸学校信息中心，云南 玉溪653103）摘要：对 ASP.NET 自带的控件 GrieView 进行了优化设计，通过简单的交互式操作和属性设置（或在前端编写 JS）就可以在 Web 应用程序中使用当下丰富、生动的前端用户界面（UI）样式来渲染表格，实现富组合框、全表格编辑。后端通过绑定 SqlDataSource 或 ObjectlDataSource 数据源控件实现自动生成列和自动进行数据存储。通过定义表格参数，还可以动态生成 SQL 语句，实现灵活多变的自动数据存储。关键词：ASP.NET 框架；Web 应用程序；富组合框；全表格编辑；自动数据存储图1设计思路自定义控件EasyGrid继承自CompositeDataBoundControl核心字段:Columns类型为DataControlFieldCollection核心字段:DataKeyNames核心字段:Parameters类型为ParameterCollection核心设计器:EasyGridDesigner继承自DataBoundControlDesigner核心方法:Render、ResolveAjaxCallBackMode、PerformRequestData、PerformUpdateBulidSqIView95DOI:10.16184/prg.2023.07.0512023.7电脑编程技巧与维护if(schema!=null)IDataSourceFieldSchema fields=schema.GetFields();（6）核心方法Render用于输出表头字段信息，主要定义表头字段名称、显示名称和EasyUI的重要属性data-options。示例代码如下：protected o verride void Render(HtmlTextWriterwriter)TableHeaderCell cell=new TableHeaderCell();cell.Text=field.HeaderText;cell.Attributes.Add(data-options,string.Format(field:0,field.DataField);row.Cells.Add(cell);（7）核心方法ResolveAjaxCallBackMode用于从A-jax参数中分析表格回调模式AjaxCallBackMode，首次加载时无参数，输出Render方法中定义的表头信息。参数EasyGridID用于判定是否由表格控件回调，参数oper确定回调模式、即查询（RequestData）、搜索（Search）或更新（Update）。（8）核心方法PerformRequestData用于查询数据并输出。示例代码如下：private void PerformRequestData()this.selectArguments=this.CreateDataSource-SelectArguments();this.GetData().Select(this.selectArgu-ments,new DataSourceViewSelectCallback(this.On-DataSourceViewSelectCallback);（9）核心方法PerformUpdate用于数据增、删、改后对数据库进行更新。以删除数据为例，代码如下：private void PerformUpdate()DataSourceView data=this.GetData();OrderedDictionary oldValues=new Ordered-Dictionary();if(base.IsBoundUsingDataSourceID)int deleteRowsCnt=0;JObject rows=JsonConvert.DeserializeOb-ject(HttpContext.Current.Request.Form rows);if(data.CanDelete)JArray deleted=rows.Value(deleted);foreach(JObject item in deleted)OrderedDictionary delekeyDictionary=new OrderedDictionary();foreach(string key in this.dataKeyNames)delekeyDictionary.Add(key,item.Val-ue(key);data.Delete(delekeyDictionary,oldVal-ues,new DataSourceViewOperationCallback(this.Han-dleUpdateCallback);deleteRowsCnt+;（10）核心方法BulidSqlView用于自动生成动态SQL语句。此方法基于Parameters和DataKeyNames字段信息自动生成参数化的查询语句，避免直接使用字符串拼接而造成的系统安全隐患。以删除数据为例，代码如下：if(sqlView.SupportSql)var Delete Fields=this.dataKeyNames.Select(key)=return +key+=+key;);sqlView.Delete=DELETE FROMdbo.+this.SourceTableName+WHERE +string.Join(,DeleteFields);foreach(Parameter par in this.Parameters.Cast().Where(par)=return this.dataKeyNames.Contains(par.Name);)sqlView.DeleteParameter.Add(new SqlParameter ParameterName=+par.Name,DbType=Pa-rameter.ConvertTypeCodeToDbType(par.Type),Size=par.Size);return sqlView;3控件的使用最新版EasyUI-DataGrid已支持全表格编辑并缓存用户增、删、改的所有记录。数据修改后，前端使用getChanges方法取得增、删、改的数据记录3，以Ajax962023.7电脑编程技巧与维护计与开发J.科技与创新,2022(8):17-19.11何丽,龚旺.jQuery在AJAX技术框架中页面加载的应用J.计算机时代,2011(8):25-26.12邓鑫,高亢,王春芳,等.CAP协议在我国预警信息发布系统中应用的研究C/中国气象学会.创新驱动发展 提高气象灾害防御能力S3第三届气象服务发展论坛公众,专业气象预报服务技术与应用.中国气象学会,2013.13崔磊,呂宸,白静玉,等.一种基于CAP的应急预警信息交互协议J.南京:中国高新科技,2020(20):110-111.方式提交到服务器，服务器依据表格数据源组件自带的方法（或动态生成的SQL语句）进行数据更新。使用EasyGrid控件时，后端能够自动向前端写入jquery.js、easui.js、easui.css等文件，并在表头生成保存、新增、删除工具栏。3.1自动套用格式设置控件的属性CssClass=“easyui-datagrid”。3.2以文本框方式实现全表格编辑设置控件的属性AllowEdit=true。3.3自动更新数据日志字段加 入creator、create_date、updater、update_date、auditor、auditdate等Parameters信息，系统会根据登录用户信息和操作时间自动更新数据日志字段信息。3.4控件支持丰富的列表编辑器首先，使用EasyUI扩展方法getGridColumns取得表头信息；然后，列属性formatter格式化显示信息，用列属性editor自定义丰富的列表编辑器，例如，支持单选和多选的下拉列表、下拉表格、下拉树、下拉日期等；最后，用datagrid方法渲染表格4。以性别、民族、学籍状态下拉列表为例，在前端写入以下JS代码：var cc=$.easyui.getGridColumns(#+gridId);var columns=cc1;columns0.forEach(function(column)switch(column.field)case SEX:case NATION_CODE:case REG_STATUS:column.formatter=function(value,row)var f=codecolumn.field.filter(function(item)return item.id=value)return f.length 0?f0.text:value;column.editor=type:combobox,options:valueField:id,textField:text,data:codecolumn.field;break;)var dg=$(#+gridId).datagrid(columns:columns);4结语控件在Web应用程序基础数据维护、全表格数据输入时非常有用，可以大大减少开发工作量，前端界面友好，符合用户操作习惯，用户既能像操作Excel一样编辑表格，还可以灵活定义多种下拉组合框，方便用户输入各类标准数据。参考文献1微软官网学习中心.什么是ASP.NET?2微软官网文档中心.IDataSourceViewSchema接口.3EasyUi Demo.Cell Editing in DataGrid.4EasyUi Documentation.DataGrid.(上接第53页)加入安全套接层（SSL）身份认证，以提高数据交互的安全性。参考文献1薛宁.基于WebService实现跨部门在线数据交互J.审计月刊,2021(1):37-40.2宗起振,王丹丹,赵琴.基于GSOAP的状态监测设备系统设计与实现J.软件导刊,2016,15(1):73-75.3刘兵.利用WebService实现嵌入式设备与PC端的无线通信J.单片机与嵌入式系统应用,2016,16(3):30-33.4徐娟华.基于WebService的扫码发货系统设计与实现J.铜业工程,2022(1):77-79.5刘国强,柯敏毅.基于WebService的公路设备保养管理系统的设计与实现J.科学技术创新,2020(13):68-69.(上接第58页)97