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&gt ;.然后,该指令将调用 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返回的元数据,建立一个角度正确理解并将其传递给角度指令的对象,并为我呈现表单.我知道这个答案可能是一个更长的时间,更多的例子等等,但我觉得这是很多阅读.我希望这给你足够的信息.

我很想让这个更通用和开放源代码 – 如果有兴趣在这样的工作,让我知道:-)

原文地址：https://www.jb51.cc/angularjs/140722.html

angularjs – 基于ViewModel的角色验证

相关推荐