Detail View 만들기 [C#]

      public IActionResult Detail(int id) //상세정보 
      {
          //clubs 테이블과 address테이블을 조인하여 클럽의 상세정보를 가져온다.
          //id 매개변수에 전달된 값과 일치하는 클럽을 찾는다. 
          Club club = _context.Clubs.Include(a => a.Address).FirstOrDefault(c => c.Id == id);
          return View(club);
      }

ClubController에 해당 추가했다.

 

Club Detail.html

@model Club //뷰에서 사용할 모델 정의(Club)
@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

<!-- Page Content -->
<div class="container">

    <!-- Portfolio Item Heading -->
    <h1 class="my-4"> 
        Page Heading
        <small>Secondary Text</small>
    </h1>

    <!-- Portfolio Item Row -->
    <div class="row">

        <div class="col-md-8">
            <!--클럽 이미지 경로 설정-->
            <img class="img-fluid" src="@Model.Image" alt="">
        </div>

        <div class="col-md-4">
            <!--클럽 제목 -->
            <h3 class="my-3">@Model.Title</h3>
            <!--클럽 설명-->
            <p>@Model.Description</p>
            <h3 class="my-3">Location</h3>
            <ul>
                <!--도시, 주, 클럽카테고리-->
                <li>@Model.Address.City</li>
                <li>@Model.Address.State</li>
                <li>@Model.ClubCategory</li>
            </ul>
        </div>

    </div>
    <!-- /.row -->
    <!-- Related Projects Row -->
    <h3 class="my-4">Related Projects</h3>

    <div class="row">

        <div class="col-md-3 col-sm-6 mb-4">
            <a href="#">
                <img class="img-fluid" src="https://via.placeholder.com/500x300" alt="">
            </a>
        </div>

        <div class="col-md-3 col-sm-6 mb-4">
            <a href="#">
                <img class="img-fluid" src="https://via.placeholder.com/500x300" alt="">
            </a>
        </div>

        <div class="col-md-3 col-sm-6 mb-4">
            <a href="#">
                <img class="img-fluid" src="https://via.placeholder.com/500x300" alt="">
            </a>
        </div>

        <div class="col-md-3 col-sm-6 mb-4">
            <a href="#">
                <img class="img-fluid" src="https://via.placeholder.com/500x300" alt="">
            </a>
        </div>

    </div>
    <!-- /.row -->

</div>
<!-- /.container -->

 

Club Detail.html

@model IEnumerable<Club> //데이터 모델을 정의한다. Club모델의 컬렉션을 사용한다.즉, 이 뷰는 Club모델을 사용할것이다.

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

<div class="album py-5 bg-light"> <!--감싸는 부분 연한회색-->
    <div class="container">
        <div class="row">
            @foreach (var item in Model) //모델데이터순회
            {
                <div class="col-md-4"> <!--그리드시스템, 카드배치-->
                    <div class="card mb-4 box-shadow"> <!--마진 설정, 그림자 효과-->
                        <!--이미지 동적 생성-->
                        <img class="card-img-top" src="@item.Image" width="100%" height="225" alt="Card image cap">
                        <div class="card-body">
                            <!--클럽의 제목과 설명-->
                            <p class="card-text">@item.Title</p>
                            <p class="card-text">@item.Description</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <!--버튼에 Club컨트롤러로 이동 , 해당 액션은 Club 컨트롤러 내에서 실행 , 각 클럽의 ID를 가져와서 설정-->
                                    <a type="btn btn-success" asp-controller="Club" asp-action="Detail" asp-route-id="@item.Id"
                                            class="btn btn-sm btn-outline-secondary">View</a>
                                    
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <!--클럽 카테고리-->
                                <small class="text-muted">@item.ClubCategory</small>
                            </div>
                        </div>
                    </div>
                </div>
            }
          
        
        </div>
    </div>
</div>

 

라우트 변수는 URL 경로에 포함된 데이터를 동적으로 처리하기 위한 매개변수다.

/controller/action/id(라우트변수) 꼴

해석하여 해당 컨트롤러 및 액션 메서드를 결정하고 필요한 데이터를 추출하는 데 사용

적절한 컨트롤러의 액션 메서드를 호출하고 라우트변수를 처리한다.