وحید نصیری وحید نصیری
ویرایش قالب پیش فرض Add View در ASP.NET MVC برای سازگار سازی آن با Twitter bootstrap
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: سه دقیقه
همانطور که در مطلب «اعمال کلاس‌های ویژه اعتبارسنجی Twitter bootstrap به فرم‌های ASP.NET MVC» ملاحظه کردید، برای سازگار سازی یک فرم جدید ایجاد شده ASP.NET MVC با پیش فرض‌های Twitter bootstrap، حداقل 8 مرحله باید طی شود و ... چقدر خوب می‌شد اگر این‌کارها به صورت خودکار توسط VS.NET بجای قالب پیش فرض ایجاد فرم آن، تولید می‌شد. در ادامه قصد داریم این سفارشی سازی را انجام دهیم.


مراحل کلی سفارشی سازی قالب‌های Scaffolding پیش فرض ASP.NET MVC

قالب‌های Scaffolding پیش فرض ASP.NET در مسیر Microsoft Visual Studio X\Common7\IDE\ItemTemplates\CSharp\Web\MVC X\CodeTemplates قرار دارند. برای نمونه اگر بخواهیم پیش فرض‌های تولید فرم‌های MVC4 را تغییر دهیم، باید به پوشه MVC 4\CodeTemplates\AddView\CSHTML مراجعه و فایل Create.tt را ویرایش کنیم.
اینکار هرچند عملی است اما آنچنان جالب نیست؛ از این جهت که تاثیری کلی و سراسری خواهد داشت.
برای اعمال محلی این تغییرات فقط به یک پروژه خاص، تنها کافی است همین مسیر CodeTemplates\AddView\CSHTML به همراه تمام فایل‌های tt آن، در پوشه جاری پروژه مدنظر ما کپی شود. به این ترتیب ابتدا به این پوشه محلی مراجعه خواهد شد.
روش دوم کپی کردن این فایل‌ها، استفاده از بسته نیوگت ذیل است:
 PM> Install-Package Mvc4CodeTemplatesCSharp


سفارشی سازی فایل Create.tt پیش فرض ASP.NET MVC جهت سازگار سازی آن با Twitter bootstrap

در اینجا قصد داریم همان 8 مرحله مطلب «اعمال کلاس‌های ویژه اعتبارسنجی Twitter bootstrap به فرم‌های ASP.NET MVC» را به فایل Create.tt که اکنون در پوشه CodeTemplates\AddView\CSHTML\Create.tt ریشه پروژه جاری قرار دارد، اعمال کنیم.
الف) ابتدا نام این فایل را به CreateBootstrapForm.tt تغییر می‌دهیم. از این لحاظ که این نام جدید در drop down مرتبط با scaffold template صفحه Add view ظاهر خواهد شد. به علاوه نیازی نیست تا این فایل tt در همان لحظه اجرا شود، بنابراین به خواص آن در VS.NET مراجعه کرده و مقدار گزینه custom tool آن‌را خالی می‌کنیم (مانند سایر فایل‌های tt اضافه شده).
ب) قسمت ابتدایی فایل CreateBootstrapForm.tt را که همان کپی مطابق اصل فایل Create.tt است، به نحو ذیل تغییر می‌دهیم:
<#
    if (!mvcHost.IsContentPage) {
#>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<#
    }
}
#>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true, null, new { @class = "alert alert-error alert-block" })

    <fieldset class="form-horizontal">
        <legend><#= mvcHost.ViewDataType.Name #></legend>

<#
foreach (ModelProperty property in GetModelProperties(mvcHost.ViewDataType)) {
    if (!property.IsPrimaryKey && !property.IsReadOnly && property.Scaffold) {
#>
        <div class="control-group">
<#
        if (property.IsForeignKey) {
#>
            @Html.LabelFor(model => model.<#= property.Name #>, "<#= property.AssociationName #>",new {@class="control-label"})
<#
        } else {
#>
            @Html.LabelFor(model => model.<#= property.Name #>,new {@class="control-label"})
<#
        }
#>
        
           <div class="controls">
<#
        if (property.IsForeignKey) {
#>
            @Html.DropDownList("<#= property.Name #>", String.Empty)
<#
        } else {
#>
            @Html.EditorFor(model => model.<#= property.Name #>)
<#
        }
#>
            @Html.ValidationMessageFor(model => model.<#= property.Name #>,null,new{@class="help-inline"})
</div>
        </div>

<#
    }
}
#>
<div class="form-actions">
            <button type="submit" class="btn btn-primary">ارسال</button>
            <button class="btn">لغو</button>
          </div>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
<#
if(mvcHost.IsContentPage && mvcHost.ReferenceScriptLibraries) {
#>

@section JavaScript {    

}
که حاصل آن به صورت ذیل قابل استفاده و دسترسی خواهد بود:


دریافت فایل CreateBootstrapForm.tt اصلاح شده:
همانطور که عنوان شد، برای استفاده از آن فقط کافی است آن‌را در مسیر CodeTemplates\AddView\CSHTML\CreateBootstrapForm.tt ریشه پروژه جاری خود کپی کنید.
‫۱۱ سال و ۴ ماه قبل، سه‌شنبه ۲۱ خرداد ۱۳۹۲، ساعت ۱۲:۳۰
۴۸۵۴
۷
MVCTwitter Bootstrap
مطالب مشابه
  • #
    محمد آزاد محمد آزاد
    ‫۱۱ سال و ۳ ماه قبل، چهارشنبه ۲۹ خرداد ۱۳۹۲، ساعت ۱۷:۳۷
    برای ایجاد یک قالب دلخواه، من به یک مشکل خوردم. فرض کنید من مدلی به این شکل دارم 
     public class MyModel
    {
        public Person person { get; set; }
        public string Type{ get; set; }
    }
 public class Person 
   {
    Public string FirstName{get;set;}
    public string LastName{get;set;}
   }
    کدی که برای Create  توسط قالب ویژه من ایجاد میشه به این صورت هستش
    @model myModel

@{
    ViewBag.Title = "View3";

}

<h2>View3</h2>


@using (Ajax.BeginForm() {

<section class="Simple Page">

       <div class="row-fluid">
            @Html.LabelFor(model => model.Type, new { @class = "span3" })

       <div class="input-control text span4">

            @Html.EditorFor(model => model.Type, new { @class = "span4 ", placeholder = Html.Encode("ResorceName") })
           </div>

        </div>

    </section>
}
    • #
      وحید نصیری وحید نصیری
      ‫۱۱ سال و ۳ ماه قبل، چهارشنبه ۲۹ خرداد ۱۳۹۲، ساعت ۱۸:۳۸
      قالب پیش فرض Create از nested properties یا complex properties پشتیبانی نمی‌کند. (البته نه به این معنا که اگر دستی اضافه شوند کار نمی‌کند)
      + یک راه حل برای این نوع اشیاء توسط یکی از اعضای سابق تیم ASP.NET MVC
      و یا اگر نیاز به اطلاعات بیشتری داشتید، پروژه MvcScaffolding یک چنین روابطی رو پشتیبانی می‌کند: «MvcScaffolding: One-to-Many Relationships»
  • #
    محمد صاحب محمد صاحب
    ‫۱۰ سال و ۷ ماه قبل، شنبه ۱۰ اسفند ۱۳۹۲، ساعت ۲۰:۲۶
    Compiling transformation: The type or namespace name 'MvcTextTemplateHost' could not be found (are you missing a using directive or an assembly reference?)
    دوستان اگه این ارور رو گرفتید با ریستارت کردن ویژوال استادیو ارور رفع میشه
  • #
    محمد آزاد محمد آزاد
    ‫۱۰ سال و ۳ ماه قبل، شنبه ۱۴ تیر ۱۳۹۳، ساعت ۲۰:۳۲
    سلام. من از vs2013 update 2 استفاده می‌کنم.اما مشکلی که دارم اینه تمپلیت جدید به لیست scaffold template  اضافه نمیشه؟خواستم بدونم تو این ورژن باید کار خاصی انجام بدم؟
    بعد از ایجاد تمپلیت جدید در دیالوگ AddView  اسم تمپلیتم رو نمیبینم. ساختار فولدر بندی در ریشه پروژم وجود داره CodeTemplates\AddView\CSHTML\MyCreate.tt

  • #
    مهدی ملائیان مهدی ملائیان
    ‫۶ سال و ۹ ماه قبل، شنبه ۱۱ آذر ۱۳۹۶، ساعت ۱۷:۴۷
    من مطلب فوق رو مرحله به مرحله انجام دادم ، 1 بار با استفاده از Nuget و یکبار هم با کپی دایرکتوری معرفی شده در پوشه CodeTemplates ولی View سفارشی من در بخش Template ظاهر نمی‌شود ، البته من از T4MVC در پروژه استفاده می‌کنم ، آیا نکته ای هست که باید لحاظ شود ؟ مواردی هم که در comment‌ها مطرح شده بود رو چک کردم ولی نتیجه ای نداشت
    اطلاعات پروژه : VS 2015 Update 2 و همچنین Asp.net mvc 5
    • #
      وحید نصیری وحید نصیری
      ‫۶ سال و ۹ ماه قبل، شنبه ۱۱ آذر ۱۳۹۶، ساعت ۱۸:۳۱
      PM> Install-Package Mvc5CodeTemplatesCSharp -Version 5.0.0