function resetSearch(progressId, form, pagerId, container, sortId, sortOrderId, pageSizeId) {
$(pagerId).closest('.row').hide();
$(progressId).css("display", "block");
$(pagerId).data("page", 2);
$(sortId).val($(sortId + " option:first").val());
$(sortOrderId).val($(sortOrderId + " option:first").val());
$(pageSizeId).val($(pageSizeId + " option:first").val());
$(form).find("input[type=text], textarea").val("");
$(form).find("select").each(function(key, val) {
$(this).val($(this).find('option:first').val());
});
$(form).find('#PageIndex').val(1);
$(form).find('#PageSize').val($(pageSizeId).val());
$(form).find('#CurrentSort').val($(sortId).val());
$(form).find('#SortDirection').val($(sortOrderId).val());
$(form).find('#PageIndex').val(1);
$(container).html("");
$(form).submit();
} export function error(){
alert('oops, an error');
} var module = await JS.InvokeAsync<IJSObjectReference>("import", "./Panel.razor.js");
await module.InvokeVoidAsync("error"); Pages/Panel.razor Pages/Panel.razor.js Pages/Panel.razor.css
_module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/RazorClassLibrary/componentName.razor.js"); export function showPrompt(message) {
return prompt(message, 'Type anything here');
} @page "/call-js-example-6"
@implements IAsyncDisposable
@inject IJSRuntime JS
<h1>Call JS Example 6</h1>
<p>
<button @onclick="TriggerPrompt">Trigger browser window prompt</button>
</p>
<p>
@result
</p>
@code {
private IJSObjectReference? module;
private string? result;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
module = await JS.InvokeAsync<IJSObjectReference>("import",
"./scripts.js");
}
}
private async Task TriggerPrompt()
{
result = await Prompt("Provide some text");
}
public async ValueTask<string?> Prompt(string message) =>
module is not null ?
await module.InvokeAsync<string>("showPrompt", message) : null;
async ValueTask IAsyncDisposable.DisposeAsync()
{
if (module is not null)
{
await module.DisposeAsync();
}
}
} 
<div style="overflow: auto">
<img id="preview" />
</div> <input type="hidden" id="RealW" name="RealW" /> <input type="hidden" id="RealH" name="RealH" />
$('#preview').Jcrop({
aspectRatio: 2,
bgFade: true,
bgOpacity: .3,
onChange: updateInfo,
onSelect: updateInfo
}, function () {
// use the Jcrop API to get the real image size
//============== خطوط جدید
$("#RealW").val($('#preview').css("width").replace("px", ""));
$("#RealH").val($('#preview').css("height").replace("px", ""));
//==============
jcrop_api = this;
}); public static byte[] Resize(this byte[] byteImageIn, int x1,int y1,int x2,int y2,int realW,int realH)
{
//convert to full size image
ImageConverter ic = new ImageConverter();
Image src = (Image)(ic.ConvertFrom(byteImageIn)); //original size
if (src == null)
return null;
// چهار خط زیر فرمول تناسب را اجرا می‌کند
x1 = src.Width * x1 / realW;
x2 = src.Width * x2 / realW;
y1 = src.Height * y1 / realH;
y2 = src.Height * y2 / realH;
Bitmap target = new Bitmap(x2 - x1, y2 - y1);
using (Graphics graphics = Graphics.FromImage(target))
graphics.DrawImage(src, new Rectangle(0, 0, target.Width, target.Height),
new Rectangle(x1,y1,x2-x1,y2-y1),
GraphicsUnit.Pixel);
src = target;
using (var ms = new MemoryStream())
{
src.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
return ms.ToArray();
}
} <script type="text/javascript" src="keyboard.js" charset="UTF-8"></script> <link rel="stylesheet" type="text/css" href="keyboard.css">
<input type="text" value="" class="keyboardInput">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="keyboard.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css"/>
</head>
<body>
<input type="text" value="" class="keyboardInput"/>
</body>
</html>
به تصویر زیر نگاه کنید:
به طور خلاصه کل کار برای ساخت arrow کلاسی به صورت زیر هستش:
ابتدا خاصیت border برای یک مقدار اولیه با رنگ transparent مقدارهی شده و سپس مقدار border-top-color با ccc# مقداردهی شده و حتما عرض و طول باید با 0 مقداردهی بشن تا کادر اضافی حذف بشه،به این صورت:
.arrow{
width:0;
height:0;
border:10px solid transparent;
border-top-color:#ccc;
}
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 10px;
}
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
</PropertyGroup>
<ItemGroup>
<FrameworkReference Include="Microsoft.AspNetCore.App" />
</ItemGroup>
</Project> @using BlazorClassLibrary @using BlazorClassLibrary.Shared
@namespace BlazorClassLibrary.Pages
<link rel="stylesheet" href="_content/BlazorClassLibrary/css/bootstrap/bootstrap.min.css" /> <link href="_content/BlazorClassLibrary/css/site.css" rel="stylesheet" />
<Project Sdk="Microsoft.NET.Sdk.Web">
<ItemGroup>
<ProjectReference Include="..\BlazorClassLibrary\BlazorClassLibrary.csproj" />
</ItemGroup>
</Project> <Project Sdk="Microsoft.NET.Sdk">
<ItemGroup>
<ProjectReference Include="..\BlazorClassLibrary\BlazorClassLibrary.csproj" />
</ItemGroup>
</Project> <Project Sdk="Microsoft.NET.Sdk">
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebView.WindowsForms" Version="6.0.101-preview.11.2349" />
</ItemGroup>
</Project> namespace WinFormsApp;
partial class Form1
{
private void InitializeComponent()
{
this.blazorWebView1 = new Microsoft.AspNetCore.Components.WebView.WindowsForms.BlazorWebView();
this.SuspendLayout();
this.blazorWebView1.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
| System.Windows.Forms.AnchorStyles.Left)
| System.Windows.Forms.AnchorStyles.Right)));
this.blazorWebView1.Location = new System.Drawing.Point(13, 181);
this.blazorWebView1.Name = "blazorWebView1";
this.blazorWebView1.Size = new System.Drawing.Size(775, 257);
this.blazorWebView1.TabIndex = 20;
this.Controls.Add(this.blazorWebView1);
this.components = new System.ComponentModel.Container();
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.ClientSize = new System.Drawing.Size(800, 450);
this.Text = "Form1";
this.ResumeLayout(false);
}
private Microsoft.AspNetCore.Components.WebView.WindowsForms.BlazorWebView blazorWebView1;
} <Project Sdk="Microsoft.NET.Sdk.Razor">
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebView.WindowsForms" Version="6.0.101-preview.11.2349" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\BlazorClassLibrary\BlazorClassLibrary.csproj" />
</ItemGroup>
<ItemGroup>
<Content Update="wwwroot\**">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
</ItemGroup>
</Project> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor WinForms app</title>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="WinFormsApp.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="">Reload</a>
<a>🗙</a>
</div>
<script src="_framework/blazor.webview.js"></script>
</body>
</html> using System;
using System.Windows.Forms;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
using BlazorServerApp.Data;
using BlazorClassLibrary;
namespace WinFormsApp;
public partial class Form1 : Form
{
private readonly AppState _appState = new();
public Form1()
{
var serviceCollection = new ServiceCollection();
serviceCollection.AddBlazorWebView();
serviceCollection.AddSingleton<AppState>(_appState);
serviceCollection.AddSingleton<WeatherForecastService>();
InitializeComponent();
blazorWebView1.HostPage = @"wwwroot\index.html";
blazorWebView1.Services = serviceCollection.BuildServiceProvider();
blazorWebView1.RootComponents.Add<App>("#app");
//blazorWebView1.Dock = DockStyle.Fill;
}
} System.IO.FileNotFoundException: The system cannot find the file specified. (0x80070002)
serviceCollection.AddSingleton<AppState>(_appState);
namespace BlazorServerApp.Data;
public class AppState
{
public int Counter { get; set; }
} builder.Services.AddSingleton<AppState>();
@inject BlazorServerApp.Data.AppState AppState
// ...
@code {
private void IncrementCount()
{
// ...
AppState.Counter++;
}
} private void button1_Click(object sender, EventArgs e)
{
MessageBox.Show(
owner: this,
text: $"Current counter value is: {_appState.Counter}",
caption: "Counter");
} 
// angular-material-feature.module.ts
import { NgModule } from '@angular/core';
// Import angular kendo angular
import {
MatFormFieldModule, MatInputModule,
MatButtonModule, MatButtonToggleModule,
MatDialogModule, MatIconModule,
MatSelectModule, MatToolbarModule,
MatDatepickerModule,
DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatTableModule, MatCheckboxModule, MatRadioModule, MatCardModule, fadeInContent,
MatListModule, MatProgressBarModule, MatTabsModule
} from '@angular/material';
import {
MatSidenavModule,
MatSlideToggleModule,
} from '@angular/material';
import { MatMenuModule } from '@angular/material/menu';
@NgModule({
declarations: [
// KendoGridPaginationComponent
],
imports: [
MatSidenavModule,
MatSlideToggleModule,
MatInputModule,
MatFormFieldModule,
MatButtonModule, MatButtonToggleModule,
MatDialogModule, MatIconModule,
MatSelectModule, MatToolbarModule,
MatDatepickerModule,
MatCheckboxModule,
MatRadioModule,
MatCardModule,
MatMenuModule,
MatListModule,
MatProgressBarModule,
MatTabsModule
],
exports: [
MatSidenavModule,
MatSlideToggleModule,
MatInputModule,
MatFormFieldModule,
MatButtonModule, MatButtonToggleModule,
MatDialogModule, MatIconModule,
MatSelectModule, MatToolbarModule,
MatDatepickerModule,
MatCheckboxModule,
MatRadioModule,
MatCardModule,
MatMenuModule,
MatListModule,
MatProgressBarModule,
MatTabsModule
],
providers: [
]
})
export class AngularMaterialFeatureModule {
} // kendo-feature.module.ts
import { NgModule } from '@angular/core';
// Import kendo angular ui
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { DialogsModule } from '@progress/kendo-angular-dialog';
import { RTL } from '@progress/kendo-angular-l10n';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { WindowService, WindowRef, WindowCloseResult, DialogService, DialogRef, DialogCloseResult } from '@progress/kendo-angular-dialog';
import { SnotifyModule, SnotifyService, SnotifyPosition, SnotifyToastConfig, ToastDefaults } from 'ng-snotify';
@NgModule({
declarations: [
],
imports: [
ButtonsModule,
GridModule,
ExcelModule,
DropDownsModule,
InputsModule,
DateInputsModule,
DialogsModule,
LayoutModule,
SnotifyModule,
],
exports: [
ButtonsModule,
GridModule,
ExcelModule,
DropDownsModule,
InputsModule,
DateInputsModule,
DialogsModule,
LayoutModule,
],
providers: [
{ provide: 'SnotifyToastConfig', useValue: ToastDefaults },
SnotifyService,
// Enable Right-to-Left mode for Kendo UI components
{ provide: RTL, useValue: true },
]
})
export class KendoFeatureModule {
} // app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserAnimationsModule,
RouterModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } // app.component.ts
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
title = 'HowToKeepAngularDeploymentSizeSmall';
constructor() {
}
} // app.component.html <router-outlet></router-outlet>
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './projects/home/home.module#HomeModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { } // home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {AngularMaterialFeatureModule , KendoFeatureModule} from '../../modules/index';
import {HomeRoutingModule } from './home.routing';
import { HomeComponent } from './home.component';
import { IndexComponent } from './pages/index/index.component';
import {LoginComponent } from './pages/login/login.component';
@NgModule({
declarations: [
HomeComponent,
IndexComponent,
LoginComponent
],
imports: [
CommonModule,
HomeRoutingModule,
AngularMaterialFeatureModule
],
providers:[
],
entryComponents:[
LoginComponent
]
})
export class HomeModule { } // home.routing.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { IndexComponent } from './pages/index/index.component';
const routes: Routes = [
{
path: "",
component: HomeComponent,
children: [
{
path: "",
component: IndexComponent,
data: {
breadcrumb: " Index "
}
},
{
path: "about",
loadChildren: "./pages/aboutus/aboutus.module#AboutusModule"
},
{
path: "blog",
loadChildren: "./pages/blog/blog.module#BlogModule"
},
{
path: "blog-detail",
loadChildren: "./pages/blogdetail/blogdetail.module#BlogdetailModule"
},
{
path: "pricing",
loadChildren: "./pages/pricing/pricing.module#PricingModule"
},
{
path: "contact",
loadChildren: "./pages/contact/contact.module#ContactModule"
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HomeRoutingModule {
} // home.component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { LoginComponent } from './pages/login/login.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class HomeComponent implements OnInit {
constructor(
private dialog: MatDialog) { }
ngOnInit() {
}
public toggleModal(){
let dialogRef = this.dialog.open(LoginComponent, {
});
}
} // home.component.scss @import '../../../assets/home/css/themify-icons.css'; @import '../../../assets/home/css/font-awesome.min.css'; @import '../../../assets/home/css/set1.css'; @import '../../../assets/home/css/bootstrap.min.css'; @import '../../../assets/home/css/style.css'; @import "~@angular/material/prebuilt-themes/indigo-pink.css";
// home.component.html
<!--============================= HEADER =============================-->
<div>
<div>
<div>
<div>
<div>
<nav>
<a href="index.html"><img src="../../../assets/home/images/logo.png" alt="logo"></a>
<button type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div id="navbarNavDropdown">
<ul>
<li>
<a target="_blank" [routerLink]="['/dashboard']">Dashboard</a>
</li>
<li>
<a [routerLink]="['/about']">About</a>
</li>
<li>
<a [routerLink]="['/contact']">Contact</a>
</li>
<li>
<a [routerLink]="['/pricing']">Pricing</a>
</li>
<li>
<a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Blog
<span></span>
</a>
<div>
<a [routerLink]="['/blog']">Blog Listing</a>
<a [routerLink]="['/blog-detail']">Blog Detail</a>
</div>
</li>
<li>
<a (click)='toggleModal()' style="cursor: pointer;">Login</a>
</li>
<li><a href="add-listing.html"><span></span> Add
Listing</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<!--//END HEADER -->
<router-outlet></router-outlet>
<!--============================= FOOTER =============================-->
<footer>
<div>
<div>
<div>
<div>
<i aria-hidden="true"></i>
<p>503 Sylvan Ave, Mountain View<br> CA 94041, United States</p>
</div>
</div>
<div>
<div>
<img src="../../../assets/home/images/footer-logo.png" alt="#">
</div>
</div>
<div>
<ul>
<li><a href="#"><i aria-hidden="true"></i></a></li>
<li><a href="#"><i aria-hidden="true"></i></a></li>
<li><a href="#"><i aria-hidden="true"></i></a></li>
<li><a href="#"><i aria-hidden="true"></i></a></li>
<li><a href="#"><i aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div>
<div>
<div>
<p>Copyright © 2017 Listed Inc. All rights reserved</p>
<a href="#">Privacy</a>
<a href="#">Terms</a>
</div>
</div>
</div>
</div>
</footer>
<!--//END FOOTER --> 
شما برای این کار باید چند مرحله را انجام دهید:
مرحله‌ی اول: یک پروژه‌ی جدید بسازید
مرحله‌ی دوم: اعمال تنظیمات جهت
استفاده‌ی از MVC
همان طور که مشاهده می‌کنید در این پروژه دیگر خبری از web.config نیست. اما نگران نباشید، امکان اعمال تنظیمات، باز هم وجود دارد و فقط به فایل‌های json منتقل شده‌اند که project.json هم یکی از آن‌هاست. برای استفاده‌ی از Microsoft.AspNet.Mvc فقط کافی است فایل project.json را باز کنید و در قسمت "dependencies" پکیج "Microsoft.AspNet.Mvc" را به آن اضافه نمایید تا به صورت خودکار دانلود و به پروژه اضافه گردد.
"dependencies": {
"Microsoft.AspNet.Server.IIS": "1.0.0-beta5",
"Microsoft.AspNet.Server.WebListener": "1.0.0-beta5",
"Microsoft.AspNet.Mvc": "6.0.0-beta5"
}, public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
public void Configure(IApplicationBuilder app)
{
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
} <h1>My First MVC6 Website!</h1>
نکته: من در این قسمت، در restore کردن پکیج‌ها با استفاده از bower، با خطای زیر مواجه شدم:
visual 2015 ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/jquery/jquery.git", exit code of #-532462766
من از نسخه‌ی Visual Studio 2015 Update 1 CTP استفاده می‌کنم، ولی ظاهرا این مشکل در نسخه‌های دیگر هم وجود دارد و فایل bower.cmd ویژوال به درستی کار نمی‌کند. من برای حل این مشکل، ابتدا git را نصب کردم و در تنظیمات bower، مسیر پیش فرض ویژال رو به مسیر نصب git تغییر دادم. یعنی در پروژه بر روی پوشه‌ی Bower کلیک راست و configure external tools را انتخاب کردم و تیک $(DevEnvDir)\Extensions\Microsoft\Web Tools\External\git را برداشته و در عوض مسیر پیش فرض خودم یعنی C:\Program Files\Git\bin را اضافه کردم.
اگر راه درست و اصولی‌تری برای حل این مشکل وجود دارد ممنون می‌شوم دوستان راهنمایی بفرمایند.
خب بعد از اضافه کردن خاصیت dependencies و پکیج‌های مورد نیاز، خاصیت exportsOverride را نیز مانند نمونه به فایل bower.json اضافه نمایید.
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "3.3.6",
"jquery": "2.1.4",
"jquery-validation": "1.14.0",
"jquery-validation-unobtrusive": "3.2.4"
},
"exportsOverride": {
"bootstrap": {
"js": "dist/js/*.*",
"css": "dist/css/*.*",
"fonts": "dist/fonts/*.*"
},
"jquery": {
"": "jquery.{js,min.js,min.map}"
},
"jquery-validation": {
"": "jquery.validate.js"
},
"jquery-validation-unobtrusive": {
"": "jquery.validate.unobtrusive.{js,min.js}"
}
}
} "devDependencies": {
"gulp": "3.9.0",
"rimraf": "2.4.4",
"gulp-concat": "2.6.0"
} var gulp = require('gulp');
var rimraf = require('rimraf');
var paths = {
bower: "./bower_components/",
lib: "./wwwroot/lib/"
};
gulp.task('clean', function (callback) {
rimraf(paths.lib, callback);
});
gulp.task('default', ['clean'], function () {
var bower = {
"bootstrap": "bootstrap/dist/**/*.{js,map,css,ttf,svg,woff,eot}",
"jquery": "jquery/jquery*.{js,map}",
"jquery-validation": "jquery-validation/jquery.validate.js",
"jquery-validation-unobtrusive":
"jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"
};
for (var destinationDir in bower) {
gulp.src(paths.bower + bower[destinationDir])
.pipe(gulp.dest(paths.lib + destinationDir));
}
}); 
اگر پردازش فوق با موفقیت و بدون خطا انجام شود، می‌توانید پکیج‌های ایجاد شده را در مسیر wwwroot/lib، مشاهده نمایید.
مرحله‌ی چهارم: ویرایش برخی از view ها
حال که پکیج‌های مورد نیاز پروژه، در پوشه‌ی wwwroot قرار گرفتند، باید view هایی که ارجاعی را به این فایل‌ها دارند، نیز ویرایش نماییم. یکی از این فایل‌ها Layout.cshtml_ است که در مسیر Views/Shared قرار دارد. این فایل را باز کرده و به جای متد ()Styles .Render از عنصر <link> برای لود کردن استایل‌های بوت استرپ و غیره استفاده نمایید.
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery/dist/jquery.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
مرحله‌ی پنجم(اختیاری): جایگزین کردن متدهای Html helper با ساختار Tag
Helper
یکی از ویژگی‌های جالب و مفید MVC 6 ساختار TagHalper ها هستند که در واقع جایگزینی برای متدهای HtmlHelper و عملکردی مشابه به آنها دارند. البته استفاده از این ویژگی اجباری نیست ولی اگر تعداد ویوهای شما زیاد نیست و خواهان استفاده‌ی از این قابلیت در پروژه‌ی خود هستید، تنها کاری که باید انجام دهید، پیدا کردن HtmlHelperها و جایگزینی آنها به صورت زیر می‌باشد:
@Html.TextBoxFor(model => model.Name, new { style = "width: 100px" }) <input asp-for="Name" style="width: 100px" />
نتیجه گیری
همان طور ملاحظه نمودید انتقال پروژه از ASP.NET MVC 5 به ASP.NET MVC 6 شامل انجام چند مرحله است و دشواری خاصی ندارد. عمده‌ی این تغییرات و پیچیدگی‌ها هم مربوط به انتقال فایل‌های client-side و نحوه‌ی کار با ابزارهای مدیریت پکیج میشود و البته تنظیماتی که در این بین باید انجام شوند. البته قسمت‌های دیگری مانند تنظیمات bundling و connection string نیز با MVC 5 تفاوت هایی دارد و کار با آنها نیز بسیار ساده می‌باشد.