开源框架DWZ与ASP.NET MVC3的整合应用

……　

ＰＲ０６Ｒ＾啊ＬＡＮＧＵＡＧＥ　……　一……………　………………………　…一　……　一…………　…－　……………一　一…　

源挺　ＤＷＺ　Ａｓｐ　

｜　

ＭｖＣ　３　

姚瀹涛　

摘　要：详细介绍了以ＡＳＰ．ＮＥＴ　ＭＶＣ　３为后台整合ＤＷＺ框架，实现Ｗｅｂ应用程序的数据分页　

显示、增、删、查、改、导出及表单验证等基本操作。　

关键词：ＤＷＺ开源框架；ＡＳＰ．ＮＥＴ　ＭＶＣ框架；ＲＩＡ框架；Ｌｉｎｑ　ｔｏ　ＳＱＬ类　

ＡＳＰ．ＮＥＴ　ＭＶＣ是微软官方提供的开源ＭＶＣ框架，因不推　

荐使用ＡＳＰ．ＮＥＴ服务器控件，增加了开发人员ＵＩ设计的难　

度．为了提高开发效率．开发人员通常会选择整合成熟的　

ＲＩＡ框架来解决这方面的问题。ＤＷＺ就是这样一款国产的基　

ｔｙｐｅ＝，ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ“＞＜／ｓｃｒｉｐｔ＞　

＜ｓｃｒｉｐｔ　ｓｒｃ＝“＠Ｕｒ１．Ｃｏｎｔｅｎｔ（”￣／Ｓｃｒｉｐｔｓ／ｄｗｚ．ｍｉｎ　ｊｓ“）“ｔｙｐｅ＝“　

ｔｅｘｔ／］ａｖａｓｃｒｉｐｔ”ｃｈａｒｓｅｔ＝　ｇｂ２３１　２“＞＜／ｓｃｒｉｐｔ＞　

＜ｓｃｒｉｐｔ　ｓｒｃ＝”＠Ｕｒ１．Ｃｏｎｔｅｎｔ（“～／Ｓｃｒｉｐｔｓ／ｄｗｚ．ｒｅｇｉｏｎａ１．ｚｈ。ｊｓ“）“　

ｙｐｅ＝“ｔｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”＞＜，ｓｃｒｉｐｔ＞　

＠　读取ｄｗｚ．ｌｆａｇ．ｘｍｌ实现ＤＷＺ框架的初始化　＠　

＜ｓｃｒｉｐｔ　ｔｙｐｅ＝“ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ　＞　

￥（ｆｕｎｃｔｉＯｎ　０｛　

ＤＷＺ．ｉｎｉｔ（“ｄｗｚ．ｆｒａｇ．ｘｍｌ“，｛　

ｃａｌｌｂａｃｋ：ｆｕｎｃｔｉｏｎ　０｛　

ｉｎｉｔＥｎｖＯ；　

｝　

于ｉＱｕｅｒｙ实现的Ａｊａｘ　ＲＩＡ开源框架，完全开源，方便扩展，　

轻量级，界面简洁实用；ＣＳＳ和ＪＳ代码彻底分离，修改样式　

方便；保留ｈｔＴｒＩｌ的页面布局方式．支持ＨＴＭＬ扩展方式调用　

ＵＩ组件；只需懂ｈｔｒｎｌ语法不需精通ＪＳ，就可以使用Ａｊａｘ整合　

后台；基于ｊＱｕｅｙ，ＵＩ组件以ｊｒＱｕｅｒｙ插件的形式发布，扩展　

方便，很适合与ＡＳＰ．ＮＥＴ　ＭＶＣ整合实现Ｗｅｂ应用程序的快速　

开发。　

｝）：　

下面以一个课题管理的实例片断详细介绍ＡＳＰ．ＮＥＴ　ＭＶＣ　

３与ＤＷＺ框架整合，实现Ｗｅｂ应用程序常用的数据分页显示、　

增、删、查、改、导出及表单验证等基本操作。　

））：　

＜／ｓｃｒｉｐｔ＞　

＜／ｈｅａｄ＞　

其中ｄｗｚ．ｍｉｎ．ｊｓ是ＤＷＺ框架库、ｊｑｕｅｒｙ．ｖａｌｉｄａｔｅ．ｊｓ是表单　

１　在ＡＳＰ．ＮＥＴ　ＭＶＣ　３项目中引用ＤＷＺ库　

在Ｖｉｓｕａｌ　Ｗｅｂ　Ｄｅｖｅｌｏｐｅｒ　２０１０中新建一个ＡＳＰ．ＮＥＴ　ＭＶＣ　３　

Ｗｅｂ　Ａｐｐｌｉｃａｔｉｏｎ空项目。删除项目中Ｃｏｎｔｅｎｔ、ＳｅｒｉｔＤＳ、Ｖｉｅｗ　

验证插件、ｄｗｚ．ｒｅｇｉｏｎａ１．ｚｈ．ｊｓ是本地化脚本库，ｄｗｚ．ｌｆａｇ．ｘｎｆｌ中　

定义了一些ｄｗｚ组件碎片和提示信息。需要初始化到ＤＷＺ环　

境中。　

穗蕊霉嘲翻　盈　

端　ｔ｝婚　ｔｌ　’　

各目录中的所有内容，替换为ＤＷＺ框架（实例使用ｄｗｚ—ｒｉａ一　

１．４．３，下载地址：ｈｔｔｐ：／／ｃｏｄｅ．ｇｏｏｇｌｅ．ｅｏｍ／ｐ／ｄｗｚ／ｄｏｗｎｌｏａｄｓ／ｌｉｓｔ）中　

的相关文件（如图１所示）。　

在Ｃｏｎｔｒｏｌｌｅｒｓ下新建控制器ＨｏｍｅＣｏｎｔｍｌｌｅｒ．为默认Ａｃｔｉｏｎ　

添加同名视图Ｉｎｄｅｘ，视图引擎选择Ｒａｚｏｒ（ＣＳＨＴＭＬ），空母版。　

通过如下代码实现对ＤＷＺ库的引用：　

＜ｈｅａｄ＞　

簿箱藉萼Ｉ用　

麟巍　＃　・　

鞋镳　彗姆ｌ　

￥　

！

　…．．．．　

ｔ　：　鳓

瓣　

￡溢　ｔ４　

ｆ　娃ｔ　

姥　Ｃ糊竹ｅｎ　ｒ　

嚣泌１种　聪＃　

辩

８　

誊　ｍ“　

键≥抽　ｊ　

。…　…　，…　

ｉ　

罐　籼ｚ　ｒ　私确　ｔｈｊ　：　

＠　样式表引用　＠　

＜¨ｎｋ　ｈｒｅｆ：　＠Ｕｒ１．Ｃｏｎｔｅｎｔ（。一／Ｃｏｎｔｅｎｔ／ｔｈｅｍｅｓ／ｄｅｆａｕｌｔ／ｓｔｙｌｅ．　

ＣＳＳ　）。ｒｅＩ＝“ｓｔｙｌｅｓｈｅｅｔ　ｔｙｐｅ＝＂ｔｅｘｔ／ｃＳＳ。，＞　

蝴ｊ　”　ｉ　７　ｌ　Ｊ　

｛虢　！　姐　：　

……

儡卉　壮　

。～．　．

￥　

。　

孵　

塑ｔ　壁　哪．　

棚ｆｉ＃　麟蕊参　

＜¨ｎｋ　ｈｒｅｆ＝　＠Ｕｒ１．Ｃｏｎｔｅｎｔ《”一，ＣｏｎｔｅｎｔＪｔｈｅｍｅｓ／ｃｓｓ／ｃｏｒｅ．　

ＣＳＳ“）　ｒｅｌ＝　ｓｔｙｌｅｓｈｅｅｔ‘ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ＂／＞　

图１　ＤＷＺ框架文件　

＠　ＤＷＺ库文件引用　＠　

２　ＤＷＺ框架布局　

ｃｒｉｐｔｓ／ｊｑｕｅｒｙ－１．７．１．ｍｉｎ．　

ＤＷＺ框架采用。ＤＩＶ＋ＣＳＳ实现Ｗｅｂ应用程序常用的“上　

（ＬＯＧＯ）、左（菜单）、右（内容）、下（版权信息）”布局（如　

＜ｓｃｒｌｐｔ　ｓｒｃ：。＠Ｕｒ１．Ｃｏｎｔｅｎｔ（　

ｊｓ　）＿ｔｙｐｅ＝＇ｔｅｘ埘ａｖａｓｃｒｉｐｔ＇＞＜／ｓｃｒｉｐｔ＞　

＜ｓｃｒｉｐｔ　ｓｒｃ；　＠ＵｒＩ．Ｃｏｎｔｅｎｔ（　￣／Ｓｃｒｉｐｔｓ４ｑｕｅｒｙ．ｖａｌｉｄａｔｅ　）。　

……　…………　‘　…Ｊ’　……　『　

实用第一　智慧密集　

…　一……　…　…　…一…　…　…　

图２所示）。　

＜ｂｏｄｙ　摧０１Ｉ　ｒ婚　＞　

辔　贾黼端鼹蛐　

＜ｄｉｓ，　恬　ＩａｙｏＵＴ　＞　

卿掰嬲上都蛐　

遗　，１　‰　铺　ｔ　…　ｅ．｜”鱼　

舢爱法粥荤　瞎　

４ｌ　ｌ氇　３　ｅ　｜　ｘ　｜　Ｉ，…　３　

毋卓档德内馨墙　

ｔ　≮　０　ｌｔ　ｔ　…　｝　

＜／ｄｌｖ＞　

舢腻￥　麟授隐慰　舜　

＜：／ｉｖ　壮　ｔ＇ＯＯｔｅ　＞ＡＳＰ．髓ｔ　揭开源撰勰Ｂ　ｚ蝌虢台应用＜／ｄｉｖ＞　

＜／ｂｏｄｙ＞　

图２　ＤＷＺ框架布局　

左边菜单要实现折叠效果，还需在“ｌｅｆｔｓｉｄｅ”中加入如下　

代码：　

＠　左边收缩条　＠　

＜ｄｉｖ　ｉｄ＝“ｓｉｄｅｂａｒ　ｓ”＞　

＜ｄｉｖ　ｃｌａｓｓ＝”ｃｏｌｌａｐｓｅ　‘＞　

＜ｄｉｖ　ｃｌａｓｓ＝”ｔｏｇｇｌｅＣｏｌｌａｐｓｅ“＞　

＜ｄｉｖ＞＜／ｄｉｖ＞＠　此处必须保留　＠　

＜／ｄｉｖ＞　

＜／ｄｉｖ＞　

＜／ｄｉｖ＞　

更详细的布局代码可参见示例源码布局效果如图３所示。　

ＤＷＺ－ＡＳＰＩ懈删　呒　ｉ　誊｜　ｉ　笺　ｉ　

ｌｌ＊　Ｉ　秘ｎ囊　≮强　。置　麓　壤囊穗　鬟　

ｊ　：　开撵框架Ｄ１Ⅳｚ与Ａ｜｝Ｐ　辩ＥＴＭＶｃ　３的整台馥甩　

｛　

砖　

酾０　狮㈣　ｃ瑚＊　酬　

图３　ＤＷＺ布局效果图　

３　ＤＷＺ框架常用组件与ＡＳＰ．ＮＥＴ　ＭＶＣ整合　

ＤＷＺ框架提供了常用的、使用Ｈｔｍｌ扩展方式调用的ｗｅｂ　

应用程序ｕＩ组件和　ａｘ表单，无需开发者熟悉Ｊａｖａｓｃｒｉｐｔ便　

能快速完成客服端的开发。下面介绍Ｔａｂｌｅ分页组件、Ａｊａｘ表　

单整合ＡＳＰ．ＮＥＴ　ＭＶＣ　３后台实现数据的验证、增、删、查、　

改、导出等基本操作。　

３．１　建立数据Ｍｏｄｅｌｓ　

在Ｖｉｓｕａｌ　Ｗｅｂ　Ｄｅｖｅｌｏｐｅｒ　２０１０集成环境中新建ＳＱＬ　Ｓｅｒｖｅｒ　

数据库ＭＲＳＭＩＳ—ＤＢ，表Ｔｂ—Ｒｓｉｎｆｏ结构（如图４所示）。为　

ＭＶＣ项目建立Ｍｏｄｅｌｓ．选择Ｌｉｎｑ　ｔｏ　ＳＱＬ类，并命名为　

２６　与｜Ｉ｜　

ＭＲＳＭＩＳＭｏｄｅ１．ｄｂｍｌ。　

图４　Ｔｂ－Ｒｓｉｎｆｏ表结构　

３．２　Ｔａｂｌｅ分页组件　

在Ｍｏｄｅｌｓ中建立数据操作类ＳＭＲｅｐｏｓｉｔｏｒｙ．并设置分贞相　

关属性．代码如下：　

ｐｕｂｌｉｃ　ｉｎｔ　ＮｕｍＰｅｒＰａｇｅ｛ｇｅｔ；ｐｒｉｖａｔｅ　ｓｅｔ；）　

／／每页显示记录数　

ｐｕｂｌｉｃ　ｉｎｔ　ＰａｇｅＮｕｍ｛ｇｅｔ；ｐｒｉｖａｔｅ　ｓｅｔ；）　∥当前页　

ｐｕｂｌｉｃ　ｓｔｒｉｎｇ　ＯｒｄＮａｍｅ｛ｇｅｔ；ｐｒｉｖａｔｅ　ｓｅｔ；）　，／排序字段　

ｐｕｂ｛ｉｃ　ｓｔｒｉｎｇ　ＤｉｒｅｃｔＮａｍｅ｛ｇｅｔ；ｐｒｉｖａｔｅ　ｓｅｔ；）／／升、降序　

ｐｕｂｌｉｃ　ｉｎｔ　ＴｏｔａＩＣｏｕｎｔ｛ｇｅｔ；ｐｒｉｖａｔｅ　ｓｅｔ；）　／／记录总数　

在Ｃｏｎｔｒｏｌｌｅｒｓ中建立一个ＰａｇｅＬｉｓｔ方法．并为其添加视图。　

视图布局主要南４部分组成如图５所示。　

鼢王鼹拦蛐　

…　…　：　…～　～　～　

ｉ　ｉ　｜　～　臻　１　２　ｌ　差馥　

辔毫势据鏖最躐事诤　

照　…～ｊ　：　挚　：　；　

舡势贾糍铡匮璃　

姥姥　肆味　毒罄　话－豁｜ｌ棼　鞋　》…｜｜毳｜；。　

触淞握分疆踌藏巍壤蛐　

图５添加视图　

数据显示区由扩展的Ｔａｂｌｅ标签组成，主要代码如下：　

＜ｔａｂｌｅ　ｃｌａｓｓ＝　ｔｉｓｔ“ｗｉｄｔｈ＝”９８％“ｔａｒｇｅｔＴｙｐｅ＝“ｎａｖＴａｂ“ａｓｃ＝“　

ａｓｃ“ｄｅｓｃ＝　ｄｅｓｃ‘‘＞　

＜ｔｈｅａｄ＞　

＜ｔｒ＞　

＜ｔｈ＞＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｃｈｅｃｋｂｏｘ。。ｇｒｏｕｐ＝“ｉｄｓ”ｃｌａｓｓ＝　

ｃｈｅｃｋｂｏｘＣｔｒｌ”＞＜Ａｈ＞　

＜ｔｈ　ｏｒｄｅｒＦｉｅｔｄ＝“ｒｓｎｕｍ　ｃｌａｓｓ＝“＠Ｍｏｄｅ１．　

ＤｉｒｅｃｔＮａｍｅ　＞课题编号＜／ｔｈ＞　

＜ｔｈ＞课题名称＜／ｔｈ＞　

＜ｔｈ＞操作＜／ｔｈ＞　

＜／ｔｒ＞　

＜／ｔｈｅａｄ＞　

＜ｔｂｏｄｙ＞　

＠ｆｏｒｅａｃｈ（ｖａｒ　ｒｓ　ｉｎ　Ｍｏｄｅ１．ＳｕｂｊｅｃｔＩｎｆｏＬｉｓｔ（））　

｛　

＜ｔｒ　ｔａｒｇｅｔ＝　ｓｉｄ—ｕｓｅｒ　ｒｅｌ＝　＠ｒｓ．Ｉ　Ｄ”＞　

＜ｔｄ＞＜ｉｎｐｕｔ　ｎａｍｅ＝“ｉｄｓ“ｖａｌｕｅ＝”＠ｒｓ　Ｉ　Ｄ”ｔｙｐｅ＝“　

ｃｈｅｃｋｂｏｘ　＞＜Ａｄ＞　

……　

ＰＲＯＧＲＡＭ　ＬＡＨＧＵ＾Ｂ　………………………　……………………一…………………………………………Ｆ　

＜ｔｄ＞＠ｒｓ：ｒｓｎｕｍ＜／ｔｄ＞

……　

＜／ｔｒ＞

）　

＜／ｔｂｏｄｙ＞　

＜／ｔａｂｌｅ＞　

其中，表头中加入ｏｒｄｅｒＦｉｅｌｄ＝”ｒｓｎｕｍ”ｃｌａｓｓ　”＠Ｍｏｄｅｌ・　

ＤｉｒｅｅｔＮａｍｅ”表示该列可点击进行升、降排序。数据的显示是　

通过ｆｏｒｅａｃｈ完成，调用在数据操作类ＳＭＲｅｐｏｓｉｔｏｒｙ中的查询　

方法ＳｕｂｊｅｃｔＩｎｆｏＬｉｓｔ　０，此方法用Ｌｉｎｑ　ｔｏ　ＳＱＬ语句对数据表分

丽根取．

ｖａｒ　ｓｉ：ｓｍｄｂ．ＥｘｅｃｕｔｅＱｕｅｒｙ＜Ｔｂ　Ｒｓｉｎｆｏ＞　

（一ｓｅＩｅｃｔ＊ｆｒｏｍ　Ｔｂ．Ｒｓｉｎｆｏ　ｏｒｄｅｒ　ｂｙ　ｉｉ＋　

ＯｒｄＮａｍｅ＋ｎ。＋ＤｉｒｅｃｔＮａｍｅ）：　

ｒｅｔｕｒｎ　ｓｉ．Ｓｋｉｐ（（Ｐａｇｅ｝Ｎｕｍ　一　１）　ＮｕｍＰｅｒＰａｇｅ）．Ｔａｋｅ　

（ＮｕｍＰｅｒＰａｇｅ）；／／返回分页数据　

／／ｓ“分页控制区”ＭＲ

＜ｄｉｖ　ｃｌ

印ｏ

ａｓｓ＝“ｐａｇｉ

ｓｉｔｏｒｙ中设置　属性）

孳　季　传递过来的数据（

ｎａｔｉｏｎ”ｔａｒｇｅｔＴｙｐｅ＝”

。　

在数据操作类　

ｎａｖＴａｂ“ｔ０ｔａＩ

＋　＋ｎ　．

Ｃｏｕｎｔ＝”　

＠ＭｏｄｅＩ．Ｔ０ｔａＩＣｏｕｎｔｌ＿ｎｕｍＰｅｒＰａｇｅ＝一＠Ｍｏｄｅ１．ＮｕｍＰｅｒＰａｇｅ　ｎ　

ｐａｇｅＮｕｍＳｈｏｗｎ＝－５ｎ　ｃｕｒｒｅｎｔＰａｇｅ＝＂＠ＭｏｄｅＩ．ＰａｇｅＮｕｍ”＞《／　

ｄｉｖ＞　

客户端对分页组件的操作通过“数据分页隐藏表单”提交　

相关分页数据，代码如下：　

＜ｆｏｒｍ　ｉｄ＝　ｐａｇｅｒＦｏｒｍ“ｍｅｔｈｏｄ＝＂ｐｏｓｔ。ａｃｔｉｏｎ＝＂／Ｈｏｍｅ／　

ＰａｇｅＬｉｓｔ“＞　

＜ｉｎｐｕｔ　ｔｙｐｅ＝　ｈｉｄｄｅｎ”ｎａｍｅ＝“ｐａｇｅＮｕｍ　ｖａｌｕｅ＝“　

＠Ｍ０ｄｅＩ．ＰａｇｅＮｕｍ　／＞　

＜ｉｎｐｕｔ　ｔｙｐｅ＝　ｈｉｄｄｅｎ。ｎａｍｅ：　ｎｕｍＰｅｒＰａｇｅ　ｖａｌｕｅ＝”　

＠Ｍｏｄｅ１．ＮｕｍＰｅｒＰａｇｅ　，＞　

＜ｉｎｐｕｔ　ｔｙｐｅ＝，ｈｉｄｄｅｎ　ｎａｍｅ：“ｏｒｄｅｒＦｉｅｌｄ，ｖａｌｕｅ＝　

＠Ｍｏｄｅ１．ＯｒｄＮａｍｅｎ　ｌ＞　

＜ｉｎｐｕｔ　ｔｙｐｅ＝“ｈｉｄｄｅｎ　ｎａｍｅ＝　ｏｒｄｅｒＤｉｒｅｃｔｉｏｎ　ｖａｌｕｅ＝”　

＠Ｍｏｄｅｌ。ＤｉｒｅｃｔＮａｍｅ　／＞　

＜／ｆｏｒｍ＞　

在Ｃｏｎｔｒｏｌｌｓ中的ＰａｇｅＬｉｓｔ方法将接收表单数据，然后通过　

数据操作类ＳＭＲｅｐｏｓｉｔｏｒｙ的构造函数来进行相关处理，代码　

如下：　

ｉｎｔ　ｐａｇｅＮｕｍ＝Ｃｏｎｖｅ￣．Ｔｏｌｎｔ３２（Ｒｅｑｕｅｓｔ【“ｐａｇｅＮｕｍ“】）；／／当前　

ｌｌ　

ｉｎｔ　ｎｕｍＰｅｒＰａｇｅ＝Ｃｏｎｖｅｒｔ．Ｔｏｌｎｔ３２（Ｒｅｑｕｅｓｔ［＂ｎｕｍＰｅｒＰａｇｅ＂］）；　

每页显示记录数　

ｓｔｒｉｎｇ　ｏｒｄＮａｍｅ＝Ｃｏｎｖｅ￣．ＴｏＳｔｒｉｎｇ（Ｒｅｑｕｅｓｔ［＂ｏｒｄｅｒＦｉｅｌｄ＂］）；　

ｆｉ赫芹字段　

ｓｔｒｉｎｇ　ｄｉｒｅｃｔＮａｍｅ＝ＣｏｎｖｅＲ．ＴｏＳｔｒｉｎｇ（Ｒｅｑｕｅｓｔ［“ｏｒｄｅｒＤｉｒｅｃｔｉ　

ｏｆｆ　】）：∥升、降序　

ｏｒｄＮａｍｅ：Ｓｔｒｉｎｇ．１ｓＮｕｌｌＯｒＥｍｐｔｙ（ｏｒｄＮａｍｅ）７＂ｒｓｎｕｍ＂：　

ｏｒｄＮａｍｅ；　

ｄｉｒｅｃｔＮａｍｅ＝Ｓｔｒｉｎｇ．ＩｓＮｕｌｌＯｒＥｍｐｔｙ（ｄｉｒｅｃｔＮａｍｅ）７　Ｈａｓ　：　

ｄｉｒｅｃｔＮａｍｅ；　

ＳＭＲｅｐｏｓｉｔｏｒｙ　ｓｍｒ＝ｎｅｗ　ＳＭＲｅｐｏｓｉｔｏｒｙ（ｐａｇｅＮｕｍ．ｎｕｍＰｅｒ　

Ｐａｇｅ　ｌ　ｏｒｄＮａｍｅ，ｄｉｒｅｃｔＮａｍｅ）；　

ｒｅｔｕｒｎ　Ｖｉｅｗ（ｓｍｒ）：　

另外，　“分页控制区”每页显示记录数的选择是通过ｓｅｌｅｃｔ　

表单来完成

，

为使当前选择不被刷新，可用ＪＱｕｅｒｙ代码￥（”　

ｓｅｌｅｃｔ＂１

．

ｖａｌ　ｆ・・＠Ｍｏｄｅ１．ＮｕｍＰｅｒＰａｇｅ＂）来设置当前值：　

＜ｓｅＩｅｃｔ　ｃｌａｓｓ：ｎｃＯｍｂｏｘ　ｎａｍｅ：・・ｎｕｍＰｅｒＰａｇｅ“ｏｎｃｈａｎｇｅ：ｕ　

ｎａｖＴａｂＰａｇｅＢｒｅａｋ（｛ｎｕｍＰｅｒＰａｇｅ：ｔｈｉｓ．ｖａｌｕｅ｝）”＞　

＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝　２０”＞２０＜／ｏｐｔｉｏｎ＞　

＜ｏｐｔｉｏｎ　ｖａｌｕｅ＝　５０“＞５０＜／ｏｐｔｉｏｎ＞　

…‘　

在ＤＷＺ框架中有两种页面呈现方式，ｎａｖＴａｂ以主页标签　

方式显示，ｄｉａｌｏｇ以弹出对话框的方式显示。这里将在　

ＰａｇｅＬｉｓｔ页面用ｎａｖＴａｂ方式显示，在Ｉｎｄｅｘ页面通过如下代码　

来调用ＰａｇｅＬｉｓｔ页面

。

其中，ｔａｒｇｅｔ：“ｎａｖＴａｂ”将自动关联调　

Ｉ

用ｎｄ．ｖＴａｂ组件，使该页以主页标签方式显示，ｒｅｌ：为　ａ　

～　

Ｄ值，后续可　用来重载该页面时使用：

ｔａｂ的　

’　。、　

＜Ｉｉ＞＜ａ　ｈｒｅｆ＝”＠ＵｒＬＣｏｎｔｅｎｔ（“－／Ｈｏｍｅ／ＰａｇｅＬｉｓｔ＂）“ｔａｒｇｅｔ＝”　

ｎａｖＴａｂ”ｒｅｌ＝＂ｍｅｎｕ

—

ＰａｇｅＬｉｓｔ　＞　

课题列表＜／ａ＞＜／　

３．３　Ａｊａｘ表单提交　

ＤＷＺ框架默认使用Ａｊａｘ表单提交并返回ｊｓｏｎ数据，告诉　

客户端操作是否成功或失败等提示信息，以及成功后的处理方　

式（刷新某个ｎａｖＴａｂ或关闭某个ｎａｖＴａｂ或ｎａｖＴａｂ页面跳转）。　

Ａｊａｘ表单提交后自动调用默认回调函数ｖａｌｉｄａｔｅＣａｌｌｂａｃｋ　

ｆｔｈｉｓ），提示操作成功或失败。如果提交后如果需要重新加载某　

个ｎａｖＴａｂ或关闭ｄｉａｌｏｇ可以使用ｎａｖＴａｂＡｊａｘＤｏｎｅ或　

ｄｉｌａｏｇＡｊａｘＤｏｎｅ（如果表单在ｎａｖＴａｂ页面上使用ｎａｖＴａｂＡｊａｘＤｏ　

Ｂｅ，在ｄｉｌａｏｇ页面上使用ｄｉａｌｏｇＡｊａｘＤｏｎｅ）方法，实现代码：　

＜ｆｏｒｍ　…　ｏｎｓｕｂｍｉｔ＝＂ｒｅｔｕｒｎ　ｖａｆｉｄａｔｅＣａＩＩｂａｃｋ（ｔｈｉｓ，　

ｄｉａｉｏｇＡｊａｘＤｏｎｅ）”＞…　

如果需要做其他处理也可以自定义一个回调函数ｘｘｘ＋　

ＡｊａｘＤｏｎｅ。　

在Ｃｏｎｔｒｏｌｌｅｒｓ中建立一个ＡｄｄＳｕｂｊｅｃｔ方法．实现将表单数　

据添加至数据库，并返回客服端ｊＳＯｌｌ数据，主要代码如下：　

ｓｔｒｉｎｇ　ｓｕｂｊｅｃｔＮｕｍ＝Ｃｏｎｖｅｒｔ．ＴｏＳｔｒｉｎｇ（Ｒｅｑｕｅｓｔ［。ｓｕｂｊｅｃｔＮｕｍ”】）：　

ＳＭＲｅｐｏｓｉｔｏｒｙ　ｓｍｒ＝ｎｅｗ　ＳＭＲｅｐｏｓｉｔｏｒｙ０；　

．ｆ｛ｆ　Ｓｔｒｉｎｇ，ＩｓＮｕｌＩＯｒＥｍｐｔｙ（ｓｕｂｊｅｃｔＮｕｍ））　

｛　

ｔｒｙ　

｛　

礁Ｒｓｉｎｆｏ　ｓｉ：ｎｅｗ礁Ｒｓｉｎｆｏ０　

ｓｉ．ｒｓｎｕｍ≈ｓｕｂｊｅｃｔＮｕｍ；　

ｓｍ¨ｎｓｅ￣Ｓｕｂｊｅｃｔ（ｓｉ）；　

淼　

Ｉ、　一　　１ｊ’１　　１Ｉ＿　～　

实用第一　智慧密集　

‘　Ｈ．　　Ｉｂ　＾＿　Ｙ　￥　

ｓｍｒ．Ｓａｖｅ（）　

）　

ｒｅｔｕｒｎ　Ｊｓｏｎ（ｎｅｗ｛ｓｔａｔｕｓＣｏｄｅ＝　２００“，ｍｅｓｓａｇｅ＝”课题添加　

成功！“，ｎａｖＴａｂｌｄ＝”ｍｅｎｕ

—

ＰａｇｅＬｉｓｔ“　ｃａｌｌｂａｃｋＴｙｐｅ＝　

ｃｌｏｓｅＣｕｒｒｅｎｔ“））：　

∥返回重新加载　ｍｅｎｕ—ＰａｇｅＬｉｓｔ”页面　

）　

返回的ｉｓｏｎ数据中，ｓｔａｔｕｓＣｏｄｅ表示操作状态（框架分别　

定义了２００、３００、３０１，分别表示操作成功、失败、超时）、　

ｍｅｓｓａｇｅ表示返回提示信息、ｎａｖＴａｂｌｄ指定要重新加载的　

ｎａｖＴａｂ页面、ｃａｌｌｂａｃｋＴｙｐｅ指定回调方法（示例中关闭当前添　

加记录对话框），另外还包括ｆｏｒｗａｒｄＵｒｌ指定跳转页面等。与　

其对应的ＡｄｄＳｕｂｊｅｅｔ视图主要代码如下：　

＜ｄｉｖ　ｃｌａｓｓ＝’。ｐａｇｅＣｏｎｔｅｎｔ。‘＞　

＜ｆｏｒｍ　ｍｅｔｈｏｄ＝　ｐｏｓｔ　ａｃｔｉｏｎ。”＠Ｕｒ１．Ｃｏｎｔｅｎｔ（Ｉ＿～／Ｈｏｒｎｅ／　

ＡｄｄＳｕｂｊｅｃｔ“）“　

ｏｎｓｕｂｍｉｔ＝”ｒｅｔｕｒｎ　ｖａｔｉｄａｔｅＣａｌＩｂａｃｋ（ｔｈｉｓ，　

ｄｉａｌｏｇＡｊａｘＤｏｎｅ）“＞　

＜ｄｉｖ　ｃｌａｓｓ＝”ｐａｇｅＦｏｒｍＣｏｎｔｅｎｔ。‘ｌａｙｏｕｔＨ＝“５６。。＞　

＜Ｄ＞　

＜ｌａｂｅｌ＞课题编号：＜／ｌａｂｅｌ＞　

＜ｉｎｐｕｔ　ｔｙｐｅ＝　ｔｅｘｔ　ｎａｍｅ＝。’ｓｕｂｊｅｃｔＮｕｍ”　

ｓｉｚｅ＝“３０”ｍａｘｌｅｎｇｔｈ＝”３０“ｃｌａｓｓ＝”ｒｅｑｕｉｒｅｄ”，＞　

＜／Ｐ＞　

＜Ｄ＞　

＜ｌａｂｅｌ＞申请时间：＜／ｌａｂｅｌ＞　

＜ｉｎｐｕｔ　ｔｙｐｅ＝“ｔｅｘｔ　ｎａｍｅ＝“ｓｕｂｊｅｃｔＲｅｑ　

ｕｅｓｔ”ｃｌａｓｓ＝“ｄａｔｅ“ｓｉｚｅ＝“３０“ｙｅａｒｓｔａｒｔ＝…０　ｙｅａｒｅｎｄ＝“５０“　

ｖａｌｕｅ＝　２０１　２－０３－０１“ｄａｔｅ＝　ｔｒｕｅ＇／＞　

＜ａ　ｃｌａｓｓ＝”ｉｎＤｕｔＤａｔｅＢｕｔｔｏｎ”ｈｒｅｆ＝“ｊａｖａｓｃｒｉｐｔ：；”＞选择＜／ａ＞　

＜／ｐ＞　

＜／ｄｉｖ＞　

＜ｄｉｖ　ｃｌａｓｓ＝”ｆｏｒｍＢａｒ”＞　

＜ｕ｝＞　

＜ｌｉ＞＜ｄｉｖ　ｃｌａｓｓ＝”ｂｕｔｔｏｎＡｃｔｉｖｅ”＞＜ｄｉｖ　

ｃｌａｓｓ＝　ｂｕｔｔｏｎＣｏｎｔｅｎｔ“＞＜ｂｕｔｔｏｎ　ｔｙｐｅ＝“ｓｕｂｍｉｔ“＞添加＜／　

ｂｕｔｔｏｎ＞＜／ｄｉｖ＞＜／ｄｉｖ＞＜／ｌｉ＞　

＜／ｕｌ＞　

＜／ｄｉｖ＞　

＜／ｆｏｒｍ＞　

＜／ｄｉｖ＞　

在该视图中，使用了ＤＷＺ框架自带的日期组件（“申请时　

间”的黑体字部分），表单验证采用了ｊｑｕｅｒｙ．ｖａｌｉｄａｔｅ插件（版　

本１．９，使用方法可参阅相关文档）。页面的调用使用超链接的　

扩展方式：　

＜ａ　ｈｒｅｆ＝”＠Ｕｒ１．Ｃｏｎｔｅｎｔ（　￣／Ｈｏｍｅ／ＡｄｄＳｕｂｊｅｃｔ“）　ｔａｒｇｅｔ＝“ｄｉａｌｏｇ　

“２０　１２．　

与雉　

ｒｅｓｉｚａｂｌｅ＝　ｆａｌｓｅ“ｍａｓｋ：“ｔｒｕｅ”ｍａｘａｂｌｅ＝。‘ｆａｌｓｅ“ｗｉｄｔｈ＝‘‘５１　８‘　。

ｈｅｉｇｈｔ＝。’２８４　ｒｅｌ＝“ｍｅｎｕ

＿

ＡｄｄＳｕｂｊｅｃｔ。。＞　

扩展属性中，ｒｅｓｉｚａｂｌｅ、ｍａｓｋ、ｍａｘａｂｌｅ、ｗｉｄｔｈ、ｈｅｉｇｈｔ分　

别设置对话框能否改变大小、模式、显示最大化按钮、宽、高　

等参数（如图６所示）。　

鼍氅　辩辣蚤ｊ麟　疆　｜ｇ棼嚣　《　罐　瓣　《　强　。　ｂ　＊　÷。　秘　。ｌ　。　＿　

攥趣躺母：程辨｛茹００１　

鼹名称：　静霄辎磷　鼯管蛰壤鏖　

攥鼗盎瓣＾：　

谦题粪蹦：　载撵鼹　

漱ｓ喊：　２０１２—０３－０ｔ　憩　

狂ｌ　蛾搬　

图６　Ａｉａｘ表单设计　

编辑记录和添加汜录操作类似．所不同的是编辑　录要注　

意获取当前记录的方式，限于篇幅不再赘述，可详见所附示例　

源码　

３。４　Ａｊａｘ链接扩展　

前面已经用到ｎａｖＴａｂ和ｄｉａｌｏｇ链接扩展．除此之外，　

ＤＷＺ框架还定义丁常用的Ａｊａｘ链接扩展．如ａｊａｘＴｏｄｏ、　

ｓｅｌｅｃｔｅｄＴｏｄｏ、ｄｗｚＥｘｐｏｒｔ等．这些属性会自动关联相应的Ａｊａｘ　

操作．在一些对动作查询中使用起来　分方便。其中，　

ｔａｒｇｅｔ＝”ｓｅｌｅｃｔｅｄＴｏｄｏ”便会自动关联在前面分页组件中：　

＜ｉｎｐｕｔ　ｔｙｐｅ＝”ｃｈｅｃｋｂｏｘ“ｇｒｏｕｐ＝”ｉｄｓ”ｃｌａｓｓ＝”ｃｈｅｃｋｂｏｘＣｔｒｌ“＞　

代码及相关Ａｊａｘ操作，将表单数据提交服务器端，实现　

删除所选记录的操作（如图７所示）。　

＿ＭＶＣ　３黪蠡＿虢ｌ撼赫　

遂　薅　舔电　：　｜　｜幔戳　ｌ　一　｜瀑　　《｜　

爹ｉｌ　祧　甏｜　黼　鼗｛羲辫　辩秘　溅麟　糍　燕｜囊ｌ　濑　。　

图７删除记录的实现　

在Ｃｏｎｔｒｏｌｌｅｒｓ中的ＤｅｌＳｕｂｊｅｃｔ方法中实现删除所选记录的　

主要代码：　

ｓｔｒｉｎｇ　ｉｄｓ：Ｃｏｎｖｅｒｔ．ＴｏＳｔｒｉｎｇ（Ｒｅｑｕｅｓｔ［”ｉｄｓ”】）　

ＳＭＲｅｐｏｓｉｔｏｒｙ　ｓｍｒ　ｎｅｗ　ＳＭＲｅｐｏｓｉｔｏｒｙ０；　

ｔｒＶ　

｛　

ｓｍｒ．ＤｅｌｅｔｅＳｕｂｊｅｃｔ（ｉｄｓ）；　

……　

ＰＲＯＧＲＡ啊ＬＡＮＧＵＡＧＥ…一　…　………一　“　一…　……　……一　－　……　

ＭａｐＰａｔｈ（　

“　……　ｒ…　一　一一……　－…　…ｒ　

ｓｍｒ．ＳａｖｅＯ；　

）　

……　

Ｕｄ．Ｃｏｎｔｅｎｔ（“￣／ＥｘｐｔＸｌｓ／ＥｘｐｔＳｕｂｊｅｃｔ．ｘｌｓ”））；　

ｓｔｒｉｎｇ　ｓｈｅｅｔＮｌａｍｅ＝“课题分页导出数据　

ＳＭＲｅｐｏｓｉｔｏｒｙ　ｓｍｒ＝ｎｅｗ　ＳＭＲｅｐｏｓｉｔｏｒｙ０；　

ｔｒｖ　

ｒｅｔｕｒｎ　Ｊｓｏｎ（ｎｅｗ｛ｓｔａｔｕｓＣｏｄｅ＝“２００“，ｍｅｓｓａｇｅ＝“操作员删　

除成功！“，　

ｎａｖＴａｂｌｄ：”ｍｅｎｕ

ｐａｇｅＵｓｔ＂））　

删除所选记录的Ｌｉｎｑ　ｔｏ　ＳＱＬ语句：　

ｎｆｏ　ｗｈｅｒｅ　Ｉ　Ｄ　

ｓｍｄｂ．ＥｘｅｃｕｔｅＣｏｍｍａｎｄ（“ｄｅｌｅｔｅ　ｆｒＯｍ　Ｔｂ

Ｒｓｉ

＿

｛　

ｓｍｒ．Ｅ×ｐｏｒｔＰａｇｅ×Ｉｓ（ｓｑＩＳｔｒ，ｆｉｌｅＮａｍｅ，ｓｈｅｅｔＮａｍｅ，　

Ｃｏｎｖｅｒｔ．Ｔｏｌｎｔ３２（ｐａｇｅＮｕｍ），Ｃｏｎｖｅｒｔ．Ｔｏｌｎｔ３２（ｎｕｍＰｅｒ　

Ｐａｇｅ））；）　

ｉｎ《“＋ｉｄｓ＋“）“）：　

Ａｊａｘ链接扩展ｔａｒｇｅｔ＝”ｄｗｚＥｘｐｏｒｔ”会自动绑定相应的　

Ａｊａｘ处理，将分页隐藏表单数据ｐａｇｅＮｕｍ、ｎｕｍＰｅｒＰａｇｅ、　

ｏｒｄｅｒＦｉｅｌｄ、ｏｒｄｅｒＤｉｒｅｃｔｉｏｎ提交服务器用于导出数据操作　

＜ａ　ｃｌａｓｓ＝“ｉｃｏｎ　ｈｒｅｆ＝“＠ＵｒＩ．Ｃｏｎｔｅｎｔ　《“　／Ｈｏｍｅ／　

ｒｅｔｕｒｎ　Ｆｉｌｅ（Ｕｒ１．Ｃｏｎｔｅｎｔ（”ＷＥｘｐｔＸｌｓ／ＥｘｐｔＳｕｂｊｅｃｔ．ｘｌｓ”），　

ａｐｐｌｉｃａｔｉｏｎ／－ｅｘｃｅｔ”，”ＥｘｐｔＳｕｂｊｅｃｔ．ｘｌｓ”）；　

导出ｘｌｓ的ＥｘｐｏｒｔＰａｇｅＸｌｓ方法详细代码详见示例源码。　

ＥｘｐｔＳｕｂｊｅｃｔＸＩｓ＇　１ｌｌ　ｔａｒｇｅｔ＝　＇ｄｗｚＥｘｐｏｒｔ　ｔａｒｇｅｔＴｖｐｅ＝“ｎａｖＴａｂ＇　

ｔｉｔｌｅ＝“确定要导出分页课题记录吗７“＞＜ｓｐａｎ＞导出ＥＸＣＥＬ＜／　

ｓｐａｎ＞＜／ａ＞　

除以上介绍之外。Ａｊａｘ链接扩展还可以在返回时使用　

ｃａｌｌｂａｃｋ（如ｃａｌｌｂａｃｋ＝“ｍｖｈｊａｘＤｅｌ”）属性自定义回调函数，　

供熟悉Ｊａｖａｓｃｒｉｐｔ的读者完成相关操作。　

页面效果（如图８所示）　

４　结语　

事实上，ＤＷＺ框架的功能远不止此，许多功能强大的组　

件（如ｓｕｇｇｅｓｔ＋ｌｏｏｋｕｐ＋主从结构等）及丰富的ＡＰＩ函数在文中　

图８数据导出　

并未涉及。也许是ＤＷＺ框架诞生时间并不长，除官方提供的　

手册和示例（基于ＰＨＰ和Ｊａｖａ后台）外，相关技术文档并不　

ｔａｒｇｅｔＴｙｐｅ＝”ｎａｖＴａｂ”表示根据当期ｎａｖＴａｂ页面中的　

ｐａｇｅｒＦｏｒｍ参数导出，如果设置为“ｄｉａｌｏｇ”则根据当期ｄｉａｌｏｇ　

多，并且其采用非“所见即所得”的方式来实现各种功能，也　

使一些初学者较难上手。希望通过上文的介绍能让读者对开源　

框架ＤＷＺ有所了解，并在项目中加以运用，特别是使用ＡＳＰ，　．

页面中的ｐａｇｅｒＦｏｒｍ参数导出。在Ｃｏｎｔｒｏｌｌｅｒｓ的ＥｘｐｔＳｕｂｊｅｃｔＸｌｓ　

方法中将接收客户端数据完成导出ｘｌｓ文件的操作：　

ＮＥＴ　ＭＶＣ做为后台的程序员。　

ｐｕｂｌｉｃ　ＡｃｔｉｏｎＲ　ｅｓｕｌｔ　ＥｘｐｔＳｕｂｊｅｃｔＸｔｓ（ｓｔｒｉｎｇ　ｐａｇｅＮｕｍ，ｓｔｒｉｎｇ　

ｎｕｍＰｅｒＰａｇｅ，ｓｔｒｉｎｇ　ｏｒｄｅｒＦｉｅｌｄ，　

ｓｔｒｉｎｇ　ｏｒｄｅｒＤｉｒｅｃｔｉｏｎ）　

｛　

ｓｔｒｉｎｇ　ｓｑｌＳｔｒ＝“ｓｅｌｅｃｔ　ｆｒＯｍ　ＴｂＲｓｉｎｆｏ　ｏｒｄｅｒ　ｂｙ“＋　

＿

参考文献　

【１】　

ＤＷＺ富客户端框架使用手册．

ｏｒｄｅｒＦｉｅｌｄ＋一＋ＯｒｄｅｒＤ＿ｒｅｃｔｉＯｎ：　

ｙ，等，著，冯飞译．ＡＳＰ，．ＮＥＴ　ＭＶＣ　１．０高　

【２】　

（美）Ｒｏｂ　Ｃｏｎｅｒ

级编程［Ｍ］．清华大学出版社，２０１０．　

（收稿日期：２０１２—０３—１４）　

ｓｔｒｉｎｇ　ｆｉｌｅＮａｍｅ＝Ｓｙｓｔｅｍ．Ｗｅｂ．ＨｔｔｐＣｏｎｔｅｘｔ．Ｃｕｒｒｅｎｔ．Ｓｅｒｖｅｒ．　

ｊ止　—　Ｌ．址　．址．喜　．址．Ｓｔ．ＳＩＬ　

．

（上接第２４页）　出版社

．

２００８．　

了工作效率；同时也使与备件相关的业务更加顺畅，提高了管　

理水平。　

【４】张洪举

芦桂章．ＳＱＬ　Ｓｅｒｖｅｒ２００５　Ａｔ１、进阶与应用实例　

北京：人民邮电出版社

２００８．　

，

．

王小科，梁冰，吕双．Ｖｉｓｕａｌ　Ｃ＃２００５程序设计自学手册．　

参考文献　

【１】施玉新，牛旭东．数据库原理及应用．北京：电子工业出　

版社．２００４．　

北京：人民邮电出版社．２００９．　

王晟．Ｖｉｓｕａｌ　Ｃ＃．ｎｅｔ数据库开发．北京：清华大学出版　

社．２００９．　

【２］管建军．软件工程．武汉：武汉大学出版社，２００８．　

【３】吴源．ＳＱＬ　Ｓｅｒｖｅｒ２００５数据库管理精讲．北京：电子工业　

（收稿日期：２０１２．一０３—１６）