ホーム>ネットワークプログラミングチュートリアル>ASP.NET チュートリアル

完全に編集可能な DataGrid を作成する

著者：Eve Cole 更新時間：2009-06-30 15:29:48

フォーラムで同じまたは類似の質問をたくさん見ました。DataGrid の各行にチェックボックスやテキストボックスなどを配置するにはどうすればよいですか?それらの値を更新するにはどうすればよいでしょうか?答えは非常に簡単です。この記事ではその方法を説明します。

DataGrid が非常に強力なツールであることは誰もが知っています。私の経験では、90% 以上の場合、DataGrid はデータを表示し、場合によっては一度に 1 行ずつ編集するために使用されます。 場合によっては、複数の行やすべてのデータを一度に編集する必要があるかもしれません。実際の例としては、商品をオンラインで販売するアプリケーションが挙げられます。この場合、顧客はバスケット内の 1 つ以上の商品を一度に変更し、チェックボックスをクリックして不要な商品を削除したい場合があります。

コンセプト

この例では、XML で保存された連絡先リストを管理するための簡単な Web フォームを作成しました。 要件は非常に単純です。新しい連絡先の追加、既存の連絡先の編集/削除ができることです。ユーザーは複数の連絡先を一度に変更または削除できます。また、ユーザーが選択した列でデータ グリッドを並べ替えることもできます。

私の例は C# で書かれています。 これらのコードの VB バージョンを希望する場合は、コードはダウンロード ファイルで両方の形式で入手できます。

Contacts.xml

サンプル

の XML データ ファイルは

非常にシンプルで直感的です。

非常に簡単なので計画は立てませんでした。

<?xml version="1.0" スタンドアロン="はい"?>
<連絡先>
<連絡先>
<電子メール>[email protected]</電子メール>
<名>ジョン</名>
<姓>ドウ</姓>
</連絡先>
<連絡先>
<電子メール>[email protected]</電子メール>
<名>ジェーン</名>
<姓>ドウ</姓>
</連絡先>
</Contacts>

ContactList.aspx

Web フォームの設定は非常に簡単です。新しい DataGrid をフォームに配置し、4 つの列が含まれるように設定し、最初の列には連絡先を削除するためのチェックボックスが含まれています。ここで行った主な作業は、各列をテンプレート列 (TemplateColumn) として作成することであることがわかります。 これにより、テキストボックスとチェックボックスのオブジェクトをデータ テンプレート (ItemTemplate) に配置できるようになります。これは、グリッドの各行にテキスト以外のものを表示するためのトリックです。 さらに、新しい連絡先の作成を簡単かつ直感的に行うために、FooterTemplate を使用していることに気づくでしょう。

ユーザーによる変更と削除を保存するための LinkBut​​ton も組み込みました。ただし、新しい連絡先を追加するためには使用されません。新しい連絡先を追加する操作は、最後の列のフッター テンプレートのリンク ボタン (LinkBut​​ton) によって完了します。

<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" width="499px" AutoGenerateColumns="False" DataKeyField="Email">
<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:TextBox>
</ItemTemplate>
<フッターテンプレート>
<asp:TextBox id="NewFirst" runat="server" width="109px"></asp:TextBox>
</フッターテンプレート>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="姓" HeaderText="姓">
<アイテムテンプレート>
<asp:TextBox id=Last runat="server" width="109px" Text='<%# DataBinder.Eval(Container, "DataItem.LastName") %>'>
</asp:TextBox>
</ItemTemplate>
<フッターテンプレート>
<asp:TextBox id="NewLast" runat="server" width="109px"></asp:TextBox>
</フッターテンプレート>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="電子メール" HeaderText="電子メール">
<アイテムテンプレート>
<asp:TextBox id=Email runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Email") %>'>
</asp:TextBox>
</ItemTemplate>
<フッターテンプレート>
<asp:TextBox id="NewEmail" runat="server"></asp:TextBox>
</フッターテンプレート>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="連絡先の削除">
<ItemStyle horizo​​ntalAlign="Center"></ItemStyle>
<アイテムテンプレート>
<asp:CheckBox Runat="server" ID="chkDelete"></asp:CheckBox>
</ItemTemplate>
<FooterStyle horizo​​ntalAlign="Center"></FooterStyle>
<フッターテンプレート>
<asp:LinkBut​​ton Runat="server" Text="Add" CommandName="Add" ID="Linkbutton1" NAME="Linkbutton1"></asp:LinkBut​​ton>
</フッターテンプレート>
</asp:TemplateColumn>
</列>
</asp:datagrid>

 

ContactList.cs

XML ファイルを使用してデータにアクセスすることを選択した後、DataSet を使用してデータにアクセスすることにしました。 DataSet オブジェクトには ReadXml メソッドと WriteXml メソッドがあるため、これは非常に合理的な選択です。最初のステップは、XML でデータを読み取ることです。コードからわかるように、データの並べ替えを処理するメンバーを作成しました。

プライベート DataSet _dsContacts;
プライベート文字列 _sSort;

プライベート void Page_Load(オブジェクト送信者、System.EventArgs e)
{
//XMLファイルを読み込みます。
_dsContacts = 新しい DataSet();
_dsContacts.ReadXml(Server.MapPath("Contacts.xml"));
DataColumn[] dcPk = {_dsContacts.Tables["連絡先"].Columns["メール"]};
_dsContacts.Tables["連絡先"].PrimaryKey = dcPk

if (!Page.IsPostBack )
{
// 初めてロードする場合は、データをバインドします。
バインドコンタクト();
_sSort = "名";
}
それ以外
{
// それ以外の場合は、ビューステートからソートステートを読み取ります。
_sSort = (文字列)ViewState["並べ替え"];
}
}


2 番目のステップでは、データをグリッドにバインドするメソッドを作成しました。これには、データの並べ替えロジックとディスクからデータを読み取るメソッドが含まれます。

プライベート void BindContacts()
{
//ソート状態をビューステートに保存します。
ViewState["Sort"] = _sSort;

// グリッドを並べ替えられたデータ ビューにバインドします。
DataView dv = new DataView(_dsContacts.Tables["Contact"]);
dv.Sort = _sSort;
dgContacts.DataSource = dv;
dgContacts.DataBind();
プライベート

void SaveContacts()
{
_dsContacts.WriteXml(Server.MapPath("Contacts.xml"));

ItemCommand イベントは

、

リストへの新しい連絡先の追加を処理するために使用されます。注: CommandName パラメーターが Add であるかどうかを確認しました。これは、ASPX ページのグリッドの最後の列のフッター テンプレート (FooterTemplate) 内のリンク ボタン (LinkBut​​ton) の戻り値を処理するためです。

private void 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

);

BindContacts()

;


並べ替えについて詳しく説明しているドキュメントは他にもたくさんあるため、SortCommand コードは省略しました

。

この例のソース コードをダウンロードすると、それが含まれます。

最後にフォーム上のリンクボタン(LinkBut​​ton)のクリックイベント(onClick)をここに移動しました。 ここでは、DataGrid 内のデータ項目をループして、必要な削除および更新操作を実行します。

private void 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("First")).Text;
dr["姓"] = ((TextBox)di.FindControl("姓")).Text;
}
}
}

//変更がある場合は保存します。
if (_dsContacts.HasChanges())
{
SaveContacts();
BindContacts

();//バインディング
結論

コントロールの位置から

、

コントロール内の各 DataGridItem のセル (Cell) を簡単に見つけることができます。 これを達成するには複数の方法がありますが、このタスクを達成するためのより良い方法が見つかると思います。ご覧のとおり、データ グリッド全体を一度に編集するのは非常に簡単です。 同じ方法をわずかに変更してページ分割されたグリッドにも使用できます。
関連記事