دوره های آموزشی سایت دانشجویار

اضافه ویرایش حذف در انگولار ۵ با ۲.۱.NET Core با استفاده از Entitiframework

Loading...
انگولار 5 با 2.1.NET Core

در این مقاله به سراغ انگولار ۵ با ۲.۱.NET Core رفتیم که یک پروژه عملی را با آن ایجاد کنیم و امروز یاد می‏گیریم که چطور عملیات CRUD رادر انگولار ۵ با ۲.۱.NET Core با استفاده از Entity Framework به وسیله‏ ی ASP.NET Core ۲.۱ و Angular 5 به کمک VS2017، اولین رویکرد پایگاه داده‏ ی Entity Framework Core.

معرفی بخش های آموزش :

  1. معرفی پروژه انگولار
  2. نصب
  3. پایگاه داده
  4. ایجاد برنامه‏ ی وب MVC
  5. افزودن Model به Application
  6. افزودن کنترل کننده ‏ی API وب (Web API Controller) به Application
  7. ایجاد سرویس انگولار
  8. ایجاد کامپوننت‏ های انگولار
  9. تعریف مسیر و منوی جهت‏ یابی (navigation menu) برای برنامه‏ ی خود و اجرای برنامه
  10. معرفی پروژه انگولار ۵ با ۲.۱.NET Core

نصب

  •  .NET Core 2.1 یا SDK بالا را از اینجا نصب کنید.
  •  آخرین نسخه ‏ی Visual Studio 2017 Community Edition را از اینجا نصب کنید.
  •  آخرین نسخه ‏ی Node.js را از اینجا دانلود و نصب کنید.
  •  SQL Server 2008 یا بالاتر.

پایگاه داده

یک پایگاه داده با نامی مشابه Angular5_core2 ایجاد کرده و دو جدول ایجاد کنید.

CREATETABLE tblEmployee (  
  EmployeeID int IDENTITY(1, 1) NOT NULL PRIMARYKEY,   
  Namevarchar(20) NOT NULL,   
  City varchar(20) NOT NULL,   
  Department varchar(20) NOT NULL,   
  Gender varchar(6) NOT NULL  
) GO CREATETABLE tblCities (  
  CityID int IDENTITY(1, 1) NOT NULL PRIMARYKEY,   
  CityName varchar(20) NOT NULL  
) GO  

حالا تعدادی داده را در جدول tblCities خواهیم گذاشت. از این جدول برای اتصال یک لیست آبشاری در برنامه ‏ی وب خود استفاده خواهیم کرد که شهر دلخواه می‏تواند از آن انتخاب شود. از دستورات ورودی زیر (insert statements) استفاده کنید.

INSERTINTO tblCities   
VALUES   
  ('Surat');  
INSERTINTO tblCities   
VALUES   
  ('Mumbai');  
INSERTINTO tblCities   
VALUES   
  ('Amreli');  
INSERTINTO tblCities   
VALUES   
  ('Vadodara');  
INSERTINTO tblCities   
VALUES   
  (Bharuch);  
انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

ایجاد MVC Web Application

ویژوال استودیو را باز کرده و از منوی File، New Project را انتخاب، سپس .NET Core 2.1 و بعد “ASP .NET Core Web Application” را از انواع پروژه ‏های موجود انتخاب کنید. نام پروژه را بصورت EFNgApp قراده داده و OK کنید.

انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

سپس .NET Core 2.1 را انتخاب و OK کنید.

 

انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

• پروژه‏ ی شما ایجاد شده، حالا ساختار این پروژه را ببینید.

افزودن Model به برنامه

  •  کنسول مدیریت پکیج را باز کرده و تعدادی فرمان بنویسید.
    •   Install-Package Microsoft.EntityFrameworkCore.SqlServer –Version 2.1.0-preview1-final
      Install-Package Microsoft.EntityFrameworkCore.Tools –Version 2.1.0-preview1-final
  •  بعد از اینکه هر دو پکیج را نصب کردید، مدلمان را از جداول پایگاه داده، با استفاده از فرمانی که در ادامه می ‏آید، چارچوب بندی (scaffold) خواهیم کرد:
    • Scaffold-DbContext “Your connection string here” Microsoft.EntityFrameworkCore.SqlServer –OutputDir Models –Tables tblEmployee, tblCities.فراموش نکنید که رشته‏ ی اتصال خود را (میان ” “) قرار دهید. سپس این فرمان با موفقیت اجرا می‏شود.

حالا مدل شما با موفقیت ایجاد خواهد شد.

روی پوشه ‏ی Models راست کلیک کرده و add class EmployeeDataAccessLayer.cs را انتخاب کنید.

ساختار شما به این شکل نمایش داده خواهد شد.

انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

EmployeeDataAccessLayer.cs را باز کنید و کد زیر را برای عملیات مدیریت و کنترل پایگاه داده نظیر عملیات افزودن به لیست، بروز رسانی و همچنین حذف، قرار دهید.

using Microsoft.EntityFrameworkCore;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
namespace EFNgApp.Models {  
    public class EmployeeDataAccessLayer {  
        Angular5_core2Context db = new Angular5_core2Context();  
        public IEnumerable < TblEmployee > GetAllEmployee() {  
            try {  
                return db.TblEmployee.ToList();  
            } catch {  
                throw;  
            }  
        }  
        //To Add new employee record  
        public int AddEmployee(TblEmployee employee) {  
            try {  
                db.TblEmployee.Add(employee);  
                db.SaveChanges();  
                return 1;  
            } catch {  
                throw;  
            }  
        }  
        //To Update the records of a particluar employee  
        public int UpdateEmployee(TblEmployee employee) {  
            try {  
                db.Entry(employee).State = EntityState.Modified;  
                db.SaveChanges();  
                return 1;  
            } catch {  
                throw;  
            }  
        }  
        //Get the details of a particular employee  
        public TblEmployee GetEmployeeData(int id) {  
            try {  
                TblEmployee employee = db.TblEmployee.Find(id);  
                return employee;  
            } catch {  
                throw;  
            }  
        }  
        //To Delete the record of a particular employee  
        public int DeleteEmployee(int id) {  
            try {  
                TblEmployee emp = db.TblEmployee.Find(id);  
                db.TblEmployee.Remove(emp);  
                db.SaveChanges();  
                return 1;  
            } catch {  
                throw;  
            }  
        }  
        //To Get the list of Cities  
        public List < TblCities > GetCities() {  
            List < TblCities > lstCity = new List < TblCities > ();  
            lstCity = (from CityList in db.TblCities select CityList).ToList();  
            return lstCity;  
        }  
    }  
} 

افزودن Web API Controller به برنامه

روی پوشه و کنترل کننده ‏ی Controllers راست کلیک کرده و سپس “Web API Controller Class” را از پنل قالب ‏ها انتخاب کنید و نام را به صورت EmployeeController.cs قرار دهید. OK کنید.

انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

فایل EmployeeController.cs را باز کنید و کد زیر را درآن قرار دهید.

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Threading.Tasks;  
using EFNgApp.Models;  
using Microsoft.AspNetCore.Mvc;  
// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860  
namespace EFNgApp.Controllers {  
    public class EmployeeController: Controller {  
        EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();  
        [HttpGet]  
        [Route("api/Employee/Index")]  
        public IEnumerable < TblEmployee > Get() {  
                return objemployee.GetAllEmployee();  
            }  
            [HttpPost]  
            [Route("api/Employee/Create")]  
        public int Create([FromBody] TblEmployee employee) {  
                return objemployee.AddEmployee(employee);  
            }  
            [HttpGet]  
            [Route("api/Employee/Details/{id}")]  
        public TblEmployee Details(int id) {  
                return objemployee.GetEmployeeData(id);  
            }  
            [HttpPut]  
            [Route("api/Employee/Edit")]  
        public int Edit([FromBody] TblEmployee employee) {  
                return objemployee.UpdateEmployee(employee);  
            }  
            [HttpDelete]  
            [Route("api/Employee/Delete/{id}")]  
        public int Delete(int id) {  
                return objemployee.DeleteEmployee(id);  
            }  
            [HttpGet]  
            [Route("api/Employee/GetCityList")]  
        public IEnumerable < TblCities > Details() {  
            return objemployee.GetCities();  
        }  
    }  
}  
انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

ایجاد Angular Service

یک سرویس انگولار ایجاد خواهیم کرد که پاسخ Web API را به JSON تبدیل کرده و به کامپوننت ما می‏فرستد.
روی پوشه ‏ی ClientApp/app راست کلیک و سپس Add → New Folder و نام پوشه را Services بگذارید.
حال، خط فرمان را با آدرس محل سرویس باز کنید و فرمان ایجاد یک سرویس جدید با استفاده از CLI را بنویسید.

Ng generate service empservice –spec=false
–spec=false به سیستم می‏گوید که فایل spec.ts را ایجاد نکند، چرا که به آن احتیاجی نداریم.
فایل empservice.service.ts را باز کنید و کد زیر را در آن قرار دهید.

import {  
    Injectable,  
    Inject  
} from '@angular/core';  
import {  
    Http,  
    Response  
} from '@angular/http';  
import {  
    Observable  
} from 'rxjs/Observable';  
import {  
    Router  
} from '@angular/router';  
import 'rxjs/add/operator/map';  
import 'rxjs/add/operator/catch';  
import 'rxjs/add/observable/throw';  
@Injectable()  
export class EmpserviceService {  
    myAppUrl: string = "";  
    constructor(private _http: Http, @Inject('BASE_URL') baseUrl: string) {  
        this.myAppUrl = baseUrl;  
    }  
    getCityList() {  
        return this._http.get(this.myAppUrl + 'api/Employee/GetCityList').map(res => res.json()).catch(this.errorHandler);  
    }  
    getEmployees() {  
        return this._http.get(this.myAppUrl + 'api/Employee/Index').map((response: Response) => response.json()).catch(this.errorHandler);  
    }  
    getEmployeeById(id: number) {  
        return this._http.get(this.myAppUrl + "api/Employee/Details/" + id).map((response: Response) => response.json()).catch(this.errorHandler)  
    }  
    saveEmployee(employee) {  
        return this._http.post(this.myAppUrl + 'api/Employee/Create', employee).map((response: Response) => response.json()).catch(this.errorHandler)  
    }  
    updateEmployee(employee) {  
        return this._http.put(this.myAppUrl + 'api/Employee/Edit', employee).map((response: Response) => response.json()).catch(this.errorHandler);  
    }  
    deleteEmployee(id) {  
        return this._http.delete(this.myAppUrl + "api/Employee/Delete/" + id).map((response: Response) => response.json()).catch(this.errorHandler);  
    }  
    errorHandler(error: Response) {  
        console.log(error);  
        return Observable.throw(error);  
    }  
}  

ایجاد Angular Components در انگولار ۵ با ۲.۱.NET Core

پوشه ‏ی جدید را در ClientApp/src/app ایجاد و نام آن را Components بگذارید.
ما دو کامپوننت انگولار به برنامه‏ مان اضافه خواهیم کرد.

  • کامپوننت fetchemployee – برای نمایش تمام داده‏ های کارمند (employee) و حذف یک داده‏ ی کارمند موجود.
  •  کامپوننت addemployee – برای افزودن یک داده ‏ی کارمند جدید یا تصحیح یک داده‏ ی کارمند موجود.

حالا خط فرمان را با دایرکتوری کامپوننت خود باز کنید و فرمان را به این صورت بنویسید.
ng g c add-employee –spec=false
پس از پردازش کامل این فرمان، برای کامپوننت fetch-employee فرمان بنویسید.
ng g c fetch-employee –spec=false
g=generate
c=component

انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

حالا ClientApp/app/components ما شبیه به تصویر زیر خواهد بود.

حال، فایل add-employee.component.ts را باز کنید و کد زیر را در آن قرار دهید.

import {  
    Component,  
    OnInit  
} from '@angular/core';  
import {  
    Http,  
    Headers  
} from '@angular/http';  
import {  
    NgForm,  
    FormBuilder,  
    FormGroup,  
    Validators,  
    FormControl  
} from '@angular/forms';  
import {  
    Router,  
    ActivatedRoute  
} from '@angular/router';  
import {  
    FetchEmployeeComponent  
} from '../fetch-employee/fetch-employee.component';  
import {  
    EmpserviceService  
} from '../../services/empservice.service';  
@Component({  
    selector: 'app-add-employee',  
    templateUrl: './add-employee.component.html',  
    styleUrls: ['./add-employee.component.css']  
})  
export class AddEmployeeComponent implements OnInit {  
    employeeForm: FormGroup;  
    title: string = "Create";  
    employeeId: number;  
    errorMessage: any;  
    cityList: Array < any > = [];  
    constructor(private _fb: FormBuilder, private _avRoute: ActivatedRoute, private _employeeService: EmpserviceService, private _router: Router) {  
        if (this._avRoute.snapshot.params["id"]) {  
            this.employeeId = this._avRoute.snapshot.params["id"];  
        }  
        this.employeeForm = this._fb.group({  
            employeeId: 0,  
            name: ['', [Validators.required]],  
            gender: ['', [Validators.required]],  
            department: ['', [Validators.required]],  
            city: ['', [Validators.required]]  
        })  
    }  
    ngOnInit() {  
        this._employeeService.getCityList().subscribe(data => this.cityList = data)  
        if (this.employeeId > 0) {  
            this.title = "Edit";  
            this._employeeService.getEmployeeById(this.employeeId).subscribe(resp => this.employeeForm.setValue(resp), error => this.errorMessage = error);  
        }  
    }  
    save() {  
        if (!this.employeeForm.valid) {  
            return;  
        }  
        if (this.title == "Create") {  
            this._employeeService.saveEmployee(this.employeeForm.value).subscribe((data) => {  
                this._router.navigate(['/fetch-employee']);  
            }, error => this.errorMessage = error)  
        } else if (this.title == "Edit") {  
            this._employeeService.updateEmployee(this.employeeForm.value).subscribe((data) => {  
                this._router.navigate(['/fetch-employee']);  
            }, error => this.errorMessage = error)  
        }  
    }  
    cancel() {  
        this._router.navigate(['/fetch-employee']);  
    }  
    get name() {  
        return this.employeeForm.get('name');  
    }  
    get gender() {  
        return this.employeeForm.get('gender');  
    }  
    get department() {  
        return this.employeeForm.get('department');  
    }  
    get city() {  
        return this.employeeForm.get('city');  
    }  
}  

این کامپوننت هم برای افزودن و هم برای تصحیح داده ‏های کارمند استفاده خواهد شد. حال، فایل add-employee.component.html را باز کنید و کد زیر را در آن قرار دهید.

<h1>{{title}}</h1>  
<h3>Employee</h3>  
<hr />  
<form [formGroup]="employeeForm" (ngSubmit)="save()" #formDir="ngForm" novalidate>  
    <div class="form-group row"> <label class=" control-label col-md-12">Name</label>  
        <div class="col-md-4"> <input class="form-control" type="text" formControlName="name"> </div> <span class="text-danger" *ngIf="name.invalid && formDir.submitted">  
Name is required.  
</span> </div>  
    <div class="form-group row"> <label class="control-label col-md-12" for="Gender">Gender</label>  
        <div class="col-md-4"> <select class="form-control" data-val="true" formControlName="gender">  
<option value="">-- Select Gender --</option>  
<option value="Male">Male</option>  
<option value="Female">Female</option>  
</select> </div> <span class="text-danger" *ngIf="gender.invalid && formDir.submitted">  
Gender is required  
</span> </div>  
    <div class="form-group row"> <label class="control-label col-md-12" for="Department">Department</label>  
        <div class="col-md-4"> <input class="form-control" type="text" formControlName="department"> </div> <span class="text-danger" *ngIf="department.invalid && formDir.submitted">  
Department is required  
</span> </div>  
    <div class="form-group row"> <label class="control-label col-md-12" for="City">City</label>  
        <div class="col-md-4"> <select class="form-control" data-val="true" formControlName="city">  
<option value="">--Select City--</option>  
<option *ngFor="let city of cityList"  
value={{city.cityName}}>  
{{city.cityName}}  
</option>  
</select> </div> <span class="text-danger" *ngIf="city.invalid && formDir.submitted">  
City is required  
</span> </div>  
    <div class="form-group"> <button type="submit" class="btn btn-default">Save</button> <button class="btn" (click)="cancel()">Cancel</button> </div>  
</form>    

فایل fetch-employee.component.ts را باز کنید و کد زیر را در آن قرار دهید.

import {  
    Component,  
    Inject  
} from '@angular/core';  
import {  
    Http,  
    Headers  
} from '@angular/http';  
import {  
    Router,  
    ActivatedRoute  
} from '@angular/router';  
import {  
    EmpserviceService  
} from '../../services/empservice.service'  
@Component({  
    selector: 'app-fetch-employee',  
    templateUrl: './fetch-employee.component.html',  
    styleUrls: ['./fetch-employee.component.css']  
})  
export class FetchEmployeeComponent {  
    public empList: EmployeeData[];  
    constructor(public http: Http, private _router: Router, private _employeeService: EmpserviceService) {  
        this.getEmployees();  
    }  
    getEmployees() {  
        this._employeeService.getEmployees().subscribe(data => this.empList = data)  
    }  
    delete(employeeID) {  
        var ans = confirm("Do you want to delete customer with Id: " + employeeID);  
        if (ans) {  
            this._employeeService.deleteEmployee(employeeID).subscribe((data) => {  
                this.getEmployees();  
            }, error => console.error(error))  
        }  
    }  
}  
interface EmployeeData {  
    employeeId: number;  
    name: string;  
    gender: string;  
    city: string;  
    department: string;  
}  
}  

تعیین مسیر و منوی جهت‏ یابی برای برنامه‏ ی خود

حالا، مسیر کامپوننت خود را در فایل app.module.ts اضافه کنید. فایل app.module.ts را باز کنید و کد زیر را در آن قرار دهید.

import {  
    NgModule  
} from '@angular/core';  
import {  
    EmpserviceService  
} from './services/empservice.service'  
import {  
    CommonModule  
} from '@angular/common';  
import {  
    FormsModule,  
    ReactiveFormsModule  
} from '@angular/forms';  
import {  
    HttpModule  
} from '@angular/http';  
import {  
    RouterModule  
} from '@angular/router';  
import {  
    AddEmployeeComponent  
} from './components/add-employee/add-employee.component';  
import {  
    FetchEmployeeComponent  
} from './components/fetch-employee/fetch-employee.component';  
import {  
    HomeComponent  
} from './home/home.component';  
import {  
    NavMenuComponent  
} from './nav-menu/nav-menu.component';  
import {  
    AppComponent  
} from './app.component';  
import {  
    BrowserModule  
} from '@angular/platform-browser';  
@NgModule({  
    declarations: [  
        AppComponent,  
        NavMenuComponent,  
        HomeComponent,  
        AddEmployeeComponent,  
        FetchEmployeeComponent  
    ],  
    imports: [  
        BrowserModule.withServerTransition({  
            appId: 'ng-cli-universal'  
        }),  
        CommonModule,  
        HttpModule,  
        FormsModule,  
        ReactiveFormsModule,  
        RouterModule.forRoot([{  
            path: '',  
            component: HomeComponent,  
            pathMatch: 'full'  
        }, {  
            path: 'home',  
            component: HomeComponent  
        }, {  
            path: 'fetch-employee',  
            component: FetchEmployeeComponent  
        }, {  
            path: 'add-employee',  
            component: AddEmployeeComponent  
        }, {  
            path: 'employee/edit/:id',  
            component: AddEmployeeComponent  
        }, {  
            path: '**',  
            redirectTo: 'home'  
        }])  
    ],  
    providers: [EmpserviceService],  
    bootstrap: [AppComponent]  
})  
export class AppModule {}  

در اینجا، ما همچنین تمام کامپوننت ‏های خود را وارد کرده و مسیر را برای برنامه ‏ی خود بصورت زیر تعیین کرده ‏ایم.

  •  home – که به کامپوننت home تغییر مسیر خواهد داد
  •  fetch-employee – برای نمایش تمام داده ‏های کارمند با استفاده از کامپوننت fetch-employee
  •  add-employee – برای افزودن رکورد کارمند جدیدبا استفاده از کامپوننت add-employee
  • employee/edit/:id – برای تصحیح رکورد کارمند موجود با استفاده از کامپوننت add-employee
  • آخرین کار تعریف منوی جهت‏ یابی برای برنامه ‏مان است. فایل /app/components/navmenu/navmenu.component.html را باز کنید و کد زیر را در آن قرار دهید.
<div class='main-nav'>  
    <div class='navbar navbar-inverse'>  
        <div class='navbar-header'> <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' [attr.aria-expanded]='isExpanded' (click)='toggle()'>  
<span class='sr-only'>Toggle navigation</span>  
<span class='icon-bar'></span>  
<span class='icon-bar'></span>  
<span class='icon-bar'></span>  
</button> <a class='navbar-brand' [routerLink]='["/"]'>EFNgApp</a> </div>  
        <div class='clearfix'></div>  
        <div class='navbar-collapse collapse' [ngClass]='{ "in": isExpanded }'>  
            <ul class='nav navbar-nav'>  
                <li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'> <a [routerLink]='["/"]' (click)='collapse()'>  
<span class='glyphicon glyphicon-home'></span> Home  
</a> </li>  
                <li [routerLinkActive]='["link-active"]'> <a [routerLink]='["/add-employee"]' (click)='collapse()'>  
<span class='glyphicon glyphicon-education'></span> Add Employee  
</a> </li>  
                <li [routerLinkActive]='["link-active"]'> <a [routerLink]='["/fetch-employee"]' (click)='collapse()'>  
<span class='glyphicon glyphicon-th-list'></span> Fetch Employee  
</a> </li>  
            </ul>  
        </div>  
    </div>  
</div>  
انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

انگولار 5 با 2.1.NET Core

انگولار ۵ با ۲.۱.NET Core

برنامه‏ ی خود را اجرا کنید
کلید F5 را برای راه اندازی برنامه فشار دهید.



مطالب مرتبط
ديدگاه خود را ارسال کنيد


محبوب ترين ويدئو هاي انلاين
دوره برنامه نویسی فروشگاه اینترنتی
  • تعداد اعضا 80k
  • قيمت دوره۱۳۰,۰۰۰ تومان
  • امتيازدهي
    1 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 5( 5٫00 از 1 رای )
    Loading...
دوره آموزشی سیستم ثبت سفارش آنلاین
  • تعداد اعضا 80k
  • قيمت دوره--
  • امتيازدهي
    1 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 5( 5٫00 از 1 رای )
    Loading...
دوره طراحی سیستم مدیریت مشتریان
  • تعداد اعضا 80k
  • قيمت دوره۶۵,۵۰۰ تومان
  • امتيازدهي
    1 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 51 vote, average: 5٫00 out of 5( 5٫00 از 1 رای )
    Loading...