<![CDATA[
bootstrap과 같은 HTML과 ASP.NET 페이지 연동시에는
Repeater 컨트롤을 사용하면 쓸데없는 태그는 만들어지지 않습니다.
아래 샘플 코드 조각을 살펴봐 주시구요....
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<div class="panel-heading">
<i class="fa fa-comments fa-fw"></i>
상단과 하단을 제외한 중간 내용이 데이터가 있는만큼 반복해서 출력
</div>
<div class="panel-body">
<ul class="chat">
</HeaderTemplate>
<ItemTemplate>
<li class="left clearfix">
<%# Eval("Title") %>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</FooterTemplate>
</asp:Repeater>
아래 코드는 역시 샘플 코드 조각인데,
현재 보고 있는 게시판일때에만, bootstrap의 active 속성 값을 주는 예제입니다.
참고해 보시라고 올려드립니다.
; 게시판 리스트 출력하는 영역
<asp:BulletedList ID="lstBoardList" runat="server" DisplayMode="HyperLink" CssClass="metro-dropdown-menu" data-role="dropdown" style="display:block;" Font-Size="11px" OnDataBound="lstBoardList_DataBound">
</asp:BulletedList>
; 코드 비하인드페이지에서 DB 연동 후 항목 추가하는 영역
private void BindingBoardList()
{
string communityName = "데브렉";
List<BoardEntity> lst = (new BoardRepository()).GetBoardEntitiesByGroupName(communityName);
int index = -1;
for (int i = 0; i < lst.Count; i++)
{
lstBoardList.Items.Add(new ListItem(lst[i].Title, String.Format("~/BoardList.aspx?BoardName={0}", lst[i].BoardAlias)));
if (lst[i].BoardAlias == Request["BoardName"])
{
index = i;
}
}
if (Request["BoardName"] != "")
{
if (index >= 0)
{
lstBoardList.Items[index].Attributes.Add("class", "active");
}
}
}
기타, 정보는
구글에서 "asp.net bootstrap carousel " 식으로 검색 후 나타나는
아티클들을 참고하시면 좋을 듯 합니다.
]]>
최세진 님이 쓰신 원문 글입니다.
현재 부트스트랩 carousel 를 asp.net으로 프로그램으로 업어 씌울려고 하고 있습니다.
보통 바인딩시 Repeater,DataList등등 어떤 것이 사용해야 하는지, 보통 이런 작업을 하면 어떻게하는지 궁금합니다.
공통 부분은 안에 만들어 넣으면 되는데, 그외 부분은 처음 데이타와 그외 데이타로 나누어서 작업해야 하고 asp.net는 프로그램을 하면 군더더기 자체 생성 span,div등의 소스가 많이 생겨서 불편합니다.
보통 이런경우 어떻게 처리를 하고, 샘플 같은 것이 있는지 조언 부탁드립니다.
항상 질문에 주신 답변은 도움이 많이 됩니다. 그리고 항상 감사드립니다.
<![CDATA[
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<asp:DataList ID="Buyer_Go_Product_List" RepeatColumns="3" runat="server"
RepeatDirection="Horizontal" RepeatLayout="Flow" >
<HeaderTemplate>
<div class="item"> //--->class="item active" -->첫 데이타 일경우변경해야함.??처리방법???
</HeaderTemplate>
<ItemTemplate>
<div class="col-xs-4" style="padding: 0px; margin: 0px;">
<div class="thumbnail">
<img class="img-responsive img-thumbnail img-rounded" src='<%#DataBinder.Eval(Container.DataItem, "ID_Seller")%>/<%#DataBinder.Eval(Container.DataItem, "Product_Front_Pic")%>' width="100%"
alt="Product_Image" onclick="winOpen('/KrAllBiz_Seller/Seller_Product_Detail.aspx?Pt_Code=<%#DataBinder.Eval(Container.DataItem, "Product_Code")%>',520,600,0,0,0,0,0,0)" />
<div class="caption" style="text-align: center">
<%# DataBinder.Eval(Container.DataItem, "Money_Code", "{0}")%><%# DataBinder.Eval(Container.DataItem, "Product_Price", "{0}")%>
</div>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:DataList>
</div>
</div>
카로셀 예제
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4" style="padding: 0px; margin: 0px;">
<a href="#">
<img class="img-responsive img-thumbnail img-rounded" src='sample.jpg' />
</a>
<div class="caption">
Thumbnail
</div>
</div>
<div class="col-xs-4" style="padding: 0px; margin: 0px;">
<a href="#">
<img class="img-responsive img-thumbnail img-rounded" src='sample2.jpg' />
</a>
<div class="caption">
Thumbnail
</div>
</div>
<div class="col-xs-4" style="padding: 0px; margin: 0px;">
<a href="#">
<img class="img-responsive img-thumbnail img-rounded" src='sample3.jpg' />
</a>
<div class="caption">
Thumbnail
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<div class="thumbnail">
<a href="#">
<img class="img-responsive img-thumbnail img-rounded" src="PT_Sample_Pic1.jpg" />
</a>
<div class="caption">
Thumbnail
</div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<a href="#">
<img class="img-responsive img-thumbnail img-rounded" src="PT_Sample_Pic2.jpg" />
</a>
<div class="caption">
Thumbnail
</div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<a href="#">
<img class="img-responsive img-thumbnail img-rounded" src="PT_Sample_Pic3.jpg" />
</a>
<div class="caption">
Thumbnail
</div>
</div>
</div>
</div>
</div>
<div >
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"> </span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
]]>
P.S : 몇개월에 걸쳐 asp.net 작업 중입니다만 제 실력이 없어서 그런지 모르겠지만, 작업을 하면 할수록 언어를 잘 못 선택 했다는 생각이듭니다. 그냥 php롤 작업 했으면 지금보다 2배는 일찍 끝났을 작업을....... 현재 트렌드와 모바일 맞는 작업을 하기에는 asp.net 은 오래전 언어(??)라 그런지 몰라도 많이 맞지 않다는 생각을 해봅니다. 오픈만 하고 다른 언어로 다시 작업해야 할듯하다는 생각을 해봅니다. 다시는 asp.net은 절대 보지 않을 것라고 다짐하면서 말이죠...... ㅜ.ㅜ
그리고 밑에 제가 한 질문은 (리다이렉트는) Global.asax에 한줄 추가하면 일반 asp.net--->asp.net MVC 비슷한 URL 기능으로 변경 가능했습니다.
|
박용준 강사님이 작성하신 내용입니다.
첨부파일 :
None
