Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.

그리드뷰에서 필드표현을 자유롭게 하기

그냥 책보고 그리드뷰따라하는 걸 벗어나서 간단한 웹사이트를 만들다 보니 단순히 거의 반자동으로 클릭 몇번으로만 만들 수 있는 그리드뷰는 사용상에 제약이 많았다.

그래서 이것저것 뒤져보았다. MS가 이렇게 멍청하게 만들지는 않았을테고(이게 머 위지윅도 아니고..) 먼가 있을텐데 하면서 찾아보다가 겨우 찾았다.

바로 TemplateField다.

일단 내가 하려고 했던건 그리드뷰에서 특정항목에서 이미지를 표현하고 싶었는데 값에 따라 다르게 하고 싶었다. 값이 없는건 안나타나고 값이 있을때만 이미지랑 값이 나타나도록....

사용자 삽입 이미지


원하는 위치에 TemplateField를 추가하고 원하는 이름과 사용할 값을 설정해 준다.

그럼 소스부분에(소스에서 수정해 주어야 한다.)

<asp:TemplateField HeaderText="테스트"></asp:TemplateField>

위와같은 템플릿필드 코드가 추가된다.(크기가 스타일같은건 알아서 설정해 주시고~~)


<!-- gridview.aspx 부분 -->
<asp:TemplateField HeaderText="테스트">
    <ItemTemplate>
        <%# ShowBuynow(Eval("buynow").ToString()) %>
    </ItemTemplate>
</asp:TemplateField>

여기에 <ItemTemplate>를 추가해주고 그안에서 C#코드를 사용해 주면 된다. 이 안에서는 gridview.aspx.cs에서 만들어 놓은 메서드를 호출할 수 있다. cs코드는 어차피 같은 파일이므로 바로 호출해주고 파라미터로 값을 넘겨주면 된다.

값은 Gridview의 연결된 데이터소스에서 받아올 수 있으며 Eval로 해당 필드값을 적어주면 값을 받아낼 수 있다.


// gridview.aspx.cs
protected string ShowBuynow(string buynow)
{
    if (int.Parse(buynow) != 0)
    {
        return "<img src='/images/buynow.gif'><br/>" + buynow;
    }
    else
    {
        return "";
    }
}

cs쪽에서는 그냥 메서드 만들듯이 만들어주면 된다. 파라미터 받아서 조건 검사한 다음에 그위치에 표시할 내용을 return해 준다. 어차피 html이 될것이므로 html코드로 만들어서 string으로 넘겨주면 그 위치에 뿌려지게 된다.

여기서는 간단한 조건이었지만 일단 그리드뷰 항목내에서 만들어 좋은 cs메서드를 사용할 수 있기 때문에 얼마든지 다양한 조건으로 표현해 주고 조건을 만들어낼 수 있을 듯 하다.
2007/07/18 01:14 2007/07/18 01:14

그리드뷰에서 마우스오버시 색 바꾸기

ASP.NET 2.0에서는 그리드뷰(Grid View)라는 서버컨트롤을 이용해서 리스트를 쉽게 만들어 줄수 있는데 Row와 AlternatingRow를 이용해서 짝수줄의 색은 다르게 나타내어 줄 수 있다.

하지만 보통의 게시판들이 그렇듯이 Row에 마우스가 오버가 되었을 때 색이 바뀐다면 훨씬 직관적으로 보여줄 수 있다.

Grid View에서 RowDataBound 이벤트에 메서드를 만들어 준다.

여기선 그리드뷰의 이름이 AllItemGridView이다.


//그리드 뷰의 마우스 오버시 색 바꾸기
protected void AllItemGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    //Row가 DateRow일때만 적용하기 위해서    
    if (e.Row.RowType == DataControlRowType.DataRow) 
    {
        //마우스 오버시에 변할 색
        e.Row.Attributes["onMouseOver"] = "this.style.backgroundColor='#ffecf0';"; 
        //Alternate와 Row의 색을 다르게 주었기 때문에
        if (e.Row.RowState.ToString() == "Alternate") 
        {
            //마우스 아웃시에는 다시 원래색으로 바꾸어 주기 위해서
            e.Row.Attributes["onMouseOut"] = "this.style.backgroundColor='#E6E6E6';"; 
        }
        else //AlternateRow가 아닌경우에는 원래색으로
        {
            // Row의 색을 입력한다.
            e.Row.Attributes["onMouseOut"] = "this.style.backgroundColor='';"; 
        }
    }
}

ASP.NET의 CS단에서는 색상코드가 약칭(aqua, red)은 먹지 않더라는;;;;;

2007/07/18 00:43 2007/07/18 00:43