المقدمة: تقدم المقالة السابقة تغليف إضافة KO والحذف والتعديل والبحث ، مما يوفر بالفعل الكثير من رمز JS. المدون هو شخص يحب أن يكون كسولًا. إنه يشعر دائمًا أن هذه الإضافات الأساسية والحذف والتعديلات والشيكات يمكن أن تنشئ تأثيرات الصفحة مباشرة من خلال أداة ، ولا توجد حاجة إلى رمز. سيكون ذلك رائعًا. لذلك درست قواعد T4. على الرغم من أنني لم أتقنه تمامًا ، إلا أنني كان لدي فهم عام. لذلك مقال اليوم: قم بإنشاء صفحات بسرعة من خلال قوالب T4.
مقالات سلسلة Knockoutjs:
يجمع Bootstraptable و KnockoutJs لتحقيق وظيفة إضافة وحذف وتعديل وفحص [1]
يجمع Bootstraptable و Knockoutjs لتحقيق وظيفة إضافة وحذف وتعديل وفحص [2]
يجمع BootStraptable + Knockoutjs بين إدراك حل إضافة وحذف وتعديل وفحص (3) يمكن لـ اثنين
1. مقدمة لاستخدام T4
نحن نعلم أنه عند إضافة طرق عرض في MVC ، يمكن إنشاء تأثير الصفحة لإضافة وحذف وتعديل التحقق تلقائيًا. ذلك لأن MVC لديها قوالب أساسية مدمجة لإضافة وحذف وتعديل وفحص. بناء جملة هذه القوالب هو استخدام T4 ، فأين توجد هذه القوالب؟ بعد البحث عن المقالات ذات الصلة ، وجدت أن موقع قوالب الإصدار MVC4 وأسفل يختلف تمامًا عن موقع MVC5 وما فوق.
• موقع القالب لـ MVC4 والإصدارات التالية: VS Directory +/ItemTemplates/CSHARP/WEB/MVC 2/CODETemplates. على سبيل المثال ، ملفات المدون D:/Program (x86)/Microsoft Visual Studio 12.0/Common7/IDE/itemTemplates/CSHARP/WEB/MVC 4/CODETEMPHITE.
ابحث عن القالب المقابل لـ CSHTML ، وهناك ملفات TT المقابلة تضيف وحذف وتعديل وتحقق
• MVC5 وما فوق قالب الموقع: أعطي مباشرة موقع القالب من ملفات المدون D://البرامج (x86)/Microsoft Visual Studio 12.0/common7/ide/extensions/microsoft/web/mvc/scaffolding/templates
بمجرد أن تعرف ذلك ، فإن الخطوة التالية هي إعادة تشكيل القالب وإضافة المحتوى الذي تم إنشاؤه الخاص بك. يمكنك نسخ القائمة وتحرير القوالب مباشرة إلى التحول الذاتي ، ولكن بعد التفكير في الأمر ، من الأفضل عدم لمس MVC المدمج. ليس من الأفضل بناء القوالب الخاصة بك بنفسك.
قم بإنشاء مجلد جديد ضمن الدليل الجذري لمشروع الويب الحالي ، وتسمية IT CodeTemplates ، ثم نسخ مجلدات القالب MVCControllerEmpty و MVCVIEW في قالب MVC إلى المجلد codeTemplates ، وإزالة القوالب الأصلية بداخله ، ثم إنشاء العديد من المعاملات الجديدة ، كما هو موضح في الشكل أدناه:
وبهذه الطريقة ، عندما نضيف وحدة تحكم جديدة وننشئ عرضًا جديدًا ، يمكننا أن نرى قالبنا المخصص:
2. مقدمة رمز T4
يقدم أعلاه كيفية إنشاء القالب الخاص بك. بعد إنشاء القالب ، يجب أن تبدأ في حشو المحتوى المقابل فيه. إذا تم توسيع قواعد T4 ، فستكون هذه المقالة لا حصر لها. يمكن للبستانيين المهتمين البحث في الحديقة. لا يزال هناك الكثير من المقالات. دعنا نلقي نظرة على بعض محتويات القالب هنا. شيء آخر يجب ملاحظة أنه يبدو أنه بعد MVC5 ، تم تغيير لاحقة ملف القالب من T4 إلى T4 ، وكانت القوالب السابقة تنتهي دائمًا بـ TT. دون النظر إلى الاختلافات في بناء الجملة الخاص بها ، تشير التقديرات إلى أنه يجب أن يكون هناك اختلاف ضئيل.
1. Controller.CS.T4
لماذا إعادة كتابة هذا قالب وحدة التحكم الفارغة؟ يعتقد المدون أن العديد من أساليب إضافة وحذف وتعديل وفحص يجب أن تكون مكتوبًا يدويًا وأنه يشكل الكثير من المتاعب لكتابة قالب مباشرة. دعونا نلقي نظرة على رمز التنفيذ في القالب:
<##@ template language = "c#" hostspecific = "true"#> <#@@ إخراج extension = "cs"#> <#@ parameter type = "system.String" name = "counterrenmeter"#> <##@ parameter type. name = "areaname"#> <#var index = counterrename.lastIndexof ("Controller") ؛ var modelName = countryame.substring (0 ، index) ؛#> باستخدام النظام #>: Controller {public ActionResult INDEX () {return view () ؛} ActionResult edit (< #= modelname #> model) {return view (model) ؛} [httpget] public jsonresult get (int limit ، int json) {return json (new {} ، jsonrequestbehavior add (< #= modelName #> odata) {< #= modelName #> model.add (odata) ؛ return json (جديد {} ، jsonrequestbehavior.allowget) ؛ {} ، jsonrequestbehavior.allowget) ؛} // حذف الكيان [httppost] public jsonresult delete (list << #= modelName #> odata) {< #= = modelName #> model.delete (Odata) ؛ليس من الصعب فهم هذا المحتوى. فقط تحقق من رمز وحدة التحكم التي تم إنشاؤها:
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.linq ؛ باستخدام system.web ؛ باستخدام system.web.mvc ؛ باستخدام testko.models ؛ namespace testko.controllers {public class usercontroller: controller {public actionresult index () {return view () JSONRESULT GET (int limit ، int offset) {return json (new {} ، jsonrequestbehavior.allowget) ؛} // إضافة كيان [httppost] public jsonresult add (user odata) {usermodel.add (odata) ؛ return json (new {} ، jsonrequestbehavior.allowget) ؛} // تحديث الكيان [httppost] تحديث jsonresult العام (user odata) {usermodel.update (odata) ؛ Return JSON (جديد {} ، jsonrequestbehavior.allowget) ؛} // حذف الكيان [httppost] public jsonresult delete (list <serve> odata) {usermodel.delete (Odata) ؛ إرجاع JSON (جديد {} ، jsonrequestbehavior.allowget) ؛}}}2. koindex.cs.t4
يستخدم هذا القالب بشكل أساسي لإنشاء صفحات قائمة ، مع الكود العام على النحو التالي:
<##@ template language = "c#" hostspecific = "true"#> <#@ outpute extension = ". if (isLayoutPagesElected) {#>@{viewbag.title = "<#= viewname#>" ؛ <#if (! string.isnullorEmpty (layoutpagefile)) {#> layout = "<#= layoutpagefile#>" ؛ html> <html> <head> <meta name = "viewport" content = "width = device-width"/> <title> < #= viewname #> </title> <link href = "~/content/bootstrap/css/bootstrap.min.css href = "~/content/bootstrap-table/bootstrap-table.min.css" rel = "stylesheet"/> <script src = "~/scripts/jQuery -1.9.1.min.js"> </cript> <script src = "~/content/boottrap/boottrap.min src = "~/content/bootstrap-table/bootstrap-table.min.js"> </script> <script src = "~/content/bootstrap table/locale/bootstrap-table-zh-cn.js" </script> <script src = "~/jogout/jogitout-3n4 src = "~/scripts/jackout/extensions/knockout.mapping-latest.js"> </script> <script src = "~/scripts/extensions/jackout.index.js"> </script> <script src = "~/scripts/sussions src = "~/scripts/extensions/knockout.index.js"> </script> <script src = "~/scripts/extensions/straint "/<#= viewDatatyPeshortName#>/get" ، pagesize: 2 ،} ، urls: {del: "/<#= viewDatatyPeshortName#>/delete" ، edit: "/##= viewDatatyPeshortname#>/edit" ، add: : {}} ؛ ko.bindingViewModel (viewModel) ؛}) ؛ </script> </head> <body> <#pushIndent ("") ؛}#> <div id = "شريط الأدوات"> <button data-bind = "click: addclick" type = "button"> data-bind = "click: editclick" type = "button"> <span aria-hidden = "true"> </span> تعديل </button> <button button data-bind = "click: deleteclick" type = "button"> <span aria-hidden = "true"> </span> delet data-checkbox = "true"> </h> <#ienumerable <PertormetAdata> properties = modelMetAdata.properties ؛ foreach (propertymetadata property in properties) {if (property.scaffold &&! property.isprimary &&! getValueExpression (خاصية)#> </h> <#}}#> </tr> </thead> </table> <#// يغلق الكود التالي العلامة المستخدمة في حالة العرض باستخدام صفحة تخطيط وعلامات الجسم و html في حالة صفحة العرض العادية#> if (! isPartialView {clearIndent () ؛#> </body> </html> <#}#> <#@@@إضافة فهرس عرض وحدد هذا القالب
تم الحصول على محتوى الصفحة
@{layout = null ؛} <! doctype html> <html> <head> <meta name = "viewport" content = "width = device-width"/> <title> index </title> <link href = "~/content/bootstrap/css/bootstrap.min.css" href = "~/content/bootstrap-table/bootstrap-table.min.css" rel = "stylesheet"/> <script src = "~/scripts/jQuery -1.9.1.min.js"> </cript> <script src = "~/content/boottrap/boottrap.min src = "~/content/bootstrap-table/bootstrap-table.min.js"> </script> <script src = "~/content/bootstrap table/locale/bootstrap-table-zh-cn.js" </script> <script src = "~/jogout/jogitout-3n4 src = "~/scripts/jackout/jackout-33.4.0.min.js"> </script> <script src = "~/scripts/chickout/extensions/jackout.mapping-latest.js"> </cript> <script src = "~/scripts/mussensions src = "~/scripts/extensions/knockout.bootstraptable.js"> </script> <script type = "text/javaScript "/user/edit" ، add: aria-hidden = "true"> </span> أضف </button> <زر البيانات bind = "انقر: editclick" type = "button"> <span aria-hidden = "true"> </span> modify </uttric> <button> <///"click: deleteclick" type = "button" <span aria-hidden = " data-bind = "bootstraptable: bootstraptable"> <tr> <th data-checkbox = "true"> </h> <th data-field = "name"> name </th> <th-field = "fullname"> fullname </h> <th data-field = "age" Data-field = "createTime"> createTime </h> <th datafield = "strcreateTime"> strcreateTime </h> </tr> </thead> </table> </body> </html> index.cshtmlلقد نقلنا ViewModel المذكورة في المقالة السابقة إلى الصفحة ، بحيث لا يتعين علينا تمريرها من وحدة التحكم في كل مرة. قم بتغيير اسم عمود الجدول قليلاً ويمكن تشغيل الصفحة.
فيما يلي بعض النقاط التي يجب تحسينها:
(1) لم يتم إنشاء ظروف الاستعلام. إذا قمت بدراسة بناء جملة T4 أعمق قليلاً ، فيمكنك إضافة خصائص إلى الحقول التي يجب الاستعلام عنها لتحديد الحقول التي يجب الاستعلام عنها ، ثم إنشاء ظروف الاستعلام المقابلة تلقائيًا.
(2) يبدو أن أسماء الأعمدة للجدول قد تم إنشاؤها من خلال خصائص الحقل للسمة. هذا مشابه للنقطة الأولى ، وكلاهما يحتاج إلى دراسة قواعد T4.
3. Koedit.cs.t4
صفحة القالب الثالث هي القالب المعدل ، ورمزه الخشن كما يلي:
<##@ template language = "c#" hostspecific = "true"#> <#@@ إخراج extension = ". مربع الاختيار ، الذي يستخدم div في bootstrapstring booltype = "system.boolean" ؛ الإصدار مطلوب mvcversion = إصدار جديد ("5.1.0.0") view.if (isPartialView) {#> <#} آخر إذا (isLayoutPagesElected) {#> {viewbag.title = "<#= viewname#>" ؛ <#if (! viewName#> </h2> <#} else {#>@{layout = null ؛} <! doctype html> <html> {#> <#if (! isLayoutPagesElected && isBundleConFigPresent) {#>@scripts.render ("~/bundles/jQuery")@scripts.render ("~/bundles/jQueryval") <#}#> if ( src = "~/scripts/jQuery-<#= jQueryversion#>. id = "formedit">@html.hiddenfor (model => model.id) <div> <#ienumerable <PropertyMetAdata> properties = modelMetadata.properties ؛ foreach (propertymetadata property) {if (property.scaffold &&! property.isprimary {#> <viv>@html.labelfor (model => model. <#= getValueExpression (property)#> ، "<#= getValueExpression (property)#>" ، new {class = "control-label col-xs-2"}) cclass = "form-control" ، data_bind = "value: editModel. <#= getValueExpression (property)#>"}) </div> </viv> <#}}#> </div> <div> <button type = "button" data-dismiss = "modal" aria-hidden = "true"> </span> حفظ </button> </viv> </form> <#var index = viewDatatyPename.lastIndexof (".") ؛ var modelName = viewDatatyPename.subString (index+1 ، viewDatyPename.length-index-1) ؛ src = "~/scripts/extensions/knockout.edit.js"> </script> <script type = "text/javaScript"> $ (function () {var model = @html.raw : {إرسال: model.id == 0؟ }) ؛ </script> <#if (isLayoutPageselected && referencescriptLibraries && isBundleConFigPresent) {#>@section scripts {@scripts.render ("~/bundles/jQueryVal")} <#}#> src = "~/scripts/jQuery-< #= jQueryversion #>. src = "~/scripts/jquery.validate.unobtrusion.min.js"> </script> <#}#> <#// الكود التالي يغلق العلامة المستخدمة في حالة العرض باستخدام صفحة تخطيط وعلامات الجسم و HTML في حالة عرض العرض العادي#< {clearIndent () ؛#> </body> </html> <#}#> <#@@@رمز تم إنشاؤه:
model testko.models.user <form id = "formedit">@html.hiddenfor (model => model.id) <div> <viv>@html.labelfor (model => model.name ، "name" ، new {class = "control-label col-xs-2"}) cclass = "form-control" ، data_bind = "value: editModel.name"}) </div> </viv> <viv> @html.labelfor (model => model.fullname ، "fullname" ، new {class = "control-label col-xs-2"}) cclass = "form-control" ، data_bind = "value: editModel.fullName"}) </div> </viv> <viv> @html.labelfor (model => model.age ، "age" ، new {class = "control-label col-xs-2"}) "form-control" ، data_bind = "value: editModel.age"}) </viv> </viv> <viv> @html.labelfor (model => model.des ، "des" ، new { @class = "control-label col-xs-2"}) "form-control" ، data_bind = "value: editmodel.des"}) </viv> </viv> <viv> @html.labelfor (model => model.createTime ، "createTime" ، new {crateTeTeTeTIM "form-control" ، data_bind = "value: editModel.CreateTime"}) </viv> </viv> <viv>@html.labelfor (model => model.strcreatetim {cclass = "form-control" ، data_bind = "value: editmodel.strcreateTime"}) </div> </viv> <viv> <button type = "button" data-dismiss = "modal"> <span aria-hidden = "true"> </span> </button> <button type = aria-hidden = "true"> </span> حفظ </button> </viv> </pump> <script src = "~/scripts/extensions/knockout.edit.js"> </script> <script type = "text/javaScript"> $ () {var model = html.raw ViewModel = {formid: "formedit" ، editModel: model ، urls: {profft: model.id == 0؟ '}}}}}} ؛ Ko.BindingEditViewModel (ViewModel) ؛بالطبع ، يحتاج الرمز أيضًا إلى تعديله قليلاً. عن طريق إضافة صفحة قالب مخصص ، طالما تم تصميم نموذج الكيان المقابل في الخلفية ، تحتاج فقط إلى إنشاء عرضين مخصصين جديدين على الواجهة الأمامية ، ويمكن إكمال إضافة بسيطة ، والحذف ، والتعديل والبحث دون كتابة جملة من رمز JS.
3. ربط مكون محدد
يقدم ما ورد أعلاه بناء جملة التغليف T4 ، الحذف ، التعديل والبحث. جميع مكونات الصفحة هي في الأساس مربعات نصية. ومع ذلك ، في المشاريع الفعلية ، سيكون للعديد من صفحات الاستعلام والتحرير صناديق منسد لعرضها. كيف يجب أن نتعامل مع المربع المنسدلة؟ إذا لم تبقيه سراً ، فما عليك سوى إعطاء حل. على سبيل المثال ، يمكننا وضع مصدر بيانات المربع المنسدل في الخلفية في صفحة التحرير.
كيان المستخدم
[DataContract] مستخدم الفئة العامة {[Datamember] public int {get ؛ تعيين؛ } [Datamember] اسم السلسلة العامة {get ؛ تعيين؛ } [Datamember] السلسلة العامة FullName {get ؛ تعيين؛ } [Datamember] int int {get ؛ تعيين؛ } [Datamember] السلسلة العامة des {get ؛ تعيين؛ } [Datamember] Public DateTime CreateTime {get ؛ تعيين؛ } [Datamember] سلسلة عامة strcreateTime {get ؛ تعيين؛ } [Datamember] السلسلة العامة DepartmentId {get ؛ تعيين؛ } [Datamember] أقسام الكائنات العامة {get ؛ تعيين؛ }}ثم قم بتحرير الصفحة
Action ActionResult Edit (نموذج المستخدم) {model.departments = departmentModel.getData () ؛ إرجاع عرض (نموذج) ؛}ثم ربط الواجهة الأمامية.
<div> <label for = "txt_des"> القسم </label> <select id = "sel_dept" data-bind = "Options: EditModel.Departments ، OptionStext: 'name' ، esportsvalue: 'id' ، value: editmodel.departmentid"> </select> </div>
لا يلزم تعديل رمز JS. عند إضافة أو تحرير ، يمكن إضافة حقول القسم تلقائيًا إلى ViewModel.
بطبيعة الحال ، فإن المربعات المنسدلة التي تستخدمها العديد من مشاريعنا ليست مجرد اختيار ، لأن نمط الاختيار البسيط قبيح حقًا ، بحيث يتم إنتاج العديد من المكونات المحددة ، مثل Select2 ، MultiSelect ، وما إلى ذلك. عند استخدام هذه المكونات لتهيئة SELECT ، ستجد أن المربع المنسدلة على الواجهة لم يعد علامة تحديد بسيطة ، ولكنه يتكون من العديد من العلامات الأخرى المخصصة بواسطة المكون. دعنا نأخذ مكون Select2 كمثال لمعرفة ما إذا كان من الممكن التهيئة مباشرة وفقًا لما ورد أعلاه.
نضيف الجملة الأخيرة لتحرير رمز JS الذي تم تهيئته بواسطة الصفحة:
<script type = "text/javaScript"> $ (function () {var model = @html.raw (newtonsoft.json.jsonconvert.serializeObject (model)) ؛ var viewmodel = {formid: "formedit" ، editModel: model ، urls: {prisond: adm 0؟ "/user/update"} ، Valitator: {Fields: {name: {devalators: {notempty: {message: 'لا يمكن أن يكون الاسم فارغًا!من خلال الإضافات والتعديلات ، هذا ممكن بالفعل! تحليل السبب ، على الرغم من أن الصفحة HTML تتغير بعد تهيئة مكون SELECT2 ، فإن المكون سيقدم في النهاية القيمة المحددة على عنصر تحكم التحديد الأصلي. لا أعرف ما إذا كانت مكونات التهيئة الأخرى ستكون مثل هذا باستثناء Select2 ، وينتظرون التحقق من ذلك. ومع ذلك ، هناك شيء واحد يجب شرحه هنا. قبل التهيئة Select2 ، يجب أن تكون الخيارات الموجودة في المربع المنسدلة مرتبطة بالقيمة ، أي ، يجب وضع تهيئة المكون بعد ko.applybinding ().
4. ملخص
في هذه المرحلة ، تم دمج KO مع توليد القالب القابل للتسمية واستخدام عناصر التحكم المحددة بشكل أساسي ، وبالطبع ، لا يزال يتعين تحسينه. إذا كان لديك وقت في وقت لاحق ، فسيقوم المدون بفرز مجموعة من المكونات الأمامية الأخرى و KO ، مثل التحكم في التاريخ الأكثر شيوعًا. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!