vue-autoui自匹配webapi的UI控件的实现

[HobbyInput(Label = "爱好")] [Required("选择爱好", Type = "array", Trigger = "change")] public string[] Hobby { get; set; }
}

服务代码也没太多的变化，只是通过一些标签来标记一下相关属性的数据源和输入要求.具体运行效果如下:

数据列表

有应用中除了数据输出外更多的数据列表，

auto-grid

即是专门用于处理列表的一个控件，这个控件提供分页，选择，编辑和删除的功能；接下来做一个简单的雇员列表示例:

<auto-grid url="/employees" @completed="employees.get()"
      @itemchange="onItemChange"
      @itemdelete="onItemDelete"
      @command="onCommand"
      :data="employees.result"
      size="mini" height="100%"
      edit="true" delete="true">
</auto-grid>

这个列表提供编辑和删除功能，相关脚本

data(){
      return {
        employees: new beetlexAction('/employees', {}, [])
      }
    },
    methods: {
      onCommand(e){
        this.$open('models-employee', e.data);
      },
      onItemChange(item){
        if (confirm('是否要修改' + item.data.FirstName + '?')) {
          item.success();
        }
      },
      onItemDelete(item){
        if (confirm('是否要删除' + item.data.FirstName + '?')) {
          item.success();
        }
      },
    },
    mounted() {
    }

接下来的工作就是在服务端定义

api

来输出结果

[Column("FirstName", Type = "link")]    [Column("LastName", Read = true)]    [Column("Title")]    [Column("HomePhone")]    [Column("City")]    [Column("Address")]    public object Employees()
    {
      return DataHelper.Defalut.Employees;
    }

动态查询

实际应用中需要提供查询条件输入，这个时候就可以把

auto-form

和

auto-grid

整合起来，以下通过一个简单的订单查询来展示这两个控件结合使用

<auto-form url="/orders" v-model="orders.data" @completed="orders.get()" size="mini" @fieldchange="orders.get()">
  </auto-form>
  <auto-grid url="/orders" height="300" :data="orders.result.items" :pages="orders.result.pages" :currentpage="orders.result.index" @pagechange="onPageChange" size="mini">
  </auto-grid>

可以在