update

Former-commit-id: 2cc543e0f6e564301ad3c2ae53f9d267e138437b
Former-commit-id: ae4c57eac631b35d67eb23c1949665ec7e9bcc71

projects/Infrastructure/Extensions/ControllerExtensions.cs

@@ -109,15 +109,30 @@ namespace Infrastructure.Extensions
                 {
                     json.title = metadata.DisplayName;
                 }
+                if (metadata.IsRequired)
+                {
+                    if (metadata.ModelType != typeof(bool))
+                    {
+                        json.required = true;
+                    }
+                }
                 foreach (var attribute in metadata.Attributes.Attributes)
                 {
                     if (attribute is DescriptionAttribute descriptionAttribute)
                     {//description
                         json.description = descriptionAttribute.Description;
                     }
+                    else if (attribute is RequiredAttribute requiredAttribute)
+                    {
+                        json.required = requiredAttribute.ErrorMessage;
+                    }
                     else if (attribute is RegularExpressionAttribute regularExpressionAttribute)
                     {//pattern
-                        json.pattern = regularExpressionAttribute.Pattern;
+                        json.pattern = new
+                        {
+                            regex = regularExpressionAttribute.Pattern,
+                            message = regularExpressionAttribute.ErrorMessage
+                        };
                     }
                     else if (attribute is DataTypeAttribute dataTypeAttribute)
                     {//format

projects/Infrastructure/Web/Mvc/CrudController.cs

@@ -5,6 +5,7 @@ using Infrastructure.Extensions;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.Controllers;
 using Microsoft.AspNetCore.Mvc.Filters;
+using Microsoft.AspNetCore.Mvc.ModelBinding;
 using Microsoft.EntityFrameworkCore;
 using Newtonsoft.Json;
 using Newtonsoft.Json.Serialization;
@@ -293,6 +294,7 @@ namespace Infrastructure.Web.Mvc
                 {
                     schema = this.GetJsonSchema<TEditModel>(),
                     model,
+                    errors = ModelState.Where(o => o.Value.ValidationState == ModelValidationState.Invalid),
                     data = ViewData
                 }, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() });
             }

projects/WebMVC/libman.json

@@ -25,6 +25,16 @@
       "destination": "wwwroot/lib/jquery",
       "files": [ "jquery.min.js" ]
     },
+    {
+      "library": "jquery-validate@1.19.2",
+      "destination": "wwwroot/lib/jquery-validation/",
+      "files": [ "jquery.validate.min.js", "localization/messages_zh.min.js" ]
+    },
+    {
+      "library": "jquery-validation-unobtrusive@3.2.11",
+      "destination": "wwwroot/lib/jquery-validation-unobtrusive/",
+      "files": [ "jquery.validate.unobtrusive.min.js" ]
+    },
     {
       "library": "jquery.serializeJSON@2.9.0",
       "destination": "wwwroot/lib/jquery.serializeJSON",

projects/WebMVC/wwwroot/index.html

@@ -31,6 +31,9 @@
         </div>
     </div>
     <script src="lib/jquery/jquery.min.js"></script>
+    <script src="lib/jquery-validation/jquery.validate.min.js"></script>
+    <script src="lib/jquery-validation/localization/messages_zh.min.js"></script>
+    <script src="lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
     <script src="lib/jquery.serializeJSON/jquery.serializejson.min.js"></script>
     <script src="lib/linq.js/linq.min.js"></script>
     <script src="lib/axios/axios.min.js"></script>

projects/WebMVC/wwwroot/js/common.js

@@ -3,6 +3,26 @@ Vue.prototype.baseUrl = config.baseUrl;
 Vue.prototype.uploadUrl = config.uploadUrl;
 Vue.use(window.vuelidate.default);
 
+Vue.directive('valid', {
+    bind: function (el, binding) {
+        if (binding.value) {
+            $(el).attr('data-val',true);
+            if (binding.value.required) {
+                $(el).attr('data-val-required', binding.value.required);
+            }
+            else if (binding.value.pattern) {
+                $(el).attr('data-val-regex-pattern', binding.value.pattern.regex);
+                $(el).attr('data-val-regex-message', binding.value.pattern.message);
+            }
+        }
+    },
+    update: function (el, binding) {
+        if (binding.value !== binding.oldValue) {
+            console.log('value changed:' + el.innerHTML);
+        }
+    }
+});
+
 function vueComponent(name, url) {
     Vue.component(name, function (resolve, reject) {
         axios.get(url).then(function (response) {

projects/WebMVC/wwwroot/lib/jquery-validation/localization/messages_zh.min.js

@@ -0,0 +1,4 @@
+/*! jQuery Validation Plugin - v1.19.2 - 5/23/2020
+ * https://jqueryvalidation.org/
+ * Copyright (c) 2020 Jörn Zaefferer; Licensed MIT */
+!function(a){"function"==typeof define&&define.amd?define(["jquery","../jquery.validate.min"],a):"object"==typeof module&&module.exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){return a.extend(a.validator.messages,{required:"这是必填字段",remote:"请修正此字段",email:"请输入有效的电子邮件地址",url:"请输入有效的网址",date:"请输入有效的日期",dateISO:"请输入有效的日期 (YYYY-MM-DD)",number:"请输入有效的数字",digits:"只能输入数字",creditcard:"请输入有效的信用卡号码",equalTo:"你的输入不相同",extension:"请输入有效的后缀",maxlength:a.validator.format("最多可以输入 {0} 个字符"),minlength:a.validator.format("最少要输入 {0} 个字符"),rangelength:a.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),range:a.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),step:a.validator.format("请输入 {0} 的整数倍值"),max:a.validator.format("请输入不大于 {0} 的数值"),min:a.validator.format("请输入不小于 {0} 的数值")}),a});

projects/WebMVC/wwwroot/router/shared/edit.html

@@ -1,6 +1,6 @@
 <template>
     <layout v-bind:title="data.schema.title">
-        <h1>{{data.schema.title}}编辑页</h1>
+        <h1>{{data.schema.title}}<span v-if="model==='Edit'">编辑页</span><span v-else>新建页</span></h1>
         <div class="row">
             <div class="col-12">
                 <div class="card">
@@ -11,11 +11,11 @@
                                 <label class="col-sm-2 col-form-label" :for="key">{{value.title}}:</label>
                                 <div class="col-sm-6 form-control" style="border-color:transparent;height:auto;min-height:calc(2.25rem + 2px);" :title="key">
                                     <template v-if="value.readOnly">
-                                        <input type="hidden" :value="data.model[key]" />
+                                        <input type="hidden" :name="key" :value="data.model[key]" />
                                         <component :is="getDisplayComponent(key)" :title="value.title" :name="key" :value="data.model[key]" :data="data.data" v-if="data.model" />
                                     </template>
                                     <template v-else>
-                                        <component :is="getEditComponent(key)" :title="value.title" :name="key" :value="data.model[key]" :data="data.data" :valid="true" v-if="data.model" />
+                                        <component :is="getEditComponent(key)" :title="value.title" :name="key" :value="data.model[key]" :data="data.data" :valid="valid(value,key,data.model[key])" :property="value" v-if="data.model" />
                                     </template>
                                 </div>
                                 <div class="col-sm-4">{{value.description}}</div>
@@ -41,7 +41,8 @@
     export default {
         data: function () {
             return {
-                url: '/IoTCenter/Admin/' + this.$route.query.entity + '/Edit?id=' + this.$route.query.id,
+                model: this.$route.query.mode,
+                url: '/IoTCenter/Admin/' + this.$route.query.entity + '/' + this.$route.query.mode + '?id=' + this.$route.query.id,
                 entity: this.$route.query.entity,
                 data: {
                     schema: {
@@ -81,6 +82,20 @@
             show: function (key, value) {
                 return key !== 'id';
             },
+            valid(schema, key, value) {
+                console.log(schema);
+                console.log(key);
+                console.log(value);
+                var result = {};
+                if (schema.required) {
+                    result.required = '必须输入' + schema.title;
+                }
+                else if (schema.pattern) {
+                    result.pattern.regex = schema.pattern.regex;
+                    result.pattern.message = schema.pattern.message;
+                }
+                return result;
+            },
             onSubmit: function () {
 
             }

projects/WebMVC/wwwroot/router/shared/edit/string.html

@@ -1,8 +1,10 @@
 <template>
-    <input type="text" :name="name" class="form-control" v-model="value" />
+    <div>
+        <input type="text" :name="name" class="form-control" v-model="value" v-valid="valid" />
+    </div>
 </template>
 <script>
     export default {
-        props: ['name', 'value']
+        props: ['name', 'value', 'property', 'valid']
     };
 </script>

projects/WebMVC/wwwroot/router/shared/list.html

@@ -20,7 +20,7 @@
                             <div class="row" v-if="hasPermissions()">
                                 <div class="col-12">
                                     <a href="javascript:;" class="btn btn-primary" v-if="hasPermission('Read')" v-on:click="onSubmit()">查询</a>
-                                    <a href="javascript:;" class="btn btn-success" v-if="hasPermission('Add')">新建</a>
+                                    <router-link :to="{path:'/router/shared/edit.html',query:{mode:'Add',entity:entity}}" class="btn btn-success">新建</router-link>
                                     <a href="javascript:;" class="btn btn-danger" v-if="hasPermission('Delete')">删除</a>
                                 </div>
                             </div>
@@ -53,7 +53,7 @@
                                                     <component :is="getDisplayComponent(key)" v-bind:name="key" v-bind:value="item[key]" v-bind:data="data.data" :mode="'list'" />
                                                 </td>
                                                 <td v-if="hasPermission('Edit')">
-                                                    <router-link :to="{path:'/router/shared/edit.html',query:{entity:entity,id:item.id}}" class="btn btn-sm btn-default">编辑</router-link>
+                                                    <router-link :to="{path:'/router/shared/edit.html',query:{mode:'Edit',entity:entity,id:item.id}}" class="btn btn-sm btn-default">编辑</router-link>
                                                 </td>
                                                 <td v-if="hasPermission('Read')">
                                                     <router-link :to="{path:'/router/shared/details.html',query:{entity:entity,id:item.id}}" class="btn btn-sm btn-default">查看</router-link>