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

1、第4章 项目界面设计4-3,主讲：许丽娟,本章主要内容,为普通用户提供访问系统的可视化窗口，使其通过界面访问WEB应用系统的一般信息和后台数据信息。 为WEB系统管理员用户提供维护管理系统的窗口。,布局合理,设计美观,满足用户访问需求,界 面 友 好,（1）创建页面 创建空页面。 用模板创建页面。 复制其他已经创建好的页面并修改。 添加已有页面并修改。 （2）页面布局 直接用表格套用技术进行页面布局。 用AJAX组件和表格套用技术进行页面布局。 （3）拖放组件 将工具箱中的组件根据需要拖放到实现布局定位好的位置。 （4）设置组件属性 通过属性窗口修改各个组件的属性。 （5）运行测试页面界面效果

2、,任务目标： 1.设计完成客户信息输入页面CustomerInfo.aspx，最终运行界面效果如图。 2.实现组合框DropDownList和数据表GridView组件的联动查询功能。,任务完成步骤： （1）在CustomerManagement文件夹目录下创建新页面CustomerInfo.aspx； （2）打开该页面，展开工具箱中AJAX工具 选择ScriptManager工具拖放到页面中； 选择UpdatePanel工具拖放到页面中ScriptManager工具下方。 （3）在UpdatePanel组件里面插入插入表格，设置表格所有内容的valign属性值为top;,（4）从工具箱中选择

3、导航类工具SiteMapPath拖放到表格第1行,并套用格式，并放置按钮、组合框组件; （5）如下图在指定行分别放置组件Panel1和Panel2；,(6)分别在Panel1和Panel2中各放置一个Gridview组件,如下图；,(7)选中界面上的组合框组件（ID为ddlCondition），从任务栏中为其建立数据源连接conn,选择数据表字段如下图所示;,(8)选择要在组合框中显示的字段数据为AsseciatorNo,并按照向导提示完成对组合框组件的数据绑定功能，所创建的数据源对象为SqlDataSource1;,(9)参考第7步骤，为GridView1组件创建数据源连接，选定同样7个字段

4、，创建的数据源对象为SqlDataSource2，选中SqlDataSource2，打开SelectQuery属性设置窗口，完成如下设置,(10) 为GridView2组件绑定数据源对象SqlDataSource1； （11）完成以上步骤，即可进行测试，完成简单查询功能！也可进一步进行下一步。 （12）在程序代码窗口，编写代码如下，完成代码编写后进行测试，看看效果有什么不同：,public partial class CustomerInfo : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) Panel1.Visible = false; protected void btnSearch_Click(object sender, EventArgs e) Panel1.Visible = true ; Panel2.Visible = false; protected void Button1_Click(object sender, EventArgs e) Panel2.Visible = true; ,完成本节2个任务目标，大功告成! 总结问题： 1.设计中使用了哪些组件？你能在界面上快速找出来吗？ 2.用到了这些组件对象的哪些重要属性？ 3.你学会实现组合框