第4章项目界面设计(第五讲)

《第4章项目界面设计(第五讲)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章项目界面设计4-5主讲：许丽娟本章主要内容设计WEB应用系统界面的目的1WEB应用系统界面设计的要求2WEB应用系统界面设计的一般流程3版库管理信息页面的设计4任务目标：1.设计完成版库信息管理页面ModeStoreManagement.aspx.，最终运行界面效果如图。2.用GridView组件实现数据记录编辑、分页功能；3.在GridView中添加新的字段列，并且实现图片的绑定显示；4.实现“下单”连接，调出“版库下单”页面；5.学会GridView组件绑定ObjectDataSource的方法，并理解业务类的作用；版库管理信息页面的设计4版库

2、管理信息页面的设计4版库管理信息页面的设计4任务完成步骤：（1）打开ModeStoreManagement.aspx页面，在已有的设计基础上，拖放Menu组件和GridView组件，并为Menu添加成员，如下图所示：版库管理信息页面的设计4(2)选择GridView组件，为其添加并编辑字段列，每个字段对应DataField属性值详见PPT下一页；版库管理信息页面的设计4字段名称DataField属性值字段名称DataField属性值样式编号ModeNo商品类别WareSort商品款号StyleNo商品种类WareClass宝石重量MainBijouWei

3、ght图片编号PhotoNo版库管理信息页面的设计4GridView组件每个字段对应DataField属性值(3)选择GridView组件，新建数据源，数据源类型为“对象”。版库管理信息页面的设计4版库管理信息页面的设计4选择具体的业务对象名版库管理信息页面的设计4选择具体的业务对象中需要的SELECT方法版库管理信息页面的设计4选择具体的业务对象中需要的update方法版库管理信息页面的设计4(4)第一次测试运行，发现基本数据显示、编辑功能已经完成，但是还存在以下问题：①图片字段没有显示。②点击“下单”没有执行任何操作。版库管理信息页面的设计4（5）选

4、择GridView组件，进入字段编辑窗口，选择图片字段，将其转换为模板；版库管理信息页面的设计4（6）选择GridView组件，在任务栏中选择编辑模板；版库管理信息页面的设计4（7）选择新增的字段，删除成员模板项和编辑项内容；版库管理信息页面的设计4（8）从工具箱中选择Image组件到成员模板项；"~/StoreManagement/PhotoManagement/Getimg.ashx?id="+Eval("PhotoNo")版库管理信息页面的设计4（9）为Image组件绑定数据源，如下图所示；(10)第二次运行测试，问题①解决，可以显示图片；(11)

5、在该页面程序窗口编写程序如下：publicpartialclassStoreManagement_ModeStoreManagement:System.Web.UI.Page{protectedvoidPage_Load(objectsender,EventArgse){}protectedvoidRowSelected(objectsender,EventArgse){GridViewRowrow=GridMode.SelectedRow;Session["StyleNo"]=row.Cells[2].Text;Response.Redirect("~

6、/PurchaseManagement/ModeOrderManagement.aspx?OrderNo=0");}}版库管理信息页面的设计4(12)在脚本代码窗口注册RowSelected事件脚本：(

7、13)第三次测试运行，问题②解决。版库管理信息页面的设计4完成该页面设计版库管理信息页面的设计4打开以下文件，阅读相应代码段，思考业务类对象数据源工作的原理。了解图片数据字段的存储和显示方法；版库管理信息页面的设计4版库管理信息页面的设计4版库管理信息页面的设计4完成本节所有任务目标，大功告成!总结问题：1.设计中使用了哪些组件？你能在界面上快速找出来吗？2.用到了这些组件对象的哪些重要属性？3.学会模板的编辑方法了吗？4.掌握图片的绑定显示的方法了吗；5.掌握页面间进行参数传递的方法了吗；6.学会GridView组件绑定ObjectDataSource

8、的方法，并理解业务类的作用了吗？以上问题答错2个，建议你参考课件重新做一遍！YE