عملیات CRUD در ASP.NET Core MVC با استفاده از Visual Studio Code

در مقاله عملیات CRUD ، توضیح خواهیم داد که چگونه یک برنامه ‏ی وب پایه با استفاده از ASP.NET Core MVC و ویژوال استودیو کد در یک سیستم دارای ویندوز ایجاد کنید. یک نمونه Employee Records Management System (سیستم مدیریت رکورد کارمندان) ایجاد خواهیم کرد.از ASP.NET Core ۲.۰، Entity Framework و SQLite استفاده خواهیم کرد.

پیش‏نیاز‏ها

•  .NET Core 2.0.0 SDK را از اینجا نصب کنید.
•  ویژوال استودیو کد را از اینجا دانلود و نصب کنید.
•  از اینجا با ویژوال استودیو کد آشنایی پیدا کنید.

حالا آماده‏ ی ادامه‏ ی کار برای ایجاد اولین برنامه‏ ی وب خود هستیم.

ایجاد MVC Web App جهت عملیات CRUD

کلید‏های ترکیبی Window+R را فشار دهید. پنجره‏ ی “Run” را باز خواهد کرد. تایپ کنید ‘cmd’ و OK کنید. خط فرمان را در سیستم شما باز خواهد کرد.

عملیات CRUD

فرمان‏ های زیر را تایپ کنید. برنامه‎ی MVC ما به نام “MvcDemo” را ایجاد خواهد کرد.

•  mkdir MvcDemo
•  cd MvcDemo
•  dotnet new mvc

عملیات CRUD

این برنامه‏ ی “MvcDemo” را با استفاده از ویژوال استودیو کد باز کنید. اگر پیام ” Required assets to build and debug are missing from ‘MvcDemo’. Add them?” را نشان داد، “Yes” را انتخاب کنید.

عملیات CRUD

افزودن Model Class داده

روی پوشه ‏ی Models راست کلیک کرده و “New File” را انتخاب کنید. نامی مانند Employee.cs به آن اختصاص دهید. این کار یک فایل در پوشه‏ ی Models ایجاد خواهد کرد.

عملیات CRUD

فایل Employee.cs را باز کرده و کد زیر را برای ایجاد کلاس Employee در آن کپی کنید.

using System; 
using System.ComponentModel.DataAnnotations; 

namespace MvcDemo.Models 
{ 
public class Employees 
{ 
public int Id { get; set; } 
[Required] 
public string Name { get; set; } 
[Required] 
public string City { get; set; } 
[Required] 
public string Department { get; set; } 
[Required] 
public int Salary {get;set;} 
} 
}  

از آنجایی که ما در حال افزودن اعتبارسنج‏ های مورد نیاز (validators) به فیلد‏های کلاس Employee هستیم، بنا‏بر‏این نیاز به استفاده از System.ComponentModel.DataAnnotations در بالا داریم.

افزودن ارجاعات برای چارچوب‏ بندی (scaffolding)

حال، کلاس مدل داده‏ ی ما ایجاد شده است. View ها و Controller ها را با استفاده از چارچوب‏ بندی ایجاد خواهیم کرد. برای چارچوب‏ بندی، نیاز است تا ارجاع ‏های پکیج NuGet را در تگ در فایل MvcDemo.csproj اضافه کنیم.

<Project Sdk="Microsoft.NET.Sdk.Web">  
  
  <PropertyGroup>  
    <TargetFramework>netcoreapp2.0</TargetFramework>  
  </PropertyGroup>  
  
  <ItemGroup>  
    <PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />  
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.0" />  
  </ItemGroup>  
  
  <ItemGroup>  
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />  
    <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />  
  </ItemGroup>  
  
</Project>  

فایل را ذخیره کرده و “Restore” را برای پیام اطلاعاتی “There are unresolved dependencies” انتخاب کنید.
حالا MvcDemo.csproj شما مانند این تصویر خواهد بود.

عملیات CRUD

قدم بعدی اضافه کردن فایل MVCEmployeeContext.cs در پوشه‏ ی Models ماست. فایل را باز کرده و خطوط کد زیر را اضافه کنید.

using Microsoft.EntityFrameworkCore;  
  
namespace MvcDemo.Models  
{  
    public class MvcEmployeeContext : DbContext  
    {  
        public MvcEmployeeContext (DbContextOptions<MvcEmployeeContext> options)  
            : base(options)  
        {  
        }  
  
        public DbSet<MvcDemo.Models.Employees> Employee { get; set; }  
    }  
}  

حالا فایل MVCEmployeeContext.cs شما به این شکل خواهد بود.

عملیات CRUD

حالا فایل Startup.cs را باز کرده و دو عبارت استفاده شده‏ی زر را در بالای کد اضافه کنید.

using Microsoft.EntityFrameworkCore;  
using MvcDemo.Models  

متن پایگاه داده (database context) را با افزودن خط زیر در متد ConfigureServices به فایل Startup.cs اضافه کنید.

services.AddDbContext<MvcEmployeeContext>(options =>options.UseSqlite("Data Source=MvcEmployee.db")); 

این خط کد به Entity Framework می‏گوید که کدام کلاس ‏های مدل در مدل داده قرار دارند. شما یک مجموعه موجودیت از شیء Employee را تعریف می‏کنید که در پایگاه داده به عنوان یک جدول Employee نمایش داده خواهد شد.
بنا‏بر‏این Startup.cs ما به این شکل خواهد بود:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
using Microsoft.AspNetCore.Builder;  
using Microsoft.AspNetCore.Hosting;  
using Microsoft.Extensions.Configuration;  
using Microsoft.Extensions.DependencyInjection;  
using Microsoft.EntityFrameworkCore;  
using MvcDemo.Models;  
  
namespace MvcDemo  
{  
    public class Startup  
    {  
        public Startup(IConfiguration configuration)  
        {  
            Configuration = configuration;  
        }  
  
        public IConfiguration Configuration { get; }  
        public void ConfigureServices(IServiceCollection services)  
        {  
            services.AddMvc();  
  
            services.AddDbContext<MvcEmployeeContext>(options =>options.UseSqlite("Data Source=MvcEmployee.db"));  
        }  
  
        // 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();  
            }  
            else  
            {  
                app.UseExceptionHandler("/Home/Error");  
            }  
  
            app.UseStaticFiles();  
  
            app.UseMvc(routes =>  
            {  
                routes.MapRoute(  
                    name: "default",  
                    template: "{controller=Home}/{action=Index}/{id?}");  
            });  
        }  
    }  
}  

چارچوب بندی کنترل کننده‏ ی Employee

حال، قرار است کنترل کننده و فایل ‏های Razor view را Scaffold (چارچوب بندی) کنیم. در سیستم خود به پوشه‏ ی پروژه ‏ی MvcDemo بروید.
کلید Shift را فشار داده و نگه دارید و راست کلیک کنید، گزینه ‏ی “open PowerShell window here” را همانطور که در تصویر زیر نشان داده شده به شما خواهد داد. کلیک کنید و یک پنجره‏ ی PowerShell باز خواهد کرد.

عملیات CRUD

در اینجا، من از PowerShell ویندوز استفاده می‏کنم اما شما می‎توانید از خط فرمان هم استفاده کنید. نتایج یکسانی را خواهد داد.
فرمان‏های زیر را در کنسول PowerShell اجرا کنید.

•  dotnet restore
•  dotnet aspnet-codegenerator controller -name EmployeeController -m Employees -dc MvcEmployeeContext –relativeFolderPath Controllers –useDefaultLayout –referenceScriptLibraries

عملیات CRUD

این کار موارد زیر را در پروژه‏ ی ما ایجاد خواهد کرد.

• یک کنترل کننده‏ ی Employee (Controllers/EmployeeController.cs)
•  فایل ‏های Razor view برای ایجاد، حذف، جزئیات، تصحیح و صفحات فهرست (Views/Employee/\.cshtml)

عملیات CRUD

این فرآیند ایجاد خودکار متد‏های عمل CRUD (Create, Read, Update, Delete) {ایجاد، خواندن، بروز‏رسانی، حذف} و نماها به عنوان چارچوب بندی (scaffolding) شناخته می‏شود.

انتقال اولیه ‏ی پایگاه داده

دوباره PowerShell در پوشه‏ ی Project را باز کنید وفرمان‏های زیر را اجرا کنید:

dotnet ef migrations add InitialCreate
dotnet ef database update

فرمان “dotnet ef migrations add InitialCreate” برای ایجاد طرح اولیه ‏ی پایگاه داده کد تولید می‏کند. این طرح بر پایه ‏ی مدل مشخص شده در DbContext (در فایل Models/MVCEmployeeContext.cs) است.

عملیات CRUD

پس از اجرای فرمان دوم یک پیام “Done” در انتها دریافت خواهید کرد.
و همین. اولین برنامه ‏ی ASP.Net Core MVC خود را ایجاد کرده ایم.
پیش از اجرای برنامه، launch.json را باز کنید و اطمینان حاصل کنید که مسیر ‘Program’ به درستی مانند زیر تعیین شده است.

"program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/MvcDemo.dll"  

حال، launch.json شما به این شکل خواهد بود:

{  
   // Use IntelliSense to find out which attributes exist for C# debugging  
   // Use hover for the description of the existing attributes  
   // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md  
   "version": "0.2.0",  
   "configurations": [  
        {  
            "name": ".NET Core Launch (web)",  
            "type": "coreclr",  
            "request": "launch",  
            "preLaunchTask": "build",  
            // If you have changed target frameworks, make sure to update the program path.  
            "program": "${workspaceRoot}/bin/Debug/netcoreapp2.0/MvcDemo.dll",  
            "args": [],  
            "cwd": "${workspaceRoot}",  
            "stopAtEntry": false,  
            "internalConsoleOptions": "openOnSessionStart",  
            "launchBrowser": {  
                "enabled": true,  
                "args": "${auto-detect-url}",  
                "windows": {  
                    "command": "cmd.exe",  
                    "args": "/C start ${auto-detect-url}"  
                },  
                "osx": {  
                    "command": "open"  
                },  
                "linux": {  
                    "command": "xdg-open"  
                }  
            },  
            "env": {  
                "ASPNETCORE_ENVIRONMENT": "Development"  
            },  
            "sourceFileMap": {  
                "/Views": "${workspaceRoot}/Views"  
            }  
        },  
        {  
            "name": ".NET Core Attach",  
            "type": "coreclr",  
            "request": "attach",  
            "processId": "${command:pickProcess}"  
        }  
    ]  
}  

حالا کلید F5 را برای اشکال‏ یابی برنامه فشار دهید. مرورگر را باز خواهد کرد، به http://localhost:xxxx/employee بروید.

می‏توانید صفحه ‏ای که در زیر نشان داده شده است را ببینید.

عملیات CRUD

حال به سراغ عملیات CRUD خواهیم رفت.
روی CreateNew برای ایجاد یک رکورد Employee جدید کلیک کنید. یک رکورد Employee جدید همانطور که در تصویر زیر نشان داده شده اضافه کنید.

عملیات CRUD

اگر هنگام ایجاد رکورد کارمند فیلدی را بدون داده بگذاریم، یک پیام اعتبارسنجی فیلد مورد نیاز دریافت خواهیم کرد.

عملیات CRUD