web程序中有时候更新非常频繁，这时候往往页面缓存会出来捣乱，让你分不清是否程序真实响应页面。

禁止页面缓存

<meta http-equiv=Pragma content=no-cache>
<meta http-equiv=Cache-Control content=no-cache>
<meta http-equiv=Expires content=0>

asp  <% Response.Expires = 0 %>

我试了一下，似乎不是百分百管用……都用上好了

好多vs.net下的工程是用source safe进行版本控制的，但是经常会有种种问题。比如换机子或者把文件拷贝回家做的时候，有时候修改了代码还保存不了……

等等琐事，很是让人厌烦，所以想把他去掉。

要做如下操作：

·去掉项目中的.scc、.vssscc和.vspscc文件；

·去掉C#项目文件(.csproj)里面几行标签:
SccProjectName =”SAK”
SccLocalPath =”SAK”
SccAuxPath =”SAK”
SccProvider =”SAK”

·去掉解决方案文件(.sln)中的下面节点
GlobalSection(SourceCodeControl) = preSolution
SccNumberOfProjects = 4
SccLocalPath0 =
…
CanCheckoutShared = false
EndGlobalSection

6.典型交互模式

界面交互中，根据功能不同，有不同的交互方式。应该尽量提取抽象，尽可能减少交互模式的种类，或者把交互方式尽可能设计的类似，以方便用户快速熟悉系统。

下面列举3个系统中比较典型的交互模式，供大家参考。

单项选择

多项选择

项目分解（GIF动画 4桢）

7.Demo开发

Demo是详细设计阶段的重要成果之一，在对系统进行详细的分析设计之后，开发出界面Demo原型，主要作用是提供给合作客户，在基本功能、系统组成和易用性上进行测试。

本系统的Demo主要包括界面的设计制作，和部分客户端表现层脚本的开发。为了在后面的实际业务开发中尽可能获得重用，Demo的制作在页面规范、CSS样式定义和JS脚本编写方面都严格遵循了系统开发规范，并在以后的代码编写工作中严格执行。

本系统整个Demo包括大约50个页面，耗时月3周。

在后续的开发过程中，仍然要严格控制整个开发过程，保证整个系统界面的统一，并随时维护更新系统界面的设计。

8.结语

太长了……需要对以前很多东西进行回顾，实在很困难。很多细节，包括很多设计、技术上的东西，都已经记忆不清了，文章也显得有些紊乱。

因此，如果大家有什么疑问，或有意见、指正，请提出或来信与我交流。

5.典型界面

以下是系统中几个比较典型的界面模型。

在整个系统界面的设计过程中，需要注意整个系统的统一，设计风格要一致，界面中的交互元素，从色彩、样式到排版方式、具体位置都要具备延续性，这样才能使用户尽快习惯整个系统操作。

4.主界面设计

设计主界面，确定系统基本风格，是概要设计中的工作之一。首页主界面的主要实现功能是导航，它要达到的目的，是尽可能使用户仅通过首页面板就可以完成所有常规任务。

该主界面包含以下部分

用户信息区域 显示当前用户信息

用户导航区域 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板

用户导航功能树 用户页面导航，收藏功能可以将当前功能页面收藏到快捷功能面板

功能树隐藏 可水平扩展页面空间

2.需求分析

在需求分析阶段，主要针对界面交互相关问题，对用户进行若干调研。

主要包括以下内容

早在中国IT业方兴未艾之时，计算机应用系统主要以功能实现为主，几乎没有界面设计这个概念。时至今日，随着计算机和网络的不断普及，社会信息化程度日益加深，用户和市场的不断成熟，人们已经不仅仅满足于“够用”，而是更加强调“好用”“易用”；因此，不论是普通最终用户的个人软件，还是企业应用的大型系统，界面设计在系统构建中都成为了一个非常重要的方面。

但是，（至少在中国）由于IT业发展滞后、市场还不够成熟等原因，在绝大多数企业中，界面设计在软件系统开发中还没有获得与之重要性相匹配的一席之地，并且在企业运作和协调中也没有形成成熟的模式和解决方案，如何做好界面设计和开发，仍然是大家不断研究探讨的一个问题。

我写这篇文章，主要内容是我参加一个面向质检行业的Web系统界面设计和开发工作的过程，包括其间的一些构思和想法；希望能和大家一起探讨一下这个问题，供大家参考。

另外，我同时承担了系统开发和界面设计工作，所以，虽然这是一篇讨论界面设计的文章，我会尽量把文章限制在界面设计范围内，但也有可能包含一些开发和系统设计的内容，请大家辨析清楚，欢迎指正。

1.工作流程

下图，是整个开发过程中与界面设计相关的主要流程工作。

从最初需求分析开始，我就加入项目，自始自终参加整个开发过程。
在需求分析阶段，参与了对客户的访问和调研；
在概要设计阶段，参与了部分系统设计分析工作；
在详细设计阶段，完成了整个系统界面设计和Demo制作，并提交用户反馈；
在代码开发阶段，参与了系统表现层的设计开发。

在Web系统开发中，我们经常需要读取和设置一些系统配置项，常见的例如数据库连接字符串、上传路径等等。

在最初的ASP系统中，比较常用的方法是将值保存为Application或Session变量；在Asp.net系统中，目前比较常见的简单方法是把相应的配置项写入Web.Config中，例如

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.web>
...
</system.web>

<appSettings>
<add key="ConnectionString" value="server=(local);database=dbname;uid=user;pwd=pass"/>
</appSettings>
</configuration>

然后在程序中通过如下方式读取

string connString = ConfigurationSettings.AppSettings["ConnectionString"];

这种方法在系统规模较小复杂度较低的时候也不失为一种简单明了的轻量级方法，不过如果系统较复杂，配置项会较多，同时我们需要按不同模块对配置进行划分，并且还希望能以面向对象方法来对其进行封装，那么如果仍然采用这种过于简化方式就不太合时宜了。

下面，我讲述一下通过XML类序列化解决系统配置问题的方法。

关于XML类序列化和反序列化(另外一种描述是串行化和并行化)的技术细节，大家可以查看MSDN了解；这里简单讲两句，XML序列化是把一个对象序列化到XML文档的过程，反序列化则是从XML输出中重新创建原始状态的对象。

直观表现就是如下图模式

看了这个图，就很清楚了，通过序列化，可以采用面向对象的方法，非常自然和方便的读取和设置系统配置；.NET Framework承担了对象和XML文件映射工作，我们只需要简单的使用就OK。下面我们讲一下具体内容。

上面图示已经表明，首先需要一个XML配置文件，格式内容如上图，具体配置项可以自行增减。

然后我们需要编写一个类，如上图所示；特殊的一点，为了使类能够实现XML序列化，需要在类的所有属性声明前添加属性信息XmlElement，如下所示。

[XmlElement]
public string ConnectionString
{
   get { return connectionString; }
   set { connectionString = value; }
}

由于AppConfig类本身没有实现方法，因此我们需要一个配置类AppConfigSetting.cs。类的结构很简单，只需要两个静态方法，Get()获取AppConfig对象，Save()保存AppConfig对象。

另外，我们需要在 Web.Config中添加该XML配置文件的地址。

<appSettings>
  <add key="AppConfigPath" value="/FilePath/file.config"/>
</appSettings>

public class AppConfigSetting
{
   //获取配置对象
   public static AppConfig Get()
   {
      //尝试获取缓存中的对象
      AppConfig config = (AppConfig)HttpContext.Current.Cache["AppConfig"];

      //如果缓存中没有该配置对象，则直接获取对象
      if (config == null)
      {
         //新建序列化对象并指定其类型
         XmlSerializer serial = new XmlSerializer(typeof(AppConfig));

         try
         {
            string file = HttpContext.Current.Server.MapPath(GetFile());

            //读取文件流
            FileStream fs = new FileStream(file, FileMode.Open);

            //文件流反序列化为对象
            config = (AppConfig)serial.Deserialize(fs);

            fs.Close();

            //将对象加入到缓存中
            HttpContext.Current.Cache.Insert("AppConfig",
                        config, new CacheDependency(file));
         }
         catch (System.IO.FileNotFoundException)
         {
            config = new AppConfig();
         }
      }

      return config;
   }

   //保存配置对象
   public static void Save(AppConfig config)
   {
      string file = HttpContext.Current.Server.MapPath(GetFile());
      XmlSerializer serial = new XmlSerializer (typeof(AppConfig));

      FileStream fs = new FileStream(file, FileMode.Create);

      //对象序列化为文件
      serial.Serialize(fs, config);
      fs.Close();
   }

   //获取配置文件路径
   private static string GetFile()
   {
      string path = (string)HttpContext.Current.Cache["FilePath"];

      if (path == null)
      {
         path=ConfigurationSettings.AppSettings["AppConfigPath"];
         HttpContext.Current.Cache["FilePath"] = path;
      }
      return path;
   }

}

类的使用非常简单，基本方式如下

//代码仅为使用演示
AppConfig config = AppConfigSetting.Get();

string connString = config.ConnectionString;

...

config.ConnectionString = connString;
AppConfigSetting.Save(config);

看到这样的代码，不禁有令人赏心悦目之感；相对于原来的直接读取AppSetting，可谓解脱矣！

OK，就此结束了。这篇文章只涉及对象序列化的非常简单的应用，没有涉及太多的技术原理和细节，大家要深入了解请参考MSDN。

希望文章能对大家有所补益和启发。

测试源代码工程文件下载(Visual Studio.net 2003)

界面交互

在XML中一共定义了 select/ input_ColorSelect / input_SizeSelect / input_BorderSelect（后3种为颜色/大小/边框输入模式）共4种输入模式，除select为直接选择外，其他在对应控件初始化的时候作为class属性赋值到控件中，类似class代码如下

/* 颜色输入模式input框的样式类 */
.input_ColorSelect
{
	width:100px;
	font-family:Tahoma;
	behavior:url(htc/effColorSelect.htc);
}

通过behavior属性，把该输入控件和相应的组件相关联，该组件effColorSelect.htc代码如下

<public:ATTACH EVENT="onfocus" ONEVENT="getShow()"/>
<public:METHOD NAME="getChange"/>

<script LANGUAGE="JScript">
function getShow()
{
element.blur();

//记录当前交互控件的ID 
effElement=element.id;

//在页面中加载输入控件
ShowControl ("SelectColor");
}

function getChange()
{
//当值发生变化时，对可视化样式元素赋值
SetAttribute(element.id,element.value);
}
</script>

其他

设计器中的值输入模式框只是页面中的几个层，通过上面的htc组件触发显示出来，输入后再把值传入到样式属性控件中，同时也会设置可视化样式元素。

另外还需要注意的是，XML文档是可以自行扩展或缩减的，但是在实际应用中，不能完全依据CSS标准来定义，因为可视化元素的style属性会自动格式化。例如如果你在XML中定义border-bottom-width属性，在将值取出时会自动格式化为border-bottom，这样会造成设计器中控件不能匹配。我在MSDN没有查到相关文档，所以只有经过实际测试来验证。

OK,比较关键的代码已经差不多了……希望能对大家有所帮助。
参考

另外再列出部分技术参考，如果大家对其中的技术细节如HTC和XmlDom等有所疑问，可以再详细研究一下，也欢迎大家来和我交流。

MSDN关于JS操作XmlDom的文档

这是英文文档,网上没有看到比较详细的中文文档,好在不复杂,大家将就一下吧

(最近MSDN不知道什么毛病，经常访问有问题，如果无法访问，请先登录msdn，再输入地址浏览)

蓝色理想的HTC教程

网上也没看见比较全面的讲述，这个简单易学,基本概念清楚了。

设计器初始化

Js脚本读取解析样式元素的style属性值，然后为设计器中构建的控件赋值

//设计器初始化
function Init()
{
   //获得由服务器端赋值的样式属性值
   var txt=document.all("DemoShow").style.cssText;

   if (txt.length>0)
   {
      var strClassName;

      //解析字符串
      var aryClass = txt.split(/[:;]/);

      for( i in aryClass)
      {
         var str = aryClass[i].replace(/(^s*)|(s*$)/g, "");
         if(!(i%2==1))
         {
            //当i为奇数时，解析的字符串应该为样式属性名称
            strClassName=str;
         }
         else
         {
            //当i为偶数时，获得属性值

              //属性名称即控件ID
            //判断该属性对应的控件是输入框还是选择列表
            if(document.all(strClassName).type=="select-one")
            {

               //如果是选择列表通过setIndexOfValue函数设定选择项
               setIndexOfValue(strClassName,str);

            }
            else
            {
               document.all(strClassName).value=str;
            }
         }
         i++;
      }
   }
}