06-02 ManufactureApp 만들기
06-02 ManufactureApp 만들기
1. 프로젝트 생성
새프로젝트 - 블레이져 - 개별 사용자 인증 - 3.1버전 선택
프로젝트 이름은 'ManufactureApp'
2. 회원가입및 migration 하기.
register를 누르고 양식을 입력한후 register를 누른다.
그러면 Apply migration 버튼이 생기는데 버튼을 눌러서 가입을 하자.
이과정에서 sql server에 필요한 패키지가 다운로드 된다.
3. 모델추가.
프로젝트 - 추가 - 새폴더 - Models폴더추가
Models 폴더 - Manufacturer.cs생성 후 다음 코드 추가.
namespace ManufacturerApp.Models
{
public class Manufacturer
{
public int Id { get; set; }
public string Name { get; set; }
public string ManufactureCode { get; set; }
public string Comment { get; set; }
}
}
4. ApplicationDbContext.cs db컨텍스트에 Manufacturers추가.
Data - ApplicationDbContext.cs 파일에 다음과 같이 코드 수정하기.
using ManufacturerApp.Models;
using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
namespace ManufacturerApp.Data
{
public class ApplicationDbContext : IdentityDbContext
{
public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
: base(options)
{
}
public DbSet<Manufacturer> Manufacturers { get; set; }
}
}
5. 마이그레이션및 데이터베이스 업데이트.
DefaultConnection에 있는 데이터베이스 이름수정해주기!!!!
보기 - 다른창 - 패키지관리콘솔 클릭하여 다음과 같이 명령어 입력.
PM > Add-Migration "Manufacturers Table Add"
PM > Update-Database
6. repository 인터페이스 추가및 구현.
Models - 우클릭 -추가 - 인터페이스 - IManufacturerRepository.cs생성 다음과 같이 코드 작성.
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace ManufacturerApp.Models
{
public interface IManufacturerRepository
{
Task<Manufacture> AddManufacturer(Manufacture manufacturer);
Task<List<Manufacture>> GetManufactures();
Task<Manufacture> GetManufacturer(int id);
Task<Manufacture> EditManufacture(Manufacture manufacture);
Task DeleteManufacture(int id);
}
}
Models - 우클릭 - 추가 - 클래스 - ManufacturerRepository.cs 생성하고 IManufacturerRepository 상속한뒤
IManufacturerRepository클릭 하고 ctrl + . 를 누른후 다음과 같이 자동구현하기.
그후 다음과 같이 코드구현 ㅎㅎ
using ManufacturerApp.Data;
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Threading.Tasks;
namespace ManufacturerApp.Models
{
public class ManufacturerRepository : IManufacturerRepository
{
private readonly ApplicationDbContext _context;
public ManufacturerRepository(ApplicationDbContext context)
{
this._context = context;
}
public async Task<Manufacturer> AddManufacturer(Manufacturer manufacturer)
{
_context.Manufacturers.Add(manufacturer);
await _context.SaveChangesAsync();
return manufacturer;
}
public async Task DeleteManufacture(int id)
{
var m = await _context.Manufacturers.FindAsync(id);
if(m != null)
{
_context.Manufacturers.Remove(m);
await _context.SaveChangesAsync();
}
}
public async Task<Manufacturer> EditManufacture(Manufacturer manufacture)
{
_context.Entry(manufacture).State = EntityState.Modified;
await _context.SaveChangesAsync();
return manufacture;
}
public async Task<Manufacturer> GetManufacturer(int id)
{
return await _context.Manufacturers.FindAsync(id);
}
public async Task<List<Manufacturer>> GetManufactures()
{
return await _context.Manufacturers.ToListAsync();
}
}
}
7. 종속성 주입.
Startup.cs - ConfigureServices메서드에 종속성 주입을 위해 다음 코드추가.
services.AddTransient<IManufacturerRepository, ManufacturerRepository>();8.라이브러리 추가.
프로젝트 - 우클릭 - 클라이언트 쪽 라이브러리 관리
다음 코드를 추가하면 wwwroot에 라이브러리들이 설치된다.
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery@3.4.1",
"fiels": [ "jquery.js" ],
"destination": "wwwroot/lib"
},
{
"provider": "jsdelivr",
"library": "bootstrap@4.4.1",
"fiels": [ "dist/js/bootstrap.js" ],
"destination": "wwwroot/lib"
}
]
}
_Host.cshtml의 body에다가 jquery.js 와 bootstrap.js경로 복사붙여넣기.
객체 탐색기로 파일을 드래그 한다음 '~'을 지우면 된다!!
<script src="/lib/jquery.js"></script>
<script src="/lib/dist/js/bootstrap.js"></script>
** default connection은 미리 설정해두자 ^^.
또 모달을 닫기 위해 다음 코드추가.
<script>
function closeModal(modalId) {
$("#" + modalId).modal('hide');
}
function showModal(modalId) {
$("#" + modalId).modal('show');
}
</script>
9. ManufacturerIndex.razor 코드추가
_Imports.razor에 다음코드추가.
@using ManufacturerApp.Models
navigation에 Manufacturers 들어갈 수 있게 주소추가.
SQL server 객체 탐색기에 임의로 값넣어주기.
@page "/Manufacturers"
@page "/Manufacturers/Index"
@inject IManufacturerRepository repository
@inject IJSRuntime JS
<h3> Manufacturer main</h3>
<p> 고객사 리스트를 출력합니다. </p>
@if (manufacturers == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Manufacturer Code</th>
<th>Comment</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
@foreach (var manufacturer in manufacturers)
{
<tr>
<td>@manufacturer.id</td>
<td>@manufacturer.Name</td>
<td>@manufacturer.ManufactureCode</td>
<td>@manufacturer.Comment</td>
<td>
<input type="button" value="Edit" class="btn btn-primary"/>
</td>
<td>
<input type="button" value="Delete" class="btn btn-danger"
@onclick ="( () => DeleteBy(manufacturer))"
data-toggle="modal" data-target="#manufacturerDeleteDialog" />
</td>
</tr>
}
</tbody>
</table>
}
<ManufacturerDeleteDialog
OnClick="btnDelete_Click"
></ManufacturerDeleteDialog>
@code {
List<Manufacturer> manufacturers;
Manufacturer manufacturer = new Manufacturer();
protected override async Task OnInitializedAsync()
{
manufacturers = await repository.GetManufactures();
}
protected async Task btnDelete_Click()
{
//await JS.InvokeAsync<object>("alert", "hi~" + manufacturer.id + "번을 지울껀가요?");
await repository.DeleteManufacture(manufacturer.id);
await JS.InvokeAsync<object>("closeModal", "manufacturerDeleteDialog");
manufacturers = await repository.GetManufactures();
manufacturer = new Manufacturer();
}
private void DeleteBy(Manufacturer manu)
{
manufacturer = manu;
}
}
10. ManufacturerDeleteDialog.razor 코드추가.
<div class="modal" tabindex="-1" role="dialog" id="manufacturerDeleteDialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Delete Confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>정말로 삭제하시겠습니까?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal"
@onclick="OnClick">
Yes
</button>
<button type="button" class="btn btn-secondary">Cancel</button>
</div>
</div>
</div>
</div>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }
}