موزش رایگان ASP.NET Core MVC و EF Core – قسمت #1
آموزش
رایگان ASP.NET Core MVC و EF Core با روش Model First در ویژوال استادیو
2017 قسمت #1 را در این قسمت از وبسایت آموزش برنامه نویسی پرووید دانلود
کنید.
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
ASP.NET Core MVC چیست؟
ASP.NET
Core بر پایه‌ی NET Core. استوار است و نگارشی از NET. محسوب می شود که
مستقل از سیستم عامل و بدون واسط برنامه نویسی ویندوز عمل می کند . ویندوز
هنوز هم سیستم عاملی برتر به حساب می آید ولی برنامه های وب نه تنها روز به
روز از کاربرد و اهمیت بیشتری برخوردار میشوند بلکه باید بر روی سکوهای
دیگری مانند فضای ابری (Cloud) هم بتوانند میزبانی (Host) شوند، ماکروسافت
با معرفی ASP.NET Core گستره کارکرد NET. را افزایش داده است . به این معنی
که می توان برنامه های کاربردی ASP.NET Core را بر روی بازه‌ی گسترده ای
از محیط‌های مختلف میزبانی کرد هم‌اکنون میتوانید پروژه های وب را برای
Linux یا macOS هم تولید کنید.
ASP.NET Core در مقایسه با MVC
نخستین ، ساده‌تر شده و برخلاف آن هیچ ارتباطی با پروژه های Web Form ندارد
و از آنجا که بر پایه NET Core. بنا شده است ایجاد پروژه های وب را بر روی
بسیاری از سیستم عامل های گوناگون پشتیبانی کرده و امکان میزبانی در محیط
های مختلف را داراست.
ASP.NET Core تمام امکانات ASP.NET MVC را بر پایه
سکوی جدید فراهم میکند و افزودن بر این که شامل همه‌ی کارایی های واسط
کاربری وب است روش های طبیعی‌تری برای ایجاد محتوای پیچیده پیشنهاد میکند و
امکان میدهد که بسیاری از کارهای کلیدی مربوط به توسعه ، مانند آزمایش
های واحد یه سادگی انجام شوند.
بسته ی جامع آموزش پروژه محور ASP.NET Core MVC و EF Core با روش Model First در ویژوال استادیو 2017
به منظور یادگیری جامع این مبحث، ما بسته ی آموزشی مذکور را پیشنهاد می کنیم.
این مطالب رو حتما بخوان:
آموزش رایگان ASP.NET Core MVC و EF Core – قسمت #5
آموزش رایگان ASP.NET Core MVC و EF Core – قسمت #3
آموزش رایگان ASP.NET Core MVC و EF Core – قسمت #2
آموزش رایگان ASP.NET Core MVC و EF Core – قسمت #4
آموزش رایگان ASP.NET Core MVC و EF Core – قسمت #6
آموزش رایگان ASP.NET Core MVC و EF Core DB First – قسمت #
کار با Visual Studio
در
این مقاله، یکسری توضیحاتی در مورد ویژگیهای کلیدی ویژوال استودیو به
برنامه نویس‌های (توسعه دهنده‌های) پروژه‌های Asp.net Core MVC ارائه
میدهیم.
ایجاد یک پروژه
در ابتدا یک پروژه‌ی وب جدید
Asp.net core را به نام Working و بر اساس قالب Empty ایجاد میکنیم. سپس
در کلاس startup، قابلیت MVC را فعال میکنیم (کدهای این قسمت، در فصل 5
کامل شرح داده شده‌است)
namespace Working
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
//app.Run(async (context) =>
//{
// await context.Response.WriteAsync("Hello World!");
//});
}
}
}
ایجاد مدل:
یک
پوشه جدید را به نام Models ایجاد میکنیم و بعد در این پوشه یک کلاس جدید
را به نام Product ایجاد میکنیم و کدهای زیر را در کلاس ایجاد شده قرار
میدهیم (این قسمت در فصل 5 نیز شرح داده شده‌است):
namespace Working.Models
{
public class Product
{
public string Name { get; set; }
public decimal Price { get; set; }
}
}
برای
ایجاد یک فروشگاه ساده از اشیاء محصول، من یک فایل کلاس را به نام
SimpleRepository.cs به پوشه Models اضافه و از آن برای تعریف کلاس استفاده
کردم.
namespace WorkingWithVisualStudio.Models
{
public class SimpleRepository
{
private static SimpleRepository sharedRepository = new SimpleRepository();
private Dictionary<string, Product> products = new Dictionary<string, Product>();
public static SimpleRepository SharedRepository => sharedRepository;
public SimpleRepository()
{
var initialItems = new[] { new Product { Name = "Kayak", Price = 275M
}, new Product { Name = "Lifejacket", Price = 48.95M }, new Product {
Name = "Soccer ball", Price = 19.50M }, new Product { Name = "Corner
flag", Price = 34.95M } };
foreach (var p in initialItems)
{
AddProduct(p);
}
}
public IEnumerable<Product> Products => products.Values;
public void AddProduct(Product p) => products.Add(p.Name, p);
}
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
}
کلاس
Stores، اشیا مدل را در حافظه ذخیره میکند. یعنی هر تغییری را که در
Model داده باشید، زمانیکه نرم افزار متوقف یا Restart شود، از بین میرود.
یک فروشگاه ناپیوسته برای مثال در این فصل کافی است. اما این رویکردی نیست
که در بسیاری از پروژه‌های واقعی استفاده شود. در فصل 8 یک مثال را پیاده
سازی میکنیم تا اطلاعات مدل Store را به صورت مداوم در بانک اطلاعاتی
ذخیره کند.
نکته: من یک مشخصه (Property) استاتیک را به نام
SharedRepository تعریف کردم که دسترسی به SimpleRepository را فراهم
میکند و میتواند در طول برنامه از آن استفاده شود. این بهترین کار نیست،
ولی میخواهم یک مشکل رایج را که در توسعه MVC روبرو میشوید، نشان دهم. من
راه بهتری را برای کار با اجزای مشترک، در فصل 18 توضیح میدهم.
ایجاد Controller و View
در پوشه Controllers، یک فایل جدید را به نام HomeController.cs ایجاد میکنیم و کدهای زیر را در آن قرار میدهیم:
namespace WorkingWithVisualStudio.Controllers
{
public class HomeController : Controller
{
public IActionResult Index() => View(SimpleRepository.SharedRepository.Products);
}
}
این
یکی Action Method ایی به نام Index است که اطلاعات مدل را دریافت میکند و
برای View پیشفرض، جهت نمایش ارسال میکند. برای ایجاد View هم بر روی
پوشه Views/Home راست کلیک کرده و یک View را به نام index.cshtml ایجاد
کنید؛ با کدهای زیر:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>>Working with Visual Studio</title>
</head>
<body>
<table>
<thead>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody> @foreach (var p in Model)
{<tr>
<td>@p.Name</td>
<td>@p.Price</td>
</tr>}
</tbody>
</table>
</body>
</html>
این
View شامل یک جدول است که از حلقه foreach Razor، برای ایجاد ردیف‌هایی
برای هر شیء مدل استفاده میکند. جایی که هر ردیف، حاوی سلول‌هایی برای
خواص نام و قیمت است. اگر شما برنامه کاربردی را اجرا کنید، نتایج حاصل را
در شکل خواهید دید:
مدیریت بسته‌های نرم افزاری
دو نوع مختلف از بسته‌های نرم افزاری مورد نیاز برای Asp.Net Core MVC وجود دارند.
معرفی NuGet
ویژوال
استودیو به همراه یک ابزار گرافیکی برای مدیریت بسته‌های NET. است که در
یک پروژه گنجانده شده‌است. برای باز کردن این ابزار، گزینه Management
NuGet Packages for Solution را از منوی Tools ➤ NuGet Package Manager
انتخاب کنید. به این ترتیب ابزار NuGet باز میشود و لیستی از بسته‌هایی که
قبلا نصب شده‌اند، نمایش داده میشود؛ همانطور که در شکل زیر نشان داده
شده‌است:
برگه‌ی Installed، خلاصه‌ای از بسته‌هایی را که
قبلا در پروژه نصب شده‌اند، نشان میدهد. از برگه‌ی Browse، برای یافتن و
نصب بسته‌های جدید میتوان استفاده کرد و برگه‌ی Updates، فهرست package
هایی را که نسخه‌های اخیر آنها منتشر شده‌اند، نمایش میدهد.
معرفی بسته‌ی MICROSOFT.ASPNETCORE.ALL
اگر
شما از نسخه‌های قبلی Asp.Net Core استفاده کرده باشید، باید یک لیست
طولانی از بسته‌های NuGet را به پروژه جدید خود اضافه نمایید. Asp.Net
Core2 یک بسته‌ی متفاوت را به نام Microsoft.AspNetCore.All معرفی میکند.
پکیچ
Microsoft.AspNetCore.All یک meta-package است که شامل تمام بسته‌های
Nuget مورد نیاز Asp.net Core و MVC Framework است. یعنی شما دیگر نیازی به
نصب تک به تک این نوع بسته‌ها ندارید و هنگامیکه برنامه خود را منتشر
میکنید، هر بسته‌ای از بسته‌های Meta-package که مورداستفاده قرار
نمی‌گیرند، حذف خواهند شد. البته این بسته در نگارش 2.1، قسمت All آن به
App تغییر نام یافته‌است.
معرفی بسته‌های Nuget و موقعیت ذخیره سازی آنها
ابزار
NuGet لیست بسته‌های پروژه را در فایل projectname.csproj نگهداری میکند.
در اینجا <projectname> با نام پروژه جایگزین میشود. برای مثال در
پروژه فوق اطلاعات Nuget، در فایل WorkingWithVisualStudio.csproj ذخیره
میشوند. ویژوال استودیو محتویات فایل csproj را در پنجره‌ی Solution
Explorer نمایش نمیدهد. برای ویرایش این فایل، روی پروژه در پنجره‌ی
Solution Explorer راست کلیک کنید و گزینه‌ی Edit
WorkWithVisualStudio.csproj را از منوی باز شده، انتخاب کنید. ویژوال
استودیو فایل را برای ویرایش باز میکند. فایل csproj یک فایل XML است و
شما در آن عنصری را مانند قطعه کد زیر در آن می‌بینید که Asp.net Core Meta
package را به پروژه اضافه میکند:
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
</ItemGroup>
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
در
اینجا یک بسته با نام و شماره نسخه مورد نیاز مشخص شده‌است. اگرچه بسته
Meta-Package شامل تمام ویژگیهای مورنیاز Asp.Net Core MVC میباشد، اما
شما هنوز هم باید بسته‌های دیگری را به پروژه اضافه کنید تا بتوانید از
ویژگیهای اضافی خاص آنها استفاده کنید. این بسته‌ها را میتوان توسط
رابط‌های خط فرمان و یا ابزار گرافیکی آن اضافه کرد. حتی شما میتوانید
فایل Csproj را به صورت مستقیم ویرایش کنید و ویژوال استودیو میتواند
تغییرات بسته‌ها را شناسایی کرده، دانلود و نصب کند.
هنگامیکه
از NuGet برای اضافه کردن یک بسته به پروژه‌ی خود استفاده میکنید، به
صورت خودکار به همراه هر بسته‌ای که به آن وابستگی دارد، نصب میشود. شما
میتوانید بسته‌های Nuget و وابستگی‌های آنها را در SolutionExpolrer از
طریق گزینه‌ی Dependencies -> Nuget مشاهده کنید که هر یک از بسته‌های
موجود در فایل csproj و وابستگی‌های آنها را نشان میدهد. برای نمونه بسته
Meta-Package ASP.Net Core دارای تعداد زیادی وابستگی است؛ برخی از آنها
در شکل زیر دیده میشوند:
معرفی Bower
یک بسته
Client-Side، شامل محتوایی است که به مشتری ارسال میشود؛ مانند فایلهای
جاوا اسکریپت، Css Stylesheets و یا تصاویر. از Nuget برای مدیریت این نوع
فایل‌ها در پروژه نیز استفاده میشود. اما اکنون Asp.Net Core MVC پشتیبانی
توکاری را از یک ابزار مدیریت بسته‌های سمت کاربر، به نام Bower نیز ارائه
میدهد. Bower یک ابزار منبع باز ( Open Source ) است که در خارج از
مایکروسافت و دنیای NET. توسعه داده شده و نگهداری میشود.
نکته:
Bower به تازگی منسوخ شده اعلام گردیده‌است. ممکن است هشدارهایی را که
ابزارهای جایگزین را پیشنهاد میکنند نیز مشاهده کنید. با این حال پشتیبانی
از Bower با ویژوال استودیو یکپارچه شده‌است و در نگارش 2.1 ابزار مدیریت
سمت کلاینت جدید دیگری را نیز بجای آن معرفی کرده‌اند.
معرفی لیست بسته‌های Bower
بسته‌های
Bower از طریق فایل ویژه‌ی bower.json مشخص میشوند. برای ایجاد این فایل
در پنجره Solution Explorer روی پروژه WorkingWithVisualStudio راست کلیک
کنید و Add -> New Item را از منوی باز شده انتخاب کنید. سپس قالب مورد
نظر Bower Configuration File را از Asp.net Core -> Web -> General
Category انتخاب نمائید؛ مانند تصویر زیر:
ویژوال استودیو
نام bower.json را برای آن قرار میدهد. برروی ok کلیک میکنیم و یک فایل
جدید، با محتویات پیشفرض زیر به پروژه اضافه میشود:
{
"name": "asp.net",
"private": true,
"dependencies": {}
}
به
علاوه برای فایل Bower.json، تصویر زیر بسته‌های Client Side وابسته به
Bower را نشان میدهد. از این قسمت برای اضافه کردن وابستگی‌های برنامه نیز
استفاده میشود.
نکته: منبع بسته‌های Bower در لینک
http://bower.io/search وجود دارد. شما میتوانید بسته‌ها مورنظر را در
اینجا جستجو و به پروژه اضافه کنید.
بعد از اینکه بسته‌ها نصب شدند، محتویات فایل bower.json به صورت زیر میباشد:
{
"name": "asp.net",
"private": true,
"resolutions": {
"jquery": "3.3.1"
}
}
در
ادامه بسته Bootstrap CSS به پروژه اضافه شده‌است. زمانیکه شما فایل
Bower.json را ویرایش میکنید، ویژوال استادیو لیستی از نام بسته‌ها و
نسخه‌های بسته‌های موجود را نمایش میدهد؛ مانند تصویر زیر:
در
زمان نوشتن این مطلب، آخرین نسخه‌ی پایدار بسته بوت استرپ، 3،3،7 است.
البته اگر در دقت کنید، در اینجا سه گزینه‌ی ارائه شده‌ی توسط ویژوال
استودیو وجود دارند: 3.3.7 و 3.3.7^ و 3.3.7~. شماره نسخه میتواند در طیف
وسیعی از روش‌های مختلف در فایل bower.json مشخص شود. مفیدترین آنها در
جدول زیر شرح داده شده‌اند. استفاده از شماره نسخه صریح یک بسته، امن‌ترین
راه برای مشخص کردن یک بسته است. این تضمین میکند که شما همیشه با همان
نسخه کار میکنید؛ مگر اینکه عمدا فایل bower.json را برای پاسخ گویی به
درخواستهای دیگری به روز رسانی کنید:
فرمت توضیحات
3.3.7 بیان شماره مستقیم بسته نصب شده و تطبیق دقیق آن با شمار نسخه ، e.g ، 3.3.7
* با استفاده از یک ستاره به Bower اجازه نصب آخرین نسخه را میدهد
3.3.7 =<3.3.7<
پیشوند یک شماره نسخه با < یا =< به Bower اجازه میدهد تا هر نسخه
از بسته‌ای که بزرگتر یا بزرگتر مساوی آن نسخه‌ی معین است، نصب شود
3.3.7 =>3.3.7>
پیشوند یک شماره نسخه با > یا => به Bower اجازه میدهد تا هر نسخه
از بسته‌ای را که کوچکتر یا کوچکتر و مساوی نسخه‌ی معین است، نصب شود
3.3.7~ پیشوند یک شماره نسخه با یک tilde (با کاراکتر ~ ) به
نسخه‌هایی که دو شماره اولیه آنها مشابه باشند، اجازه نصب میدهد؛ حتی اگر
شماره آخر آن نسخه متفاوت باشد. مانند نسخه‌های 3.3.9 و 3.3.8 و اجازه نصب
نسخه 3.4.0 را نمیدهد؛ چون شماره دوم آن متفاوت است.
3.3.7^
پیشوند یک شماره نسخه با یک قلم (کاراکتر ^) به نسخه‌هایی که شماره اول
آنها مشابه باشند، اجازه نصب میدهد؛ حتی اگر شماره دوم آنها متفاوت باشد.
مانند نسخه‌های 3.3.1 و 3.4.1 و 3.5.1 اما نسخه 4.0.0 اجازه نصب ندارد
نکته:
برای مثال در این کتاب، من فایل bower.json را مستقیما ایجاد و ویرایش
می‌کنم. ویرایش این فایل ساده است و به شما کمک میکند تا اطمینان حاصل
کنید که نتایج مورد انتظار را در صورت پیگیری به همراه داشته باشد. همچنین
ویژوال استودیو ابزار گرافیکی را نیز برای مدیریت بسته‌های bower فراهم
میکند. شما میتوانید با کلیک راست بر روی فایل bower.json و انتخاب
Manage Bower packages به منوی باز شده دسترسی داشته باشید. ویژوال استادیو
فایلهای bower.json را برای تغییرات نظارت میکند و به صورت خودکار از
ابزار Bower برای دانلود و نصب بسته‌ها استفاده میکند. هنگامیکه شما
تغییرات فایل را ذخیره میکنید، ویژوال استودیو بسته‌ی BootStrap را دانلود
میکند و در پوشه‌ی wwwroot/lib ذخیره میکند.
مانند Nuget نیز
Bower وابستگی‌های مرتبط با بسته‌های اضافه شده‌ی به یک پروژه را مدیریت
میکند. BootStrap برای دسترسی به برخی از ویژگیهای پیشرفته، به JQuery که
یک کتابخانه‌ی جاوا اسکریپتی است، تکیه میکند. به همین دلیل است که دو
بسته را در شکل فوق نشان داده است. شما میتوانید لیست بسته‌ها و
وابستگی‌های آنها را به صورت باز شده در بخش مورد نظر در Solution Explorer
مشاهده کنید.
به روزرسانی بسته Bootstrap
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
در
ادامه کتاب، من از نسخه قبلی Bootstrap CSS framework استفاده می‌کنم.
هنگامی که دارم این را می‌نویسم، تیم Bootstrap در حال توسعه‌ی نسخه‌ی 4
bootStrap است و چندین بار منتشر شده‌است. این نسخه‌ها به عنوان "آلفا"
برچسب گذاری شده‌اند، اما کیفیت آنها بالا است و برای استفاده در
نمونه‌های این کتاب به اندازه کافی پایدار است. با توجه به انتخاب نوشتن
این کتاب با استفاده از Bootstrap 3 و نسخه پیش از نسخه بوت استرپ 4 و به
زودی بایگانی شدن آن، تصمیم گرفتم از نسخه جدید استفاده کنم؛ حتی اگر برخی
از نام‌های کلاس‌ها که برای شیوه نامه‌های عناصر HTML استفاده میشوند،
احتمالا قبل از انتشار نهایی تغییر یابند. این مورد به این معنا است که شما
باید همان نسخه از Bootstrap را که برای گرفتن نتایج موردنظر از خروجی
نیاز دارید، استفاده کنید.
برای به روزرسانی بسته Bootstrap، شماره نسخه را در فایل bower.json تغییر دهید. مانند کد زیر:
{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "4.0.0-alpha.6"
}
}
زمانی که شما تغییرات فایل bower.json را ذخیره میکنید، ویژوال استودیو نسخه جدید BootStrap را دانلود میکند.
معرفی توسعه و کامپایل مداوم
توسعه
نرم افزار وب اغلب میتواند یک فرآیند تکراری باشد، جایی که تغییرات کوچکی
را به ویووها یا کلاس‌ها می‌دهید و برنامه را اجرا میکنید تا اثرات آن را
آزمایش کنید. MVC و ویژوال استودیو همکاری میکنند تا از این رویکرد مداوم
استفاده کنند تا تغییرات را سریعتر و آسان‌تر ببینید.
اعمال تغییرات در Razor Views
در
زمان توسعه، تغییراتی که به Razor View اعمال میشوند، به محض رسیدن
درخواستهای HTTP، از مرورگر دریافت میشوند. برای اینکه ببینید چطور کار
میکند، برنامه را با انتخاب گزینه Start Debugging از منوی Debug اجرا
کنید و هنگامیکه یک برگه‌ی مرورگر باز شد و اطلاعات نمایش داده شد،
تغییراتی را که در زیر نمایش میدهم در فایل Index.cshtml اعمال کنید.
Code
تغییرات
را در فایل Index ذخیره میکنیم و صفحه وب را با استفاده از دکمه browser
Reload مجددا بارگذاری میکنیم. تغییرات در View (یک عنوان و فرمت را برای
مشخصه Price به عنوان ارز وارد کردیم) در مرورگر هم اعمال شده است؛ مانند
تصویر زیر:
اعمال تغییرات در کلاسهای #C
برای
کلاسهای #C، از جمله کنترلرها و مدل‌ها، دو رویکرد موجود را که از طریق
آیتم‌های مختلف در منوی Debug انتخاب میشوند، شرح میدهم:
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
Start Without Debugging
تغییرات
در کلاس‌ها در پروژه به صورت خودکار زمانیکه یک درخواست HTTP دریافت
میشود، برای مشاهده‌ی یک تجربه‌ی توسعه‌ی پویا، کامپایل میشوند. در این
حالت برنامه بدون امکانات دیباگ و اشکال‌زادیی اجرا میشود.
Start Debugging
به
شما اجزا میدهد صریح تغییرات را کامپایل کنید و برنامه را اجرا کنید ،
بررسی مشکلات هم در زمان اجرا پروژه انجام میگیرد.به شما اجرا بررسی و
تجزیه و تحلیل هر گونه مشکل در کد را میدهد.
کامپایل خودکار کلاس ها
در
طول توسعه عادی، این چرخه کامپایل سریع به شما اجازه میدهد تا فورا تاثیر
تغییرات خود را ببینید؛ حالا میتواند این تغییر اضافه نمودن یک اکشن جدید
و یا ویرایش نمایش اطلاعات یک Model باشد. برای ارائه‌ی این نوع از توسعه،
ویژوال استودیو به محض رسیدن درخواست HTTP از مرورگر، تغییرات را دریافت و
کلاس‌ها را به صورت خودکار کامپایل میکند. برای دیدن اینکه چگونه کار
میکند، گزینه Start Without Debugging را از منوی Debug در ویژوال استودیو
انتخاب کنید. هنگامیکه مرورگر داده‌های برنامه را نمایش میدهد، تغییرات
زیر را در فایل Home controller ایجاد کنید:
namespace WorkingWithVisualStudio.Controllers
{
public class HomeController : Controller
{
public IActionResult Index() => View(SimpleRepository.SharedRepository.Products
.Where(p => p.Price < 50));
}
}
در
این تغییرات با استفاده از LINQ محصولات را فیلتر میکنیم به طوری که فقط
کالاهایی را که price آنها کمتر از 50 است، نمایش داده میشوند. تغییرات را
در فایل کلاس controller ذخیره کنید و پنجره مرورگر را دوباره باز کنید.
بدون توقف و یا راه اندازی مجدد برنامه در ویژوال استادیو، درخواست HTTP از
مرورگر باعث عملیات کامپایل میشود و برنامه با استفاده از تغییرات کلاس
Controller، دوباره راه اندازی خواهد شد و نتیجه را در زیر میتوانید
ببینیدکه محصولات Kayak را از جدول حذف میکند.
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
ویژگی
کامپایل خودکار زمانی مفید است که همه چیز برنامه ریزی شود. مشکل این است
که خطاهای کامپایلر، در زمان اجرا و در مرورگر بجای ویژوال استودیو نمایش
داده میشوند. در این حالت زمانیکه یک مشکل وجود دارد، سخت میتوان متوجه
شد که چه مشکلی ایجاد شده است. برای مثال، کدهای زیر اضافه کردن یک مقدار
Null را به مجموعه نمایش میدهد.
namespace WorkingWithVisualStudio.Models
{
public class SimpleRepository
{
private static SimpleRepository sharedRepository = new SimpleRepository();
private Dictionary<string, Product> products = new Dictionary<string, Product>();
public static SimpleRepository SharedRepository => sharedRepository;
public SimpleRepository()
{
var initialItems = new[] { new Product { Name = "Kayak", Price = 275M
}, new Product { Name = "Lifejacket", Price = 48.95M }, new Product {
Name = "Soccer ball", Price = 19.50M }, new Product { Name = "Corner
flag", Price = 34.95M } };
foreach (var p in initialItems)
{
AddProduct(p);
}
products.Add("Error", null);
}
public IEnumerable<Product> Products => products.Values;
public void AddProduct(Product p) => products.Add(p.Name, p);
}
}
مشکلی
مانند ورودی Null تا زمانیکه برنامه اجرا نشود، نمایش داده نمیشود.
بارگذاری صفحه مرورگر باعث میشود کلاس SimpleRepository به صورت خودکار
کامپایل شود و برنامه دوباره راه اندازی خواهد شد. هنگامیکه MVC نمونه‌ای
از کلاس Controller را برای پردازش درخواست HTTP از مرورگر ایجاد میکند،
سازنده HomeController کلاس SimpleRepository را ایجاد خواهد کرد که به
نوبه خود سعی میکند مقدار Null اضافه شده در لیست را پردازش کند. مقدار
Null باعث بروز یک مشکل میشود، اما مشخص نیست مشکل چیست. مرورگر یک پیام
مفید را نمایش نمیدهد.
توانایی نمایش صفحات خطاها
زمانیکه مشکلی
در پنجره‌ی مرورگر ایجاد شد، میتوان یک راهنمای با اطلاعات مفید را نمایش
داد. این قابلیت را میتوانید با فعال کردن نمایش صفحات انجام داد که باید
در تنظیمات کلاس Startup تغییرات زیر را اعمال کنید.
namespace WorkingWithVisualStudio
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseDeveloperExceptionPage();
}
}
}
}
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
اگر
پنجره مرورگر را دوباره بارگذاری کنید، فرآیند کامپایل خودکار به صورت
خودکار برنامه را بازسازی میکند و یک پیام خطای مفید‌تری را در مرورگر
ایجاد میکند. مانند تصویر زیر:
پیام خطایی که توسط مرورگر نشان
داده میشود، میتواند برای کشف مشکلات ساده، کافی باشد. اما برای مشکلات
پیچیده‌تر و برای مشکلاتی که بلافاصله آشکار نمی‌شوند، ویژوال استودیو برای
پیگیری خطا مورد نیاز است.
استفاده از Debugger
ویژوال
استادیو از اجرای یک برنامه MVC با استفاده از Debugger نیز پشتیبانی
میکند که اجازه میدهد برنامه برای بررسی وضعیت نرم افزار و دنبال کردن
درخواستی که به برنامه ارسال میشود، متوقف و از این طریق، پیگیری شود. این
مورد نیاز به یک سبک متفاوت از توسعه را دارد. زیرا تغییراتی را در
کلاسهای #C میدهیم، تا زمانیکه برنامه مجددا راه اندازی نشود، اعمال
نمی‌شوند ( هرچند تغییرات Razor View هنوز هم به صورت خودکار اعمال
میشوند). این سبک توسعه به همراه استفاده‌ی از ویژگی کامپایل خودکار نیست؛
اما Debugger ویژوال استودیو عالی است و میتواند بینش عمیق‌تری را در مورد
نحوه‌ی کارکرد برنامه داشته باشد. برای اجرای برنامه با استفاده Debugger،
در ویژوال استودیو از منوی Debug گزینه‌ی Start Debugging را انتخاب کنید.
ویژوال استودیو کلاسهای #C در پروژه را قبل از اجرای برنامه کامپایل
میکند. اما شما همچنان میتوانید با استفاده از موارد موجود در منوی
Build، کد خود را به صورت دستی نیز کامپایل کنید.
مثال فوق حاوی
مقدار NULL است که سبب میشود یک NullReferenceException توسط کلاس
SimpleRepository پرتاب شود. این حالت برنامه را قطع و کنترل اجرا را به
توسعه دهنده منتقل میکند؛ همانطور که در شکل زیر نشان داده شده است
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
نکته:
اگر Debugger خطا را نفهمد، گزینه‌ی Windows ➤ exception settings را از
منوی Debugger ویژوال استودیو انتخاب کنید و اطمینان حاصل کنید که تمام
انواع خطاهای در لیست خطاهای زمان اجرای زبان مشترک، تایید شده‌است.
تنظیم یک Break-point
Debugger
عامل اصلی خطا را نمایش نمیدهد؛ تنها مکان آن‌را آشکار میکند. عبارتیکه
ویژوال استودیو برجسته میکند نشان میدهد که این مشکل زمانی رخ میدهد که
فیلتر کردن اشیاء با استفاده از LINQ انجام شود، اما یک کار کوچک لازم است
تا از جزئیات کاسته شود و به علت اصلی برسد.
Breakpoint عبارتی است که
به Debugger می‌گوید تا برنامه را متوقف کند و کنترل دستی برنامه را به
برنامه نویس میدهد. شما میتوانید وضعیت برنامه را بازبینی کنید و ببینید
چه اتفاقی می‌افتد و به صورت اختیاری روند کاری را دوباره ادامه دهید.
برای ایجاد Breakpoint، روی عبارت راست کلیک کنید و در منوی باز شده، گزینه Breakpoint -> Insert Breakpoint را انتخاب کنید.
به عنوان مثال: یک Breakpoint به خط کد AddProduct در کلاس SimpleRepository اعمال کنید. همانطور که در شکل زیر نمایش داده میشود:
برنامه
را اجرا کنید؛ با استفاده از Debug -> Start Debugging و یا با استفاده
از Debug -> Restart برنامه را Restart میکنیم. در طی درخواست اولیه
HTTP، برنامه اجرا میشود تا به نقطه‌ای که Break Point دارد برسد و در آنجا
برنامه متوقف میشود. در این نقطه، شما میتوانید از آیتم‌های منوی Debug
ویژوال استودیو یا کنترل‌ها در بالای پنجره، برای کنترل اجرای برنامه
استفاده کنید؛ یا از نمایش‌های مختلف Debugger موجود از طریق Debug ->
Windows برای بررسی وضعیت برنامه استفاده میکنیم.
مشاهده مقادیر داده در ویرایشگر کد
رایج‌ترین
استفاده Break Point، ردیابی مشکلات در کد شماست. قبل از اینکه بتوانید یک
مشکل را رفع کنید، باید بدانید چه اتفاقی در حال رخ دادن است و یکی از
ویژگیهای مفید ویژوال استودیو این است که توانایی مشاهده و کنترل ارزش
متغیرها را درست در ویرایشگر کد، میدهد.
اگر اشاره‌گر ماوس را بر روی
پارامتر p به متد AddProduct که توسط Debugger برجسته شده‌است، حرکت دهید،
یک فرم ظاهر خواهد شد که ارزش فعلی p را نشان میدهد؛ همانطور که در شکل
زیر نشان داده شده‌است. من یک نمونه بزرگ شده از محتویات فرم ظاهر شده را
نمایش میدهم تا به راحتی بتوانید متن در آن را بخوانید.
این
مورد ممکن است مؤثر به نظر نرسد، چون شیء داده در یک سازنده همانند
BreakPoint تعریف شده‌است. اما این ویژگی‌ها برای هر متغیری کار میکند.
شما میتوانید مقادیر را مشاهده کنید تا مقادیر خود و فیلد آنها را ببینید.
هر مقدار دارای یک دکمه پین کوچک به سمت راست است. برای زمانیکه کد در
حال اجراست، برای نظارت بر مقدار، از آن استفاده کنید.
اشاره‌گر ماوس را
بر روی متغیر P قرار دهید و مرجع محصول را پین کنید. مرجع پیوست شده را
باز کنید تا بتوانید نام و قیمت را نیز ببینید؛ مانند شکل زیر:
گزینه
Continue را از منوی Debug در ویژوال استادیو انتخاب کنید تا برنامه ادامه
پیدا کند. از آنجا که در برنامه حلقه Foreach وجود دارد، برنامه که دوباره
اجرا میشود، وقتی مجددا به BreakPoint رسید، برنامه متوقف میشود. مقادیر
پین شده در شکل زیر نشان میدهند که چگونه متغیر P و خواص آن تغییر میکنند.
استفاده از پنجره متغیرهای محلی ( Local Windows )
یکی
از ویژگیهای مرتبط، پنجره Locals است که با انتخاب گزینه‌ی منوی Debug ➤
Windows ➤ Locals باز میشود. پنجره‌ی Locals، مقدار متغیرها را به شکلی
مشابه پنل پین شده نمایش میدهد، اما در اینجا تمام اشیاء محلی را نسبت به
Break Point نمایش میدهد؛ همانطور که در شکل زیر نشان داده شده‌است:
هربار که Continue را انتخاب میکنید، اجرای برنامه ادامه یافته و یک شیء دیگر توسط حلقه foreach پردازش میشود.
اگر
ادامه دهید، در زمان ویرایش کد، در هر دو پنجره Locals و در مقادیر پنل
پین شده، شما مرجع Null را می‌بینید. برای کنترل اجرای برنامه، میتوانید
جریان را از طریق کد خود در دیباگر دنبال کنید و احساس کنید که چه اتفاقی
می‌افتد.
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
برای
غیرفعال کردن BreakPoint، روی عبارت راست کلیک کنید و از منوی باز شده
گزینه Delete BreakPoint را انتخاب کنید. برنامه را دوباره راه اندازی کنید
و جدول داده ساده‌ای را که در شکل نشان داده شده، مشاهده خواهید کرد.
استفاده از Browser Link
ویژگی
Browser Link میتواند روند توسعه را با قرار دادن یک یا چند مرورگر تحت
کنترل ویژوال استودیو، ساده سازی کند. این ویژگی مخصوصا مفید است اگر شما
نیاز به دیدن اثر تغییرات را در طیف وسیعی از مرورگرها دارید. قابلیت
Browser Link با و یا بدون Debugger کار میکند و به این معنا است که
میتوانیم هر فایلی را در پروژه تغییر دهیم و تاثیر تغییر را بدون نیاز به
تغییری در مرورگر مشاهده کنیم.
راه اندازی BrowserLink
برای فعال کردن Browser Link باید در کلاس Startup، تنظیمات را تغییر دهید. مانند کد زیر:
namespace WorkingWithVisualStudio
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
app.UseDeveloperExceptionPage();
}
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
app.Run(async (context) =>
{
await context.Response.WriteAsync("Hello World!");
});
}
}
}
استفاده از Browser Link
برای
درک اینکه Browser Link چگونه کار میکند، در ویژوال استودیو گزینه Start
Without Debugging را از منوی Debug انتخاب میکنیم. ویژوال استودیو برنامه
را اجرا میکند و یک برگه جدید مرورگر را برای نمایش نتیجه باز میکند. با
بازبینی HTML ارسال شده به مرورگر، شما خواهید دید که حاوی بخش دیگری
مانند این است:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>>Working with Visual Studio</title>
</head>
<body>
<h3>Products</h3>
<table>
<thead>
<tr><td>Name</td><td>Price</td></tr>
</thead>
<tbody>
<tr><td>Lifejacket</td><td>£48.95</td></tr>
<tr><td>Soccer ball</td><td>£19.50</td></tr>
<tr><td>Corner flag</td><td>£34.95</td></tr>
</tbody>
</table>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"requestId":"968949d8affc47c4a9c6326de21dfa03","requestMappingFromServer":false}
</script>
<script type="text/javascript"
src="http://localhost:55356/d1a038413c804e178ef009a3be07b262/browserLink"
async="async"></script> <!-- End Browser Link -->
</body>
</html>
نکته: اگر قسمت اضافی را نمی‌بینید، لینک مرورگر را از منوی نشان داده شده‌ی در شکل زیر فعال کنید و مرورگر را دوباره بارگذاری کنید.
ویژوال
استادیو یک جفت عناصر اسکریپت را به HTML فرستاده شده‌ی به مرورگر اضافه
میکند که برای بازکردن یک اتصال طولانی مدت HTTP با سرور برنامه کاربردی
است؛ تا زمانیکه ویژوال استودیو مجددا برنامه را ری‌استارت کند. کد زیر
تغییر در فایل Index و تاثیر استفاده از Browser Link را نشان میدهد.
Code
تغییر
در فایل View را ذخیره کنید و Refresh Linked Browsers را از منوی Browser
Link در نوار ابزار ویژوال استودیو انتخاب کنید؛ همانطور که در شکل نشان
داده شده است. اگر Browser Link کار نمی‌کند، بارگیری مجدد مرورگر یا راه
اندازی مجدد ویژوال استادیو را امتحان کنید).
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
کد
جاوا اسکریپتی که در HTML ارسال شده به مرورگر جاسازی شده، صحفه را دوباره
بارگذاری میکند؛ برای دیدن تاثیرات کد اضافه شده که اضافه کردن یک
timestamp ساده است.
نکته: عناصر اسکریپت Browser Link فقط در
پاسخ‌های موفق جاسازی شده است. به این معنا که اگر یک خطا هنگام کامپایل در
هنگام اجرا کردن یک Razor View یا مدیریت یک درخواست ایجاد شود، اتصال بین
مرورگر و ویژوال استودیو از بین میرود و شما بعد از حل مشکل باید صفحه را
مجدد بارگذاری کنید.
استفاده از مرورگرهای متعدد
Browser
Link میتواند برای نمایش یک برنامه در مرورگرهای متعددی به طور همزمان
استفاده شود و میتواند زمانی مفید باشد که شما میخواهید تفاوت‌های پیاده
سازی را بین مرورگرهای مختلف کنترل کنید و یا ببینید که چگونه یک برنامه بر
روی ترکیبی از مرورگرهای دسکتاپ و تلفن همراه ارائه میشود.
برای
انتخاب مرورگرهایی که استفاده میشوند، مرورگر را با استفاده از دکمه IIS
Express در نوار ابزار ویژوال استودیو، انتخاب کنید؛ همانطور که در شکل زیر
نشان داده شده است.
ویژوال استودیو لیستی از مرورگرهایی
را که در مورد آنها اطلاعاتی دارد، نمایش میدهد. در عکس زیر مرورگرهایی را
که من در سیستم خود نصب کرده‌ام، نشان میدهد. برخی از آنها با ویندوز
مانند Internet Explorer و Edge نصب میشوند.
ویژوال استادیو
معمولا مرورگرهای رایجی را که نصب میشوند، نمایش میدهد. اما شما میتوانید
با استفاده از دکمه‌ی Add، برای اضافه کردن مرورگری که به صورت خودکار لیست
نشده نیز استفاده کنید. همچنین میتوانید ابزار تست شخص ثالث مانند
Browser Stack را نیز راه اندازی کنید که مرورگرها را بر روی سرویس‌های
ابری میزبان ( cloud-hosted ) و ماشین‌های مجازی اجرا میکند.
من سه
مرورگر را در شکل انتخاب کردم: Chrome ، Internet Explorer و Edge. با
کلیک بر روی دکمه Browse، فعالیت هر سه مرورگر شروع میشود و باعث میشود
URL مثال برنامه را بارگذاری کند؛ همانطور که در شکل نشان داده شده است.
با
استفاده از منوی Browser Link Dashboard، شما میتوانید ببینید که چه
مرورگرهایی در Browser Link انتخاب شده‌اند. داشبورد آن نشانی اینترنتی
نمایش داده شده توسط هر مرورگر را نشان میدهد و در اینجا هر مرورگر را
میتوان به صورت جداگانه رفرش کرد.
آماده سازی جاوا اسکریپت و CSS برای استقرار
هنگامی
که Client-Side بخشی از یک برنامه وب را ایجاد میکنید، معمولا تعدادی از
فایلهای جاوا اسکریپت و CSS سفارشی را تهیه میکنید که برای تکمیل آنها،
از بسته‌های نصب شده‌ی توسط Bower استفاده میشود. این فایل‌ها نیاز به
پردازش دارند تا آنها را برای تحویل در یک محیط تولید، بهینه سازی کنند تا
تعداد درخواستهای HTTP و میزان پهنای باند شبکه مورد نیاز برای ارسال آنها
به مشتری، به حداقل برسد. این فرآیند به عنوان بسته بندی شناخته میشود.
فعال کردن تحویل محتوای استاتیک
ASP.Net
Core شامل پشتیبانی از ارائه فایلهای استاتیک از پوشه wwwroot به مشتریان
است. اما این امکان به صورت پیشفرض در زمان ایجاد یک پروژه‌ی خالی جدید
فعال نیست و شما باید با قرار دادن عبارتی در فایل StartUp آن را فعال
کنید؛ مانند کد زیر:
namespace WorkingWithVisualStudio
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
app.UseStaticFiles();
app.UseDeveloperExceptionPage();
}
app.Run(async (context) =>
{
await context.Response.WriteAsync("Hello World!");
});
}
}
}
اضافه کردن محتوای استاتیک به پروژه
برای
نشان دادن فرآیند بسته بندی، من نیاز به اضافه کردن تعدادی محتوای استاتیک
به پروژه و یکی کردن آنها با برنامه‌ی نمونه را دارم. برای این منظور
ابتدا یک پوشه‌ی جدید را به نام wwwroot/css ایجاد کنید که محل متداولی
برای فایلهای سفارشی CSS است. من فایلی را به نام First.css با استفاده از
قالب آیتم Style Sheet اضافه کردم؛ همانطور که در شکل زیر نشان داده شده
است. قالب Style Sheet در مسیر Asp.Net Core -> Web -> Content
Section وجود دارد.
فایل First.Css را ویرایش کنید و محتوای زیر را در آن قرار دهید.
h3 {
}
table, td {
border: 2px solid black;
border-collapse: collapse;
padding: 5px;
}
من این روند را تکرار کردم و یک فایل دیگر را نیز به نام second.css در پوشه wwwroot/css ایجاد کردم.
فایلهای
جاوا اسکریپت معمولا در پوشه wwwroot/js قرار میگیرند. من این پوشه را
ایجاد کردم. فایلهای جاوا اسکریپت را میتوانید در مسیر Asp.Net Core
-> Web -> Script انتخاب کنید. همانطور که در شکل زیر نشان داده شده
است.
من کد جاوا اسکریپتی ساده زیر را به این فایل جدید اضافه کردم؛ همانطور که در لیست نشان داده شده است.
document.addEventListener("DOMContentLoaded", function ()
{
var element = document.createElement("p");
element.textContent = "This is the element from the third.js file";
document.querySelector("body").appendChild(element);
});
من
به بیش از یک فایل جاوا اسکریپت نیاز دارم. بنابراین فایل دیگری را به نام
fourth.js نیز در پوشه wwwroot ایجاد می‌کنم و محتوای زیر را در آن قرار
میدهم.
document.addEventListener("DOMContentLoaded", function ()
{
var element = document.createElement("p");
element.textContent = "This is the element from the fourth.js file";
document.querySelector("body").appendChild(element);
});
به روز رسانی View
گام نهایی، به روز رسانی فایل Index.cshtml برای استفاده از Css و فایل جاوا اسکریپت است. کدهای آن در زیر نشان داده شده است:
Code
اگر
برنامه کاربردی را اجرا کنید، محتویات نشان داده شده‌ی در شکل زیر را
مشاهده خواهید کرد. محتوای موجود توسط شیوه نامه‌های CSS شبیه سازی شده است
و کد جاوا اسکریپتی جدیدی را اضافه کرده است.
یکی کردن فایلهای سمت کلاینت در برنامه‌های MVC
در
حال حاضر چهار فایل استاتیک وجود دارند و مرورگر باید چهار درخواست را
برای دریافت فایلهای استاتیک ایجاد کند و هر یک از این فایل‌ها نیازمند
پهنای باند بیشتری است که باید به مشتری تحویل داده شود؛ زیرا آنها حاوی
فضای سفید و نام متغیرها هستند که برای توسعه دهنده‌ها معنا دار هستند؛ اما
برای مرورگرها اهمیتی ندارند.
ترکیب فایل‌هایی هم نوع، تلفیق نامیده
میشود و در آن کار ساختن فایل‌ها به صورتی کوچکتر انجام میشود. هر دوی
این کارها در برنامه Asp.Net Core MVC توسط Bundler & Minifier مخصوص
ویژوال استودیو انجام میشود.
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
azsoftir@gmail.com
azsoftir.com
09367292276azsoftir@gmail.com
azsoftir.com
09367292276
نصب افزونه‌های ویژوال استودیو
اولین
قدم برای نصب افزونه، انتخاب از منوی Tools -> Extensions and Update و
کلیک بر روی مجموعه Online است تا افزونه‌های ویژوال استودیو را در مجموعه
نمایش بدهد. نام افزونه را در جعبه جستجوی در گوشه‌ی سمت راست بالای پنجره
وارد کنید؛ همانطور که در شکل زیر نشان داده شده است. محل نصب افزونه را
مشخص میکنیم و بر روی دانلود کلیک میکنیم تا آن را به ویژوال استودیو
اضافه کند. ویژوال استودیو را مجدد راه اندازی کنید تا فرآیند نصب تکمیل
شود.
دسته بندی و یکی کردن فایل‌ها
پس از نصب افزونه،
ویژوال استودیو را مجددا راه اندازی کنید و پروژه نمونه را باز کنید. با
افزودن افزونه، میتوانید چندین فایل هم نوع را در Solution Explorer
انتخاب کنید. آنها را با یکدیگر ترکیب کرده و محتویات آنها را کوچکتر کنید.
به عنوان مثال فایلهای First.css و Second.css را در Solution Explorer
را انتخاب و کلیک راست کرده و سپس Bundler & Minifier -> Bundle and
Minify Files را از منوی باز شده انتخاب کنید . همانطور که در شکل ز