首頁 > 文章 > 後端開發 > 《ASP.NET》資料綁定—DataList實務篇的圖文程式碼詳解

《ASP.NET》資料綁定—DataList實務篇的圖文程式碼詳解

黄舟原創: 2017-03-08 13:12:341266瀏覽

上篇文章大概講了DataList的一些基礎知識，掌握這些知識在將來的應用中起到很大的作用，現在我們就開始講上篇文章中說的基礎知識做一個小例子。

首先，我機子的資料庫中有一張person表，如下圖所示。

# 現在，我們以DataList控制項顯示表格中的資訊出來，並且可以在DataList控制項上對資料庫中的表進行編輯操作。

1、先用vs創建web應用程序，添加web窗體，在web窗體內拉入DataList控件，右鍵控件，選擇編輯項模板，在這裡我們能看到四個模板，其中兩個是SelectedItemTemplate和EditItemTemplate，在ItemTemplate模板中拉入兩個LinkButton控件，一個將Text改名為查看，CommandName屬性改成select，另外一個將Text改成編輯，其CommandName屬性改成edit。然後在HTML頁面建立SelectedItemTemplate模板，在模板中綁定員工的所有資訊。（這裡是實現查看員工詳細資訊的功能）。

2、在EditItemTemplate範本項目中新增兩個LinkButton控件，Text屬性分別為保存和取消，CommandName屬性分別為update和cancel，然後再新增一個TextBox控件，用來輸入姓名，在這裡實現修改員工姓名的功能。

3、我們還可以在屬性產生器總更改表格的樣式、將字體的顏色、網格的距離更改一下，這裡詳細不住不再敖述，最後結束模板編輯。

4、編輯前台HTML程式碼

ItemTemplate範本中的程式碼（用來顯示員工的姓名）

                <ItemTemplate>
                    <asp:LinkButton ID="lbtnShowDetails" runat="server" CommandName="select" ForeColor="Red">查看</asp:LinkButton>
                    <asp:LinkButton ID="lbtnEdit" runat="server" CommandName="edit" ForeColor="Red">编辑</asp:LinkButton>
                    <%# DataBinder.Eval(Container.DataItem,"personName") %>
                </ItemTemplate>

# SelectedItemTemplate範本中的程式碼（用來顯示員工中的詳細資訊）

                 <SelectedItemTemplate>
                    员工编号： <%# DataBinder.Eval(Container.DataItem,"pID") %>
                    <br />
                    员工姓名： <%# DataBinder.Eval(Container.DataItem,"personName") %>
                    <br />
                    员工性别： <%# DataBinder.Eval(Container.DataItem,"personSex") %>
                </SelectedItemTemplate>

# EditItemTemplate範本中的程式碼（用來修改員工姓名）注意：將文字方塊中的text屬性綁定到員工的姓名。

                <EditItemTemplate>
                    <asp:LinkButton ID="lbtnupdate" runat="server" CommandName="update">保存</asp:LinkButton>
                    <asp:LinkButton ID="lbtnCancel" runat="server" CommandName="cancel">取消</asp:LinkButton> <br />
                    员工编号：<%# DataBinder.Eval(Container.DataItem,"pID") %>
                    <br />姓名：<asp:TextBox ID="txtName" runat="server" 
                    <span style="color:#FF0000;">Text=&#39;<%# DataBinder.Eval(Container.DataItem,"personName") %>&#39;</span> Width="50px">
                    </asp:TextBox>
                </EditItemTemplate>

# 最後是頁首和頁尾範本

              <HeaderTemplate>
                    模板的页眉
                </HeaderTemplate>
               <FooterTemplate>
                    <br />
                    模板的页脚
                </FooterTemplate>

5.編輯好了的前台介面如下

6、後台程式碼的撰寫

6.1、編寫DataList資料綁定的方法

## ##

 private void dataBindToDataList()
        {
            SqlConnection con = DB.createConnection();
            SqlDataAdapter sda = new SqlDataAdapter();
            string sql = "select * from person ";
            sda.SelectCommand = new SqlCommand(sql, con);
            DataSet ds = new DataSet();
            sda.Fill(ds, "per");
            DataList1.DataKeyField = "pID";  //将主键存入到DataKeys集合当中，以便后面对某一条数据进行编辑。
            DataList1.DataSource = ds.Tables["per"];
            DataList1.DataBind();
        }

6.2、寫出Page_Loda事件，判斷頁面是否第一次加載，並在第一次加載頁面時綁定資料。

   protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                this.dataBindToDataList();
            }
        }

6.3、寫DataList1_ItemCommand事件，實作檢視員工詳細資料功能（前提是我們已經在SelectedItemTemplate範本中將員工的詳細資料已經綁定，現在只是呼叫方法顯示出來）

 protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)// e表示DataList传递给该函数的信息。
        {
            if (e.CommandName == "select")
            {
                this.DataList1.SelectedIndex = e.Item.ItemIndex;
                this.dataBindToDataList();
            }
        }

6.4、撰寫DataList1_EditCommand事件，實作編輯功能，將EditItemTemplate模板中的資訊顯示出來。

protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)// e表示DataList传递给该函数的信息。
        {
            this.DataList1.EditItemIndex = e.Item.ItemIndex;//e.Item表示DataList中发生事件的那一项
            this.dataBindToDataList();

        }

这时候，编辑模板项的绑定信息就会显示出来，我们可以在这更改姓名，或者取消编辑，效果图如下

最后是取消修改功能的代码、更新功能的代码、删除功能的代码，事件分别为DataList1_CancelCommand、DataList1_UpdateCommand、DataList1_DeleteCommand。

protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)// e表示DataList传递给该函数的信息。
        {
            DataList1.EditItemIndex = -1;  //当EditItemIndex属性值为-1时，表示不显示EditItemTemplate模板
            dataBindToDataList();
        }

        protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
        {
             string ID =DataList1.DataKeys[e.Item.ItemIndex].ToString();
             string name = ((TextBox)e.Item.FindControl("txtName")).Text ;
             SqlConnection con = DB.createConnection();
             SqlCommand cmd = new SqlCommand("update person set personName=&#39;"+name+"&#39;where pID=&#39;"+ID+"&#39;",con);
             cmd.ExecuteNonQuery();
             DataList1.EditItemIndex = -1;
             dataBindToDataList();
        }
        protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
        {
            string ID = DataList1.DataKeys[e.Item.ItemIndex].ToString();
            SqlConnection con = DB.createConnection();
            SqlCommand cmd = new SqlCommand("delete from person where pID=&#39;" + ID + "&#39;", con);
            cmd.ExecuteNonQuery();
            DataList1.EditItemIndex = -1;
            dataBindToDataList();
        }

总结

用DataList控件实现对数据库中person表的操作，实现查看详细信息，修改操作，大致流程是先修改DataList控件的各个模板中绑定的数据，然后等待具体的事件使该模板中的内容显示出来，最后再对数据进行操作。当数据适配器DateAdapter对象将数据源中的数据填充到DataSet中后，我么可以用DataList.DataKeyField=“主键字段名” 语句将主键添加到DataList的DataKeys集合中，当我们要修改数据的时候可以再从该集合中取出要编辑的数据项的主键，语句为DataList1.DataKeys[e.Item.ItemIndex]。这样我们就可以随心所欲的修改DataList表中的数据项了。

以上是《ASP.NET》資料綁定—DataList實務篇的圖文程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳解《ASP.NET》資料綁定—DataList下一篇：詳解《ASP.NET》資料綁定—DataList

看更多