Saya telah melihat banyak pertanyaan serupa di forum: Bagaimana cara menempatkan kotak centang, kotak teks, dll. di setiap baris DataGrid saya? Bagaimana cara memperbarui nilai-nilai mereka? Jawabannya cukup sederhana, dan dalam artikel ini saya akan menunjukkan cara melakukannya.
Kita semua tahu bahwa DataGrid adalah alat yang sangat ampuh. Menurut pengalaman saya, lebih dari 90% waktu, DataGrid digunakan untuk menampilkan data dan mungkin mengeditnya satu baris dalam satu waktu. Terkadang, Anda mungkin perlu mengedit beberapa baris atau bahkan semua data sekaligus. Contoh praktisnya adalah dalam aplikasi yang menjual barang secara online, di mana pelanggan mungkin ingin mengubah satu atau lebih barang di keranjang mereka sekaligus, dengan mengklik kotak centang untuk menghapus barang yang tidak mereka inginkan.
Konsep
Dalam contoh ini, saya menulis WebForm sederhana untuk mengelola daftar kontak yang disimpan dalam XML. Syaratnya sangat sederhana: bisa menambah kontak baru, mengedit/menghapus kontak yang sudah ada. Pengguna dapat mengubah atau menghapus beberapa kontak sekaligus, dan saya juga mengizinkan pengguna untuk mengurutkan kisi data berdasarkan kolom pilihan mereka.
Contoh saya ditulis dalam C#. Jika Anda lebih suka versi VB dari kode-kode ini, kode tersebut tersedia dalam kedua format di file unduhan.
File data XML dalam
contohContacts.xml
sangat sederhana dan intuitif.Karena sangat sederhana, saya tidak membuat rencana.
<?xml versi="1.0" mandiri="ya"?>
<Kontak>
<Kontak>
<Email>[email protected]</Email>
<Nama Depan>John</Nama Depan>
<LastName>Doe</LastName>
</Kontak>
<Kontak>
<Email>[email protected]</Email>
<Nama Depan>Jane</Nama Depan>
<LastName>Doe</LastName>
</Kontak>
</Kontak>
ContactList.aspx
Menyiapkan WebForm sangat sederhana. Saya menempatkan DataGrid baru ke dalam formulir saya dan mengaturnya agar memiliki 4 kolom, dengan kolom pertama berisi kotak centang untuk menghapus kontak. Anda akan melihat bahwa hal utama yang saya lakukan di sini adalah membuat setiap kolom sebagai kolom templat (TemplateColumn). Ini memungkinkan saya untuk menempatkan objek kotak teks dan kotak centang ke dalam templat data (ItemTemplate). Ini adalah trik untuk menampilkan sesuatu selain teks di setiap baris kisi. Selain itu, Anda akan melihat bahwa saya menggunakan FooterTemplate untuk membuat pembuatan kontak baru menjadi mudah dan intuitif.
Saya juga menyertakan LinkButton untuk menyimpan modifikasi dan penghapusan yang dilakukan oleh pengguna. Tapi itu tidak digunakan untuk menambah kontak baru. Operasi penambahan kontak baru diselesaikan dengan tombol tautan (LinkButton) di templat footer kolom terakhir.
<asp:datagrid id="dgContacts" runat="server" ShowFooter="True" AllowSorting="True" Forefont color="Black" GridLines="None" CellPadding="2" Backfont color="LightGoldenrodYellow" BorderWidth="1px " Borderfont color="Tan" Lebar="499px" AutoGenerateColumns="False" DataKeyField="Email">
<SelectedItemStyle Forefont color="GhostWhite" Backfont color="DarkSlateBlue"></SelectedItemStyle>
<AlternatingItemStyle Backfont color="PaleGoldenrod"></AlternatingItemStyle>
<HeaderStyle Font-Bold="Benar" Backfont color="Tan"></HeaderStyle>
<FooterStyle Backfont color="Tan"></FooterStyle>
<Kolom>
<asp:TemplateColumn SortExpression="Nama Depan" HeaderText="Nama Depan">
<Templat Barang>
<asp:TextBox id=Runat pertama="server" Lebar="109px" Text='<%# DataBinder.Eval(Container, "DataItem.FirstName") %>'>
</asp:Kotak Teks>
</Templat Barang>
<Templat Kaki>
<asp:TextBox id="NewFirst" runat="server" Lebar="109px"></asp:TextBox>
</Templat Kaki>
</asp:Kolom Templat>
<asp:TemplateColumn SortExpression="LastName" HeaderText="Nama Belakang">
<Templat Barang>
<asp:TextBox id=Runat terakhir="server" Lebar="109px" Text='<%# DataBinder.Eval(Container, "DataItem.LastName") %>'>
</asp:Kotak Teks>
</Templat Barang>
<Templat Kaki>
<asp:TextBox id="NewLast" runat="server" Lebar="109px"></asp:TextBox>
</Templat Kaki>
</asp:Kolom Templat>
<asp:TemplateColumn SortExpression="Email" HeaderText="Email">
<Templat Barang>
<asp:TextBox id=Email runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'>
</asp:Kotak Teks>
</Templat Barang>
<Templat Kaki>
<asp:TextBox id="NewEmail" runat="server"></asp:TextBox>
</Templat Kaki>
</asp:Kolom Templat>
<asp:TemplateColumn HeaderText="Hapus Kontak">
<ItemStyle HorizontalAlign="Tengah"></ItemStyle>
<Templat Barang>
<asp:CheckBox Runat="server" ID="chkDelete"></asp:CheckBox>
</Templat Barang>
<FooterStyle HorizontalAlign="Tengah"></FooterStyle>
<Templat Kaki>
<asp:LinkButton Runat="server" Text="Tambahkan" CommandName="Tambahkan" ID="Linkbutton1" NAME="Linkbutton1"></asp:LinkButton>
</Templat Kaki>
</asp:Kolom Templat>
</Kolom>
</asp:datagrid>
ContactList.cs
Setelah saya memilih untuk menggunakan file XML untuk mengakses data, saya memutuskan untuk menggunakan DataSet untuk mengaksesnya. Karena objek DataSet memiliki metode ReadXml dan WriteXml, ini adalah pilihan yang sangat masuk akal. Langkah pertama adalah membaca data dalam XML. Seperti yang Anda lihat dari kode, saya membuat anggota untuk menangani penyortiran data.
Kumpulan Data pribadi _dsContacts;
string pribadi _sSort;
private void Page_Load(pengirim objek, System.EventArgs e)
{
//Muat file XML.
_dsContacts = Kumpulan Data baru();
_dsContacts.ReadXml(Server.MapPath("Kontak.xml"));
DataColumn[] dcPk = {_dsContacts.Tables["Kontak"].Kolom["Email"]};
_dsContacts.Tables["Kontak"].PrimaryKey = dcPk;
jika (!Page.IsPostBack )
{
// Jika dimuat untuk pertama kali, ikat data.
BindContacts();
_sSort = "Nama Depan";
}
kalau tidak
{
// Jika tidak, baca status pengurutan dari status tampilan.
_sSort = (string)ViewState["Sort"];
}
}
Pada langkah kedua, saya membuat metode untuk mengikat data ke grid, yang mencakup logika pengurutan data dan metode untuk membaca data dari disk.
kekosongan pribadi BindContacts()
{
//Simpan status penyortiran untuk melihat status.
ViewState["Sort"] = _sSort;
// Ikat grid ke tampilan data yang diurutkan.
DataView dv = new DataView(_dsContacts.Tables["Kontak"]);
dv.Sort = _sSort;
dgContacts.DataSource = dv;
dgKontak.DataBind();
}
kekosongan pribadi SaveContacts()
{
_dsContacts.WriteXml(Server.MapPath("Kontak.xml"));
}
Event ItemCommand digunakan untuk menangani penambahan kontak baru ke dalam daftar. Catatan: Saya memeriksa apakah parameter CommandName adalah Tambah. Ini untuk menangani nilai kembalian tombol tautan (LinkButton) di templat footer (FooterTemplate) dari kolom terakhir kisi di halaman ASPX.
private void dgContacts_ItemCommand(sumber objek, System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
//Tambahkan data baru ke kumpulan data. Di sini saya menggunakan array untuk meningkatkan efisiensi pemrosesan.
if (e.CommandName == "Tambahkan")
{
string[] sKontak = {"", "", ""};
sContact[0] = ((Kotak Teks)e.Item.FindControl("Email Baru")).Teks;
sContact[1] = ((Kotak Teks)e.Item.FindControl("BaruPertama")).Teks;
sContact[2] = ((Kotak Teks)e.Item.FindControl("Baru Terakhir")).Teks;
_dsContacts.Tables["Kontak"].Rows.Add(sContacts
();
}
BindKontak();
}
Saya melewatkan kode SortCommand karena ada banyak dokumen lain yang membahas penyortiran dengan sangat detail. Jika Anda mengunduh kode sumber untuk contoh ini, kode itu disertakan.
Terakhir, saya memindahkan event klik (onClick) dari tombol link (LinkButton) pada form di sini. Di sini saya menelusuri item data di DataGrid untuk melakukan operasi penghapusan dan pembaruan yang diperlukan.
private void btnUpdate_Click(pengirim objek, System.EventArgs e)
{
// Ulangi setiap item data.
foreach (DataGridItem di dgContacts.Items)
{
// Pastikan itu adalah item data dan bukan bagian atas atau bawah halaman.
if (di.ItemType == ListItemType.Item || di.ItemType == ListItemType.AlternatingItem)
{
// Dapatkan baris saat ini setelah operasi pembaruan atau penghapusan dilakukan.
DataRow dr = _dsContacts.Tables["Contact"].Rows.Find(dgContacts.DataKeys[di.ItemIndex]);
// Periksa apakah suatu baris perlu dihapus.
if (((Kotak Centang)di.FindControl("chkDelete")).Dicentang)
{
_dsContacts.Tables["Contact"].Rows.Remove(dr);//Hapus baris yang ditentukan
}
kalau tidak
{
//Perbarui baris data.
dr["Email"] = ((Kotak Teks)di.FindControl("Email")).Teks;
dr["Nama Depan"] = ((Kotak Teks)di.FindControl("Nama Depan")).Teks;
dr["Nama Belakang"] = ((Kotak Teks)di.FindControl("Nama Belakang")).Teks;
}
}
}
//Simpan jika ada perubahan.
jika (_dsContacts.HasChanges())
{
SimpanKontak();
}
BindContacts();//Mengikat
}
Kesimpulan
Saya dapat dengan mudah menemukan sel (Cells) dari setiap DataGridItem di kontrol melalui posisi kontrol. Ada beberapa cara untuk mencapai hal ini, dan saya yakin Anda dapat menemukan cara yang lebih baik untuk menyelesaikan tugas ini. Seperti yang Anda lihat, mengedit seluruh grid data sekaligus sangatlah sederhana. Metode yang sama juga dapat digunakan untuk grid yang diberi nomor halaman dengan sedikit modifikasi