[Asp.Net] DataList - Edit Command(수정 명령)를 사용하여 리스트를 수정하기

[Asp.Net] DataList - DataList란?
[Asp.Net] DataList - DataList를 이용한 게시판의 리스트 구현
[Asp.Net] DataList - Edit Command(수정 명령)를 사용하여 리스트를 수정하기

[Asp.Net] DataList - DataList의 컬럼을 미리 만들어둔 템플릿으로 교체하기

[Asp.Net] DataList - 교체한 템플릿의 컨트롤에 코드로 접근하기

asp.net를 오래 하신분도 데이터리스트 컨트롤에 에디트커맨드를 모르시는 경우가 있더라고요 ㅡ.-;;;
데이터리스트에 있는 커맨드 중에 에디트(Edit)와 업데이트(Update)를 이용하면 직관적으로 리스트를 컨트롤할수 있습니다.

1.DataList 만들기

HTML코드는 다음과 같습니다.
주의해서 보아야 할것은 ItemTemplate와 AlternatingItemTemplate에 있는 CommandName="Edit" 입니다.
이 코드는 EditCommand를 발생 시킵니다.
EditCommand가 발생하면 해당 아이템이 EditItemTemplate으로 변경됩니다.
그러기 때문에 EditItemTemplate에도 바인딩 코드가 들어가는 것이죠.

또하나 주의해야 할것이 EditItemTemplate의 CommandName="Update" 입니다.
이것은 UpdateCommand이벤트를 발생시킵니다.
UpdateCommand이벤트가 발생하면 다시 ItemTemplate으로 넘어가게 됩니다.

이벤트는 직접 연결하시면 됩니다.

<asp:DataList ID="DataList1" runat="server" oneditcommand="DataList1_EditCommand" onupdatecommand="DataList1_UpdateCommand">
	<ItemTemplate>
		<tr>
			<td>
				<asp:Label ID="lab1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.colA") %>' />
			</td>
			<td>
				<asp:Label ID="lab2" runat="server"	Text='<%# DataBinder.Eval(Container, "DataItem.colB") %>' />
			</td>
			<td>
				<asp:LinkButton ID="lnkEdit" runat="server" CommandName="Edit" >
					수정
				</asp:LinkButton>
			</td>
		</tr>
	</ItemTemplate>
	<AlternatingItemTemplate>
		<tr>
			<td>
				<asp:Label ID="lab1" runat="server"
					Text='<%# DataBinder.Eval(Container, "DataItem.colA") %>'></asp:Label>
			</td>
			<td>
				<asp:Label ID="lab2" runat="server"
					Text='<%# DataBinder.Eval(Container, "DataItem.colB") %>'></asp:Label>
			</td>
			<td>
				<asp:LinkButton ID="lnkEdit" runat="server" CommandName="Edit" >
					수정
				</asp:LinkButton>
			</td>
		</tr>
	</AlternatingItemTemplate>
	<EditItemTemplate>
		<tr>
			<td>
				<asp:Label ID="lab1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.colA") %>' />
			</td>
			<td>
				<asp:TextBox ID="TextBox1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.colB") %>' />
			</td>
			<td>
				<asp:LinkButton ID="lnkEdit" runat="server" CommandName="Update" >
					완료
				</asp:LinkButton>
			</td>
		</tr>
	</EditItemTemplate>
			
</asp:DataList>

2.테스트 데이터 입력

데이터 로드에 다음과 같이 임시데이터를 추가 합니다.

protected void Page_Load(object sender, EventArgs e)
{
	//테스트용 데이터셋
	DataSet dsTest = new DataSet();

	//테이블 생성
	dsTest.Tables.Add("tbTest");
	//컬럼 생성
	dsTest.Tables["tbTest"].Columns.Add("colA");
	dsTest.Tables["tbTest"].Columns.Add("colB");
	dsTest.Tables["tbTest"].Columns.Add("colC");

	//데이터 추가
	string[] a = { "0", "첫번째", "두번째" };
	dsTest.Tables["tbTest"].Rows.Add(a);
	string[] b = { "1", "첫번째", "두번째" };
	dsTest.Tables["tbTest"].Rows.Add(b);
	string[] c = { "2", "첫번째", "두번째" };
	dsTest.Tables["tbTest"].Rows.Add(c);
	string[] d = { "3", "첫번째", "두번째" };
	dsTest.Tables["tbTest"].Rows.Add(d);
	string[] e2 = { "4", "첫번째", "두번째" };
	dsTest.Tables["tbTest"].Rows.Add(e2);
	string[] f = { "5", "첫번째", "두번째" };
	dsTest.Tables["tbTest"].Rows.Add(f);

	//데이터 소스 지정
	DataList1.DataSource = dsTest;

	if (false == this.IsPostBack)
	{
		//데이터 바인딩
		DataList1.DataBind();
	}

}

정상적으로 위코드들을 적용했다면  아래와 같이 표시가 됩니다.

3.비하인드 코드 작성

비하인드 코드는 EditCommand와 UpdateCommand만 작성하시면 됩니다.

3-1.EditCommand 작성

EditCommand에서는 선택된 아이탬을 찾아 바인딩을 해주는 작업이 필요합니다.
선택된 아이탬은 DataList에 EditItemIndex를 지정해주시면 되고 EditItemTemplate에 선택된 아이탬에 내용을 바인딩 하기 위해 바인딩을 다시 하여야 합니다.

protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
{
	DataList1.EditItemIndex = e.Item.ItemIndex;
	DataList1.DataBind();
}

 

3-2.UpdateCommand 작성

UpdateCommand에서는 선택된 아이탬의 정보를 저장한후 일반 인터페이스를 표시하기위해 EditItemIndex를 -1로 지정해준후 다시 바인딩을 해줍니다.

protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
{
	//바인딩된 줄내용을 가저온다.
	DataTable dtData = ((DataSet)DataList1.DataSource).Tables["tbTest"];
			
	//데이터를 넣는다.
	dtData.Rows[e.Item.ItemIndex]["colB"] = ((TextBox)e.Item.FindControl("TextBox1")).Text;

	//일반 인터페이스로 돌려준다.
	DataList1.EditItemIndex = -1;
	DataList1.DataBind();
}

4.몬가 이상한 테스트

이제 테스트를 해봅시다.

수정을 누르면 EditItemTemplate에 작성한 내용이 나오는것을 알수 있습니다.

텍스트박스에 다른 글을 넣고 완료를 눌러 봅시다.

수정이 된걸 확인할수 있습니다.

하지만 웹페이지는 한페이지 한페이지가 독립되어 돌아갑니다.
그런 특징때문에 임시로 만든 데이터는 한턴(?) 이상가질 못합니다.

다른것을 수정하려고하자 초기화되버리죠.

5.마무리

사실 이 포스트의 목적은 EditCommand와 UpdateCommand의 사용법을 정리하는 것이기 때문에 정상작동여부는 별의미가 없습니다.
디비랑 연결하면 절대 문제가 없기 때문에 ㅎㅎㅎ
그래도 임시데이터로 작업하고 싶으신 분들은 전역변수를 이용해 보시면 됩니다 ㅎㅎㅎ

임시데이터로만 해도 직관적인 인터페이스를 느낄수 있죠.
물론 게시판에서는 쓸일이 없긴 하지만 말이죠 ㅡ.-;;


원번 파일입니다.

DataList_test.zip