table 항목 동적 바인딩 관련

🌐 ASP.NET, Blazor, IIS, 웹 Q&A
1

blazor(server side)에서 동적 binding으로 update되는데 정적코드 갱신을 어떻게 해야될지 모르겠어요.
bootstrap table을 사용중입니다. 테이블에 항목을 bihind code로 항목을 추가하는데 빨강색으로 표시한 page navigation이 표시가 되지 않습니다. 테이블 항목만 동적으로 추가되다보니 현재 항목이 0개로 인식되는거 같습니다.
정적으로 항목을 추가하면 page가 navigation이 추가되는데 동적으로 추가하면 표시가 되지 않습니다.
웹쪽에 기본 지식이 부족하다보니 어떻게 처리해야될지 모르겠네요.

              <div class="card mb-4">
                        <div class="card-header">
                            <i class="fas fa-table me-1"></i>
                            DataTable Example
                        </div>
                        <div class="card-body">
                            <table id="datatablesSimple">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Position</th>
                                        <th>Office</th>
                                        <th>Age</th>
                                        <th>Start date</th>
                                        <th>Salary</th>
                                    </tr>
                                </thead>
		<tbody>
		@for(var item in itemlist)
		{
			<td>@item.serial</td>		
			<td>@item.informationl</td>				
		}
                     </tbody>

image

2개의 좋아요
2

https://www.google.com/search?q=Blazor+StateHasChanged
저도 잘 모르지만…

3개의 좋아요
3

StateHasChanged 을 하더라도 body만 변경되고 page navigation은 안바뀌더라구요

3개의 좋아요
4

bootstrap은 html에 들어가는 css 패키지로 알고있는데, 그게 맞나요?
그렇다면… paging을 직접 구현해주셔야 하는건가 하고 추측해봅니다.

pagination 기능을 컴포넌트로 구현하시는건 어떨까요? 재사용 가능하게요.
페이지당 항목수를 나눠서 linq의 take-skip 을 조합하는 방법도 있을것 같네용.

1개의 좋아요
5

datatablesSimple table 컨트롤에서 페이징 처리가 들어가 있습니다.
가져다가 재사용가능하게 되있는데 다시 개발하는건 너무 비효율적이라서요.

2개의 좋아요
6

음… 위에 예시로 주신 소스에서는 datatablesSimple 가 그냥 객체 id로만 보이고,
table은 그냥 html 태그로 해당되는것 같은데 맞나요?

bootstrap table이라는게 기존 bootstrap이 아니라 그걸 기반으로 한 table component인가용?

https://www.blazor.zone/tables/pages 혹시 이걸 쓰고 계신걸까요?
링크 보시면

@for(var item in itemlist)
{
   /// ...
}

이 아니라 아예 collection으로 페이지당 항목 수를 바인딩 해주는것 같고,
원본 데이터를 아예 이벤트처럼 받는 걸로 보이네요.

1개의 좋아요
7

StateHasChanged()를 해주시면 되는데… 이것이 전체 페이지에 영향을 주는 것이 아니라 StateHasChanged()한 페이지에만 영향을 주기 때문에 네비게이션 페이지도 StateHasChanged()를 호출해 주시면 됩니다.

3개의 좋아요
8

bootstrap이라기 보다는 html과 javascript입니다.
보내주신 링크는 전체 table을 binding했네요. 따라해볼려고 했는데…전체 소스가 없어서…
근데 이런 사이트가 있었다니…

여기 예제는 javascrip를 아예 안쓰는듯 하네요… blazor 묘미가 javascript를 안쓰게 해주는건데…
저는 계속 javascript로 떡칠하니 이걸 왜쓰나 싶었는데 많은 도움이 될듯합니다.

감사합니다

2개의 좋아요
9

느낌이 좀 이상해서 올려주신걸 다시 보고 제가 좀 찾아 봤는데,

제가 드린 링크는 bootstrap의 js기능 등을 C# (blazor)로 컨버팅한 일종의 컴포넌트 패키지라 보시면 되구요… 저 링크 외에도 찾아보시면 은근 나옵니다.

js 같은 경우엔 blazor에서 렌더링 될 때 시점이 때문에
JSInterop 조차도 작동 안 되는 경우도 고려 해 보셔야 할 것 같아요.

1개의 좋아요