创建和维护 ASP.NET 站点的最好方法可能是对 MForm Web控件的介绍

分享于 

18分钟阅读

Web开发

  繁體

源代码

本文描述的项目是在 mform.codeplex.com. 托管的,你将在这里找到最新版本的( 该项目最近更新) 但是,如果链接失败,你可以始终下载本地副本- 3.42 MB。

内容

简介

很可能你已经看到了 <报价/> 可能是世界上 </quote/> 产品的最好啤酒。 更少的机会是你已经听说过 MForm站点控件。 如果你与我一样,一个web开发人员在编写收集和处理数据的web表单时,你可能会发现。

项目背景

MForm Web控件项目开始于,部门,波兰,一个我工作的地方,最近在,public 许可以证下发布。 如果你曾经申请贷款或者贷款,你已经知道银行想尽可以能多地了解客户的风险。 所有这些数据都由银行顾问在银行应用程序的内部网中与客户端联系。

然后,银行开发人员的职责是:

  • 为业务部门要收集的信息定义数据契约( 数据结构和数据限制) ;
  • 根据数据协定创建一个收集数据的web表单( 或者多个网页表单) ;
  • 根据数据限制,验证网页中的字段;
  • 将字段中的数据合并到数据结构中。

最后,数据被发送到其他地方,在那里它用来决定客户端。

所以,所有这些任务看起来都可以自动部分地自动完成。 方法可以直接从数据契约( 在我们的例子中,数据契约是使用 XML Schema 定义的) 生成,也可以从数据契约中获取验证( 最基本的是检查字段需求。最大长度。匹配 Pattern 或者最大值),最后可以自动完成数据的组合。

但是,解决方案必须具有足够的扩展性才能实现:

  • 允许在生成后可视化修改所创建的窗体;
  • 允许添加与数据验证工作相同的自定义业务验证;
  • 使创建表单的过程尽可以能简单,因这里甚至一个经验不良的开发人员至少能准备web表单草图;
  • 高效和使用AJAX消除不必要的回发;
  • 尽可能使用通用 ASP.NET 控件和解决方案;

生成你的第一个 MForm web窗体

你也可以观看下一步的视频,在这里收费

1获得合同

为了能够生成表单,首先需要有数据定义。 如果在 XML Schema ( 作为 XML Schema 提供了一种方式,以声明方式定义代码中当前不可用的数据限制) 中有这些定义,但是如果不熟悉XML模式,也可以从托管库生成表单。

在下面的示例中,我们将使用客户的数据定义:

客户有:

  • 第一个和最后一个名称,不能超过 20个字符,
  • 国家身份证
  • 出生日期( 类型日期)
  • 性,只能是'男声'或者'''
  • 地址,包括:
    • 最大长度 100的街道
    • 最大长度 10的房屋号,
    • 平面数字,这是可选
    • post代码,它必须为2 位数字- 3 位数字
    • 最大长度 50城市。

假设已经下载了项目代码,你将在 BM.Tools.WebControls.MForm.Example/Schemas/Customer.xsd 文件中找到客户数据定义。

2使用 MForm root 控件创建页面

  • 在 Visual Studio 2008中打开项目。
  • 创建新项目-> Web内容表单 BM.Tools.WebControls.MForm.Example 项目。
  • 选择 Site.Master 作为母版页。
  • 页面将打开,并将如下所示:
<%@PageTitle=""Language="C#"MasterPageFile"~/Site.Master"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"Inherits="BM.Tools.WebControls.MForm.Example.WebForm1"%><asp:contentrunat="server"contentplaceholderid="ContentPlaceHolder1"id="Content1"></asp:content>
  • switch 设计模式。
  • 在工具箱中查找 Root 控件。
  • 删除页面上的Root 控件。 它应该是这样的:

  • 设计师模式改为 Edit

3单击 load从架构加载 root 模板

你将看到生成器窗体:

4选择合同来源和位置

单击选择,然后选择 XML Schema。WSDL或者程序集文件。 然后,单击打开元素名称下拉列表将使用可用元素( 一个 XML Schema 文件可能有多个元素定义,同一个程序集可能有多个类) 进行传播。

5选择元素

从下拉列表中选择其中一个元素后,将显示元素树。 你有可能决定应该在表单中呈现哪些定义。 默认情况下,整个树为 prepared。 若要更改这里选项,请取消选中元素旁边的复选框:

6单击生成

单击生成后,Root 控件将填充内容。 在 root 设计器模式更改为视图模式,以便你可以看到结果( 设计器模式中的呈现不完美,实际的页显示可能会有所不同):

generation_7.png

7.switch 到源视图

生成的表单在源视图中可用,可以自由修改。 我们将进一步查看生成的代码:

<%@PageTitle=""Language="C#"MasterPageFile="~/Site.Master"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"Inherits="BM.Tools.WebControls.MForm.Example.WebForm1"%><%@RegisterAssembly="BM.Tools.WebControls.MForm"Namespace="BM.Tools.WebControls.MForm.Controls"TagPrefix="mf"%><%@RegisterAssembly="BM.Tools.WebControls.MForm"Namespace="BM.Tools.WebControls.MForm.Controls.Additions"TagPrefix="mfadd"%><%@RegisterAssembly="BM.Tools.WebControls.MForm"Namespace="BM.Tools.WebControls.MForm.Controls.ValueHandlers"TagPrefix="mfvh"%><asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"runat="server"><mf:RootID="Root1"runat="server"Name="Root1"><UriMappings><mf:UriMappingNamespace="http://www.w3.org/2001/XMLSchema"Prefix="xs"/><mf:UriMappingNamespace=""Prefix=""/></UriMappings><Contents><mf:Branchrunat="server"Name="Customer"><Contents><mf:Leafrunat="server"Name="FirstName"Ordinal="1"><Additions><mfadd:Restrictionrunat="server"RestrictionType="MaxLength"Value="20"/></Additions></mf:Leaf><mf:Leafrunat="server"Name="Surname"Ordinal="2"><Additions><mfadd:Restrictionrunat="server"RestrictionType="MaxLength"Value="20"/></Additions></mf:Leaf><mf:Leafrunat="server"Name="Sex"Ordinal="3"><ValueHandler><mfvh:ListBoxValueHandlerrunat="server"Value=""><ListBoxRows="1"><asp:ListItemValue="Female">Female</asp:ListItem><asp:ListItemValue="Male">Male</asp:ListItem></ListBox></mfvh:ListBoxValueHandler></ValueHandler></mf:Leaf><mf:Leafrunat="server"Name="NationalId"Ordinal="4"></mf:Leaf><mf:Leafrunat="server"DataType="Date"Name="BirthDate"Ordinal="5"></mf:Leaf><mf:Branchrunat="server"Name="Address"Ordinal="6"><Contents><mf:Leafrunat="server"Name="Street"Ordinal="1"><Additions><mfadd:Restrictionrunat="server"RestrictionType="MaxLength"Value="100"/></Additions></mf:Leaf><mf:Leafrunat="server"Name="HouseNumber"Ordinal="2"><Additions><mfadd:Restrictionrunat="server"RestrictionType="MaxLength"Value="10"/></Additions></mf:Leaf><mf:Leafrunat="server"MinOccurs="0"Name="FlatNumber"Ordinal="3"><Additions><mfadd:Restrictionrunat="server"RestrictionType="MaxLength"Value="10"/></Additions></mf:Leaf><mf:Leafrunat="server"Name="PostCode"Ordinal="4"><Additions><mfadd:Restrictionrunat="server"RestrictionType="Pattern"Value="d{2}-d{3}"/></Additions></mf:Leaf><mf:Leafrunat="server"Name="Post"Ordinal="5"><Additions><mfadd:Restrictionrunat="server"RestrictionType="MaxLength"Value="50"/></Additions></mf:Leaf><mf:Leafrunat="server"Name="City"Ordinal="6"><Additions><mfadd:Restrictionrunat="server"RestrictionType="MaxLength"Value="50"/></Additions></mf:Leaf></Contents></mf:Branch></Contents></mf:Branch></Contents><ValidatorPlacement="BeforeContent"></Validator></mf:Root></asp:Content>

在ASPX中生成的代码首先看起来有些吓人。 已经产生了相当多的数据。 当然,除非你想改变生成的代码,否则你不需要理解所有生成的代码。

Root 控件内部有三个元素:

  • UriMappings
  • Contents
  • Validator
UriMappings

UriMappings 元素将有关前缀和命名空间映射的数据保存在数据定义中。 对于我们的示例,没有使用命名空间,因此只有一个映射,一个空前缀映射到一个空名称空间。

验证器

Validator 元素负责显示表单验证错误。 它将MForm树插入 ASP.NET 页面验证机制中。

内容属性

最后,Contents 元素是 Root 控件中最重要的部分。 Contents 属性是在页面呈现上实例化的模板,因此它可能包含任何有效的ASPX脚本代码: HTML代码,网页控件,等等。 默认情况下,它只包含生成的控件。 你可以看到带有属性 CustomerBranch 控件。 这里控件还具有 Contents 属性,该属性再次可能包含任何ASPX脚本代码。

分支和叶

Branch 控件是表示具有子控件的数据定义的控件。 收集文本的数据定义由 Leaf 控件表示。 Leaf 控件不包含 Contents 属性。 它们可能包含 ValueHandler 元素,它提供MForm树与应该实际收集数据的控件之间的通信。

值处理程序

默认情况下,使用 TextBox es收集所有数据,因此默认值处理程序为 TextBoxValueHandler。 MForm框架为通用. NET 窗体Web控件提供了值处理程序。 如果要使用自己的自定义控件来使用MForm框架,则必须为该控件实现值处理程序。

一个不同值处理程序的示例位于名为 SexLeaf 中。 数据定义仅允许这里元素中的两个值: "男性"或者"女性"已经被移植到表单中作为 ListBox 控件,它的中包含两个相应的列表项。 如果希望使用 RadioButtonList 而不是 ListBox,可以将值处理程序更改为 RadioButtonListValuehandler,并将它的内部控件更改为 RadioButtonList

数据类型

你记得客户数据定义有一个 BirthDate 字段,它是 date 类型的。 现在可以看到 BirthDate 叶具有值 date的属性 DataType。 声明这里字段数据必须以有效的日期格式提供。

添加

可以找到的另一个定义是:控件为 AdditionsAdditions 可能包含从 Addition 控件中 inherit的控件列表。 Addition 控件向MForm控件添加一些逻辑;例如它可以添加数据约束。 生成后可以直接找到的Addition 控件是从 XML Schema 获取的数据限制。 所以,如果在我们的数据协定中,PostCode 字段必须对 Pattern 进行 MATCH: 2位数字,我们将在一个名为 PostCode的叶子中添加限制类型为 Pattern{2} -d {3}

Ordinal属性

最后一个值得解释的是 Ordinal 属性。

MForm网页控件旨在最大程度地促进创建网页表单,但仍然可以在生成表单后编辑这些窗体。 如果我们不能将生成的MForm孩子到他们的父母,我们可以随意修改生成的表单。

因此,inside 属性的Contents 属性允许:

  • 添加一些HTML代码或者控件;
  • 将MForm子控件 inside 放置为这些添加的控件(。比如,所有的Leaf 控件都可以放置在一个上) ;
  • 提取生成代码的一部分并将它的放入外部用户控件中,并添加对该控件 inside Contents的引用;
  • 更改MForm同级的顺序。

当从MForm控件树创建输出XML时,会考虑两个因素:

  • XML节点的层次结构- 如果MForm子级不在它的父级之外移动,MForm层次结构仍然是有效的。
  • 由于可以更改控件的顺序,因此可以生成 Ordinal 属性。 呈现输出XML时,MForm控件按 Ordinal 属性值排序,后者断言XML节点的顺序是有效的。

如果不关心XML节点( 比如,在大多数情况下,使用. NET XmlSerializer 类反序列化XML完全忽略XML节点的顺序)的顺序,可以在"选项"选项卡中关闭生成器中的Ordinal 属性。

8运行页面

向页面添加 ASP。Button。 然后将它的设置为开始页并运行项目。 你将看到表单工作并被验证。 你还可以看到在回发期间数据是持久的。

默认情况下,每个限制都有一个默认错误文本显示在。 如果要自定义显示的错误文本( 在示例 上面 中,通知不匹配的正则表达式对于大多数用户来说不太方便),只需设置限制属性的ErrorText

获取表单中的OutputXml 控件后,将获得符合我们生成表单的的XML文件。 这比单独处理每个字段要方便得多。 获取 OutputXml 属性不需要验证表单。 因此,如果单击了没有验证的按钮,则表单 上面的输出XML将是:

<?xmlversion="1.0"encoding="utf-16"?><Customer><FirstName>Andrew</FirstName><Surname>Broomstick</Surname><NationalId>APD400003</NationalId><BirthDate>1979-03-01</BirthDate><Address><Street>Universal</Street><HouseNumber>34</HouseNumber><PostCode>00-33</PostCode><Post>Warsaw</Post><City>Warsaw</City></Address></Customer>

下一步是什么?

我将尝试发布更多关于 MForm Web控件的文章。 这个项目还处于alpha阶段,但是我们非常接近我们的第一个稳定版本。 在此之前,欢迎使用 BM.Tools.WebControls.MForm.Example 项目熟悉 MForm Web控件。 你可以在 mform.codeplex.com. 提交 Bug 和评论,你也可以在 mform.org 页面看到示例项目。

历史

  • 2009-07-19本文的初始版本。
  • 2009-07-20添加了一个视频链接,按照本文中描述的步骤进行。
  • 2009-07-21添加了源代码的本地副本,将内容添加到页面。
  • 2009-07-24在运行页面时添加了一个屏幕和输出 XML。

WEB  INT  控制  for  asp-net  form  
相关文章