使用自定义标签来使会员中心添加界面模板化

作者:动易网络 来源:动易网络 点击数: 更新时间:2008年11月19日

      首先解释下使用自定义标签使会员中心的页面模板化:会员中心的页面可以灵活的通过自定义标签来对页面重新排版。虽然之前会员中心的界面也用到了模板,但这种模板只是一种框架模板,实际上页面内控件显示的位置还有样式都无法改变,现在有了自定义标签使会员中心的页面模板化,这样用户使用模板可以根据自己的需求改变会员中心界面样式,改变服务器控件(.NET控件、一些自定义控件和用户控件,前缀为asp:和pe:)位置,但不能去掉服务器控件,一旦去掉会产生错误。


 

     下面我们先来个简单的实例让大家大致了解下,就拿修改用户密码模板来说吧。

     首先在后台管理 >> 系统设置 >> 模板标签管理 >> 模板管理 >> 用户中心模板 新增一个会员中心修改密码模板,模板内容可以留空或者和默认会员中心通用模板一样。再看到 后台管理 >> 系统设置 >> 模板标签管理 >> 动态页模板配置 中的帐户管理选项下的修改用户密码模板:


图片点击可在新窗口打开查看

图1

 

     从图中看到修改用户密码模板使用的是默认会员中心通用模板,点击编辑,看到默认会员中心通用模板BODY部分和User/Info/Password.aspx页面部分内容如下:


图片点击可在新窗口打开查看
图2

     从上图可以看出程序是用{PE.Control.+页面控件ID+/}来替换成页面的中对应的控件。

     默认会员中心通用模板只实现了页面框架的模板化,但页面内的具体控件还没有实现,也就是页面中的<form id="form1" runat="server"></form>中的没有实现模板化。下面再来介绍现在怎么把FORM部分实现模板化。

回来动态页模板配置页,这里点击浏览找到刚刚添加的会员中心修改密码模板,再点击确定。


图片点击可在新窗口打开查看

图3

     修改用户密码模板就指定成会员中心修改密码模板了,点击编辑,修改成与默认会员中心通用模板一样,然后修改{PE.Control.form1/}部分,修改成如下图所示:


图片点击可在新窗口打开查看
图4



图片点击可在新窗口打开查看

图5

 

     图5中的红色框部分按照Password.aspx界面的控件顺序来排的话应该是在图4 里的table下,但这里进行重新排版,就实现是界面的改变,改变效果如下:

     没做模板化的界面:


图片点击可在新窗口打开查看
图6

 

     实现模板化之后,进行修改后的界面:


图片点击可在新窗口打开查看
图7


 

     图4和图5中实现了默认会员中心通用模板中的{PE.Control.form1/}内容,也就实现了会员中心界面的模板化。它的实现基本上就是界面中的服务器控件替换成自定义标签,页就是{PE.Control.+服务器控件ID+/}的形式。这样是要把界面中所有服务器控件替换成自定义标签的形式,建议全部替换成自定义标签,虽然有些服务器控件不被替换也不会对程序造成影响,但各位站长对我们界面中的服务器控件的关联性还不清楚,所以建议全部替换,避免造成不必要的错误出现。还有前面图2中所示的{PE.Control.YourPosition/}标签和{PE.Control.UserCenterNavigation/}标签是必须实现的,而且不能放到{PE.Control.form1/}标签中。

界面中的服务器控件如果包含子服务器控件的话那么标签的写法就是{PE.Control.+服务器控件ID+}XXX{/PE.Control. +服务器控件ID+},其中XXX部分就是其子服务器控件。在此模板中我们可以看到Form服务器控件(在界面中的Form称之为表单,但在这里为了方面理解也当作服务器控件来进行说明)的实现方式,以{PE.Control.form1}开始,{/PE.Control.form1}结束。在控件中如果包含子控件,也可以只实现父控件标签化,可以类似下面提到的默认会员中心添加信息模板中{PE.Control.ContentForm/}自定义标签。

      界面中如果存在javascript脚本,那么也需要把脚本复制到相应的位置,没有实现javascript脚本的话可能导致javascript脚本错误或者实现不了某些效果。如果站长懂得javascript脚本的话也可以自己根据现有脚本实现的效果修改javascript脚本,那么在页面浏览时将会是使用模板中的javascript脚本。


 

      下面再来说个复杂的界面实现模板化,就拿信息录入界面来说。

首先看到后台管理 >> 系统设置 >> 模板标签管理 >> 动态页模板配置 信息管理选项中的内容录入模板:


图片点击可在新窗口打开查看
图8

 

      点击编辑看到模板中BODY部分如下:
图片点击可在新窗口打开查看
图9

 

      模板中只实现了这么几个控件的标签化,但在实际浏览此界面时的内容比界面里的控件要多许多。为什么这个界面差别这么大呢?那是因为它对应的Content.pasx界面中ID为Field的pe:FieldControl控件,此控件和模型设置的字段有直接关联。模型中有那些字段此控件将会生成出什么控件。这里的模板只是对会员中心添加信息做一个总的模板,具体实现还得根据不同模型来编辑模板。

此模板中没有对界面中ID为ContentForm的pe:ExtendedRepeater控件下的子控件进行模板化。下面介绍下系统中的默认会员中心添加文章模板来说明怎样实现对界面中ID为ContentForm的pe:ExtendedRepeater控件下的子控件进行模板化。默认会员中心添加文章模板中{PE.Control.ContentForm}部分内容如下:


图片点击可在新窗口打开查看
图10


 

     此模板是根据文章模型默认的字段实现了添加文章信息的模板化。那么它的实现有什么规则呢?我们以红色部分为例来说明下。红色部分有三个不同的自定义标签,他们都是以{PE. +父控件ID + . +字段属性(除Control之外)+字段名称,字段属性就是模型中字段的字段别名、字段提示填这类东西,目前系统只实现对模型字段中的字段别名和字段提示作为模板中调用的属性。红色部分其中一个自定义标签是{PE.ContentForm.Labelfor.NodeId/},此标签是中的Labelfor就是代表模型中字段的字段别名,NodeId就是字段的名称。{PE.ContentForm.Tips.NodeId/}自定义标签中的Tips就是代表模型中字段的字段提示。还有{PE.ContentForm.Control.NodeId/}自定义标签,Control就代表模型中字段的字段类型。其中{PE.ContentForm.Control.+字段名称/}自定义标签是必须实现的。如果不实现将可能会产生应用程序中的服务器错误,导致页面无法浏览或者无法操作。此模型对应会员中心添加文章信息显示的效果了。

在后台管理 >> 系统设置 >> 内容模型管理 中修改文章模型,在会员中心用户发表信息页模板项中配置模板:


图片点击可在新窗口打开查看
图11

 

     默认模板的效果如图12:
图片点击可在新窗口打开查看
图12

 

     修改模板后的效果如图13:


图片点击可在新窗口打开查看
图13


 

关于使用自定义标签使会员中心模板话就介绍到这!

33444
本篇文章的Tags:    会员中心  
如果以上内容未能解决您的问题,欢迎您到我们的讨论区发帖寻求帮助,我们的工作人员会热情为您解答。