인프런 업데이트 소식 🔨👷🏼‍♂️

본 수업과 관련은 없지만

미해결질문
INTERNET JUNK 프로필

혹시 동적으로 컨트롤러 추가하고 삭제하고 업데이트 하는 강좌 하나 좀 만들어 주실 수 있는지요?

사용자에게 상품을 주문 받을 때

add버튼 누르면 상품/옵션/원하는 가격 이렇게 3개의 인풋이 추가로 row로 생기고 거기에 입력하고

또 필요하거나 삭제를 원하면 add나 remove로 삭제가 되고

db가 주문 table에 1:다로 연결된 상품들에 insert되기를 원하는데,

아무리 찾아봐도 강좌도 없고, 도전해봐도 뱅뱅만 돕니다.

도움 좀 주실 수 있나요?

SEJONG IT EDU 프로필
SEJONG IT EDU 7달 전

안녕하세요. 이런 동적인 부분들은 기본 강좌에서 다루지 않아 힘드실 겁니다. 이런 부분은 .cshtml안에서 자바스크립트를 결국엔 써야 하구요. 앵귤러 또는 jQuery로 해결할 수 있는데요. jQuery로 한번 해보죠.

모든 View에서 jQuery를 쓸 수 있게 먼저 Shared 폴더의 _Layout.cshtml 여시고 태그안에 jQuery를 추가합니다.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>     

그리고 해당 뷰파일안에 미리 3개의 인풋을 추가하고 (form 태그 안에) 그 부분을 div를 통해 hide합니다.

<button type="button" id="add">Add</button>

<br />

<div id="rows" style="display: none;">

<input type="text" asp-for="Product" />

<input type="text" asp-for="Option" />

<input type="text" asp-for="Price" />

</div>

그리고 add 버튼을 눌렀을 시에 div를 다시 보이게 하는 간단한 원리인데요.

해당 .cshtml 파일 맨 밑 부분에 스크립트 태그를 추가하시고 그 안에 jQuery 로직을 넣어주세요.

<script>

$(function(){

$("#add").click(function(){

$('#rows').show();

});

});

</script>

add나 remove도 jQuery로 해결 할 수 있구요. 테스팅해보지는 않았지만 이런 원리입니다. 그 후에 DB에 일대다로 추가하시는 부분은 엔티티 클래스 안에 ICollection을 통해서 정의를 해줘야 하는데 힘드시겠지만 공식 문서를 통해 도전해 보시기 바랍니다.

https://docs.microsoft.com/en-us/aspnet/core/data/ef-mvc/complex-data-model?view=aspnetcore-2.0

요청하신 부분들이 아시다시피 중급 레벨입니다. 아직 시간이 허락치 않아 중급편을 만들지 못하고 있는 점 이해해 주시기 바랍니다.

SEJONG IT EDU 프로필
SEJONG IT EDU 7달 전

빠트렸는데 jQuery _Layout에 추가하는거 헤더 태그안에 하셔야합니다.

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

INTERNET JUNK 프로필
INTERNET JUNK 7달 전

먼저 답변 감사합니다.

그리고 강좌 기다리고 있습니다. 중급 강좌 꼭 좀 만들어주세요.