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

第4章 项目界面设计4-5 主讲：许丽娟 本章主要内容 任务目标： 1.设计完成版库信息管理页面ModeStoreManagement.aspx.，最终运行界面效果如图。 2.用GridView组件实现数据记录编辑、分页功能； 3.在GridView中添加新的字段列，并且实现图片的绑定显示； 4.实现“下单”连接，调出“版库下单”页面； 5.学会GridView组件绑定ObjectDataSource的方法，并理解业务类的作用； 任务完成步骤： （1）打开ModeStoreManagement.aspx页面， 在已有的设计基础上，拖放Menu组件和GridView组件，并为Menu添加成员，如下图所示： (2)选择GridView组件，为其添加并编辑字段列，每个字段对应DataField属性值详见PPT下一页； (3)选择GridView组件，新建数据源，数据源类型为“对象”。 选择具体的业务对象中需要的update方法 (10)第二次运行测试，问题①解决，可以显示图片； (11)在该页面程序窗口编写程序如下： public partial class StoreManagement_ModeStoreManagement : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void RowSelected(object sender, EventArgs e) { GridViewRow row = GridMode.SelectedRow; Session[StyleNo] = row.Cells[2].Text; Response.Redirect(~/PurchaseManagement/ModeOrderManagement.aspx?OrderNo=0); } } (12)在脚本代码窗口注册RowSelected事件脚本： asp:GridView ID=GridMode runat=server AllowPaging=True AutoGenerateColumns=False DataSourceID=ObjectDataSource1 OnSelectedIndexChanged=RowSelected Width=715px PageSize=7 (13)第三次测试运行，问题②解决。 完成本节所有任务目标，大功告成! 总结问题： 1.设计中使用了哪些组件？你能在界面上快速找出来吗？ 2.用到了这些组件对象的哪些重要属性？ 3.学会模板的编辑方法了吗？ 4.掌握图片的绑定显示的方法了吗； 5.掌握页面间进行参数传递的方法了吗； 6.学会GridView组件绑定ObjectDataSource的方法，并理解业务类的作用了吗？ 以上问题答错2个，建议你参考课件重新做一遍！ * LOGO * LOGO 设计WEB应用系统界面的目的 1 WEB应用系统界面设计的要求 2 WEB应用系统界面设计的一般流程 3 版库管理信息页面的设计 4 版库管理信息页面的设计 4 版库管理信息页面的设计 4 版库管理信息页面的设计 4 版库管理信息页面的设计 4 版库管理信息页面的设计 4 PhotoNo 图片编号 MainBijouWeight 宝石重量 WareClass 商品种类 StyleNo 商品款号 WareSort 商品类别 ModeNo 样式编号 DataField属性值 字段名称 DataField属性值 字段名称 版库管理信息页面的设计 4 GridView组件每个字段对应DataField属性值 版库管理信息页面的设计 4 版库管理信息页面的设计 4 选择具体的业务对象名 版库管理信息页面的设计 4 选择具体的业务对象中需要的SELECT方法 版库管理信息页面的设计 4 版库管理信息页面的设计 4 (4)第一次测试运行，发现基本数据显示、编辑功能已经完成， 但是还存在以下问题： ①图片字段没有显示。 ②点击“下单”没有执行任何操作。 版库管理信息页面的设计 4 （5）选择GridView组件，进入字段编辑窗口，选择图片字段， 将其转换为模板； 版库管理信息页面的设计 4 （6）选择GridView组件，在任务栏中选择编辑模板； 版库管理信息页面的设计 4 （7）选择新增的字段，删除成员模板项和编辑项内容； 版库管理信息页面的设计 4 （8）从工具箱中选择