포럼에서 동일하거나 유사한 질문을 많이 보았습니다. DataGrid의 각 행에 확인란, 텍스트 상자 등을 어떻게 배치합니까? 값을 업데이트하는 방법은 무엇입니까? 대답은 매우 간단합니다. 이 기사에서는 그 방법을 보여 드리겠습니다.
우리 모두는 DataGrid가 매우 강력한 도구라는 것을 알고 있습니다. 내 경험에 따르면 90% 이상의 경우 DataGrid는 데이터를 표시하고 한 번에 한 행씩 편집하는 데 사용됩니다. 때로는 여러 행을 편집해야 하거나 모든 데이터를 한 번에 편집해야 할 수도 있습니다. 실제적인 예는 온라인으로 항목을 판매하는 애플리케이션에서 고객이 장바구니에 있는 하나 이상의 항목을 한 번에 변경하고 확인란을 클릭하여 원하지 않는 항목을 제거하려는 경우입니다.
개념
이 예에서는 XML에 저장된 연락처 목록을 관리하기 위해 간단한 WebForm을 작성했습니다. 요구 사항은 매우 간단합니다. 새 연락처를 추가하고 기존 연락처를 편집/삭제하는 기능이 있어야 합니다. 사용자는 한 번에 여러 연락처를 수정하거나 삭제할 수 있으며, 사용자가 선택한 열을 기준으로 데이터 그리드를 정렬할 수도 있습니다.
내 예제는 C#으로 작성되었습니다. 이러한 코드의 VB 버전을 선호하는 경우 다운로드 파일에서 두 가지 형식으로 코드를 사용할 수 있습니다.
Contacts.xml
예제의 XML 데이터 파일은
매우 간단하고 직관적입니다.매우 간단하기 때문에 계획을 세우지는 않았습니다.
<?xml version="1.0" 독립형="예"?>
<연락처>
<연락처>
<Email>[email protected]</Email>
<FirstName>존</FirstName>
<LastName>Doe</LastName>
</연락처>
<연락처>
<Email>[email protected]</Email>
<FirstName>제인</FirstName>
<LastName>Doe</LastName>
</연락처>
</Contacts>
ContactList.aspx
WebForm 설정은 매우 간단합니다. 내 양식에 새 DataGrid를 배치하고 4개의 열을 갖도록 설정했습니다. 첫 번째 열에는 연락처 삭제를 위한 확인란이 포함되어 있습니다. 여기서 제가 한 주요 작업은 각 열을 템플릿 열(TemplateColumn)로 만드는 것이었습니다. 이를 통해 텍스트 상자 및 확인란 개체를 데이터 템플릿(ItemTemplate)에 배치할 수 있습니다. 이는 그리드의 각 행에 텍스트 이외의 다른 항목을 표시하는 방법입니다. 또한 새 연락처를 쉽고 직관적으로 만들기 위해 FooterTemplate을 사용한다는 사실도 아실 것입니다.
또한 사용자가 수정하고 삭제한 내용을 저장하기 위한 LinkButton도 포함했습니다. 하지만 새 연락처를 추가하는 데는 사용되지 않습니다. 새 연락처 추가 작업은 마지막 열의 바닥글 템플릿에 있는 링크 버튼(LinkButton)을 통해 완료됩니다.
<asp:datagrid id="dgContacts" runat="server" ShowFooter="True" AllowSorting="True" Forefont color="Black" GridLines="None" CellPadding="2" Backfont color="LightGoldenrodYellow" BorderWidth="1px " Borderfont color="황갈색" Width="499px" AutoGenerateColumns="False" DataKeyField="이메일">
<SelectedItemStyle Forefont color="GhostWhite" Backfont color="DarkSlateBlue"></SelectedItemStyle>
<AlternatingItemStyle Backfont color="PaleGoldenrod"></AlternatingItemStyle>
<HeaderStyle Font-Bold="True" Backfont color="Tan"></HeaderStyle>
<FooterStyle Backfont color="Tan"></FooterStyle>
<열>
<asp:TemplateColumn SortExpression="이름" HeaderText="이름">
<항목 템플릿>
<asp:TextBox id=First runat="server" Width="109px" Text='<%# DataBinder.Eval(Container, "DataItem.FirstName") %>'>
</asp:텍스트박스>
</ItemTemplate>
<바닥글 템플릿>
<asp:TextBox id="NewFirst" runat="server" Width="109px"></asp:TextBox>
</FooterTemplate>
</asp:템플릿열>
<asp:TemplateColumn SortExpression="성" HeaderText="성">
<항목 템플릿>
<asp:TextBox id=Last runat="server" Width="109px" Text='<%# DataBinder.Eval(Container, "DataItem.LastName") %>'>
</asp:텍스트박스>
</ItemTemplate>
<바닥글 템플릿>
<asp:TextBox id="NewLast" runat="server" Width="109px"></asp:TextBox>
</FooterTemplate>
</asp:템플릿열>
<asp:TemplateColumn SortExpression="이메일" HeaderText="이메일">
<항목 템플릿>
<asp:TextBox id=Email runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'>
</asp:텍스트박스>
</ItemTemplate>
<바닥글 템플릿>
<asp:TextBox id="NewEmail" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:템플릿열>
<asp:TemplateColumn HeaderText="연락처 삭제">
<ItemStyleHorizontalAlign="Center"></ItemStyle>
<항목 템플릿>
<asp:CheckBox Runat="서버" ID="chkDelete"></asp:CheckBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center"></FooterStyle>
<바닥글 템플릿>
<asp:LinkButton Runat="서버" Text="추가" CommandName="추가" ID="Linkbutton1" NAME="Linkbutton1"></asp:LinkButton>
</FooterTemplate>
</asp:템플릿열>
</열>
</asp:데이터그리드>
ContactList.cs
XML 파일을 사용하여 데이터에 액세스하기로 선택한 후 DataSet을 사용하여 데이터에 액세스하기로 결정했습니다. DataSet 개체에는 ReadXml 및 WriteXml 메서드가 있으므로 이는 매우 합리적인 선택입니다. 첫 번째 단계는 XML로 데이터를 읽는 것입니다. 코드에서 볼 수 있듯이 데이터 정렬을 처리하는 멤버를 만들었습니다.
개인 데이터 세트 _dsContacts;
개인 문자열 _sSort;
개인 무효 Page_Load(개체 보낸 사람, System.EventArgs e)
{
//XML 파일을 로드합니다.
_dsContacts = 새로운 DataSet();
_dsContacts.ReadXml(Server.MapPath("Contacts.xml"));
DataColumn[] dcPk = {_dsContacts.Tables["Contact"].Columns["Email"]};
_dsContacts.Tables["Contact"].PrimaryKey = dcPk;
if (!Page.IsPostBack )
{
//처음 로드하는 경우 데이터를 바인딩합니다.
연락처 바인딩();
_sSort = "이름";
}
또 다른
{
// 그렇지 않으면 뷰 상태에서 정렬 상태를 읽습니다.
_sSort = (string)ViewState["Sort"];
}
}
두 번째 단계에서는 데이터 정렬 논리와 디스크에서 데이터를 읽는 방법이 포함된 데이터를 그리드에 바인딩하는 방법을 만들었습니다.
개인 무효 BindContacts()
{
//정렬 상태를 뷰 상태에 저장합니다.
ViewState["Sort"] = _sSort;
// 정렬된 데이터 보기에 그리드를 바인딩합니다.
DataView dv = new DataView(_dsContacts.Tables["Contact"]);
dv.Sort = _sSort;
dgContacts.DataSource = dv;
dgContacts.DataBind();
}
개인 무효 SaveContacts()
{
_dsContacts.WriteXml(Server.MapPath("Contacts.xml"));
}
ItemCommand 이벤트는 목록에 새 연락처 추가를 처리하는 데 사용됩니다. 참고: CommandName 매개변수가 Add인지 확인했습니다. ASPX 페이지 그리드의 마지막 열에 있는 바닥글 템플릿(FooterTemplate)에 있는 링크 버튼(LinkButton)의 반환 값을 처리하기 위한 것입니다.
개인 무효 dgContacts_ItemCommand(개체 소스, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
//데이터세트에 새 데이터를 추가합니다. 여기서는 처리 효율성을 높이기 위해 배열을 사용합니다.
if (e.CommandName == "추가")
{
string[] sContact = {"", "", ""};
sContact[0] = ((TextBox)e.Item.FindControl("NewEmail")).Text;
sContact[1] = ((TextBox)e.Item.FindControl("NewFirst")).Text;
sContact[2] = ((TextBox)e.Item.FindControl("NewLast")).Text;
_dsContacts.Tables["Contact"].Rows.Add(sContact
);
}
바인딩연락처();
}
정렬을 자세히 설명하는 다른 문서가 많기 때문에 SortCommand 코드를 건너뛰었습니다. 이 예제의 소스 코드를 다운로드하면 포함되어 있습니다.
마지막으로 폼에 있는 링크버튼(LinkButton)의 클릭이벤트(onClick)를 이곳으로 옮겼습니다. 여기에서는 DataGrid의 데이터 항목을 반복하여 필요한 삭제 및 업데이트 작업을 수행합니다.
개인 무효 btnUpdate_Click(개체 전송자, System.EventArgs e)
{
// 각 데이터 항목을 반복합니다.
foreach(dgContacts.Items의 DataGridItem)
{
// 페이지 상단이나 하단이 아닌 데이터 항목인지 확인하세요.
if (di.ItemType == ListItemType.Item || di.ItemType == ListItemType.AlternatingItem)
{
// 업데이트 또는 삭제 작업이 수행된 후 현재 행을 가져옵니다.
DataRow dr = _dsContacts.Tables["Contact"].Rows.Find(dgContacts.DataKeys[di.ItemIndex]);
// 행을 삭제해야 하는지 확인합니다.
if (((CheckBox)di.FindControl("chkDelete")).Checked)
{
_dsContacts.Tables["Contact"].Rows.Remove(dr);//지정된 행 삭제
}
또 다른
{
//데이터 행을 업데이트합니다.
dr["이메일"] = ((TextBox)di.FindControl("이메일")).Text;
dr["FirstName"] = ((TextBox)di.FindControl("첫 번째")).Text;
dr["LastName"] = ((TextBox)di.FindControl("Last")).Text;
}
}
}
//변경사항이 있으면 저장합니다.
if (_dsContacts.HasChanges())
{
연락처 저장();
}
BindContacts();//바인딩
}
결론
컨트롤의 위치를 통해 컨트롤 내 각 DataGridItem의 셀(Cell)을 쉽게 찾을 수 있습니다. 이를 수행하는 방법에는 여러 가지가 있으며 이 작업을 수행하는 더 나은 방법을 찾을 수 있을 것이라고 확신합니다. 보시다시피 전체 데이터 그리드를 한 번에 편집하는 것은 매우 간단합니다. 약간의 수정을 거쳐 페이지가 매겨진 그리드에도 동일한 방법을 사용할 수 있습니다.