angularjs – 基于ViewModel的角色验证
我想要一个包含验证规则的
JavaScript视图模型对象,类似于具有数据注释的ASP.NET MVC视图模型,可以绑定到Angular视图.然后,我会喜欢在该对象的生命周期的某些阶段调用Validate方法,然后将其发布到服务器.
这将允许我保持接近一个类似MVVM的方法,其中UI是相当轻的,而不是sooo聪明,视图模型,无论视图模型,由视图表示,需要更改视图标记以更改验证规则. 这样,我甚至可以利用MVC的数据注释,在服务器上构建一个可序列化的视图模型,并将该模型和所有的验证等都返回给客户端. 通过指令实现的每个元素/模型属性验证,我应该如何在Angular中实现这种类型的验证?
我已经实施了一些可以帮助您处理最近的项目.我们在前端使用AngularJS,在后端使用ASP.NET WEB API.所有HTML表单都是根据POCO类中包含的属性和数据注释自动生成的.
在服务器端我有实体和DTO.我的实体包含数据库特定注释,DTO包含我的视图特定注释.我会给出一个简单的例子,显示一个类中的一个属性,以及如何渲染UI的UI.以下是服务器端对象: public class Discount { [StringLength(40)] [Required] public String Name { get; set; } } public class DiscountDto : IDto<Discount> { [Display(ResourceType = typeof(ApplicationStrings),Name = "Name",ShortName = "Name_Placeholder")] [UI(Row = 1,Width = 6)] public String Name { get; set; } } 该属性在UI上呈现如下: <div class="form-group"> <label class="col-sm-2 control-label"> Name: </label> <div class="col-sm-6"> <input class="form-control" ng-model="model[options.key]" required="required" maxlength="40" placeholder="Enter the name..."> </div> </div> < input />字段具有自动设置所需的占位符和最大长度属性. HTML标签,引导列宽度也根据自定义UI数据注释自动设置. Row = 1表示首先以窗体显示该字段,Width = 6表示字段应占用6:class =“col-sm-6”的列宽.标签文本和占位符文本从资源文件中提取. 我创建了一个Controller MetaController,它以DTO的名称作为参数:api / Meta / DiscountDTO.该控制器简单地循环DTO对象和关联实体上的所有属性,并拉出数据注释,将其转换为FormMetadata类并返回List< FormMetadata>给客户FormMetadata类只包含IsRequired,IsDisplayed,IsReadonly等等属性,只是为了将注释转换为前端开发人员更易读的东西.这是MetaController的一个代码段: var type = Type.GetType("<DTO_goes_here>"); List<FormMetadata> formMetadata = new List<FormMetadata>(); foreach (var prop in type.GetProperties()) { var metadata = new FormMetadata(); metadata.Key = prop.Name.ToLower().Substring(0,1) + prop.Name.Substring(1,prop.Name.Length - 1); metadata.Type = prop.PropertyType.FullName; object[] attrs = prop.GetCustomAttributes(true); foreach (Attribute attr in attrs) { if (attr is RequiredAttribute) { metadata.IsRequired = true; } else if (attr is StringLengthAttribute) { var sla = (attr as StringLengthAttribute); metadata.MinLength = sla.MinimumLength; metadata.MaxLength = sla.MaximumLength; } // etc. } formMetadata.Add(metadata); } 此端点将为Name属性返回以下JSON: { "$id":"3","key":"name","display":"Name","type":"System.String","placeholder":"Enter the name...","isRequired":true,"isEditable":true,"isDisplayed":true,"isReadonly":false,"displayInList":true,"width":6,"row":1,"col":0,"order":0,"maxLength":40,"minLength":0,"lookup":null,"displayAs":null } 在客户端,我创建了一个自定义Angular指令< entity-form />以DTO的名义作为参数,如下所示: < entity-form entity-type =“DiscountDTO”>< / entity-form> ;.然后,该指令将调用MetaController获取Discount实体的验证规则,并根据返回的规则呈现表单.为了渲染表单,我使用了一个名为angular-formly的真棒库.该库允许从javascript创建表单,而无需编写任何HTML.我不会在这里得到关于角度的太多细节,但是您基本上创建一个具有要渲染的表单细节的Javascript对象,并将其传递给一个有角度的指令,并且它会处理渲染表单您.这是您通过角度转换以呈现< input />的对象类型的基本示例.带有“文本”标签的框: { "key": "text","type": "input","templateOptions": { "label": "Text","placeholder": "Type here to see the other field become enabled..." } } 所以,我基本上是从MetaController返回的元数据,建立一个角度正确理解并将其传递给角度指令的对象,并为我呈现表单.我知道这个答案可能是一个更长的时间,更多的例子等等,但我觉得这是很多阅读.我希望这给你足够的信息. 我很想让这个更通用和开放源代码 – 如果有兴趣在这样的工作,让我知道:-) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |