2015-0306—DataLList

DataList具有repeater的所有功能，不同的是DataList自动将模板绘制成为一个表格，每一行数据都绘制成<tr>。

一、SQL的准备工作：

按照以下代码创建：

create database Mycontacts
go
use Mycontacts
go
create table groups
(
    id int identity(1,1) primary key,
    name varchar(20) not null
)
go

create table contacts
(
    id int identity(1,1) primary key,
    name varchar(20) not null,
    tel varchar(20) not null,
    groupid int not null references groups(id)
)

二、DataList

工具箱--数据—DataList

由于DataList可以进行单行的编辑，需要一个UpdatePanel来包裹。

我们可以在源视图中设计DataList模板：

首先认识一下模板的标签：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DataList ID="DataList1" runat="server">
                <HeaderTemplate></HeaderTemplate><%--头部模板--%>
                <ItemTemplate></ItemTemplate><%--数据模板--%>
                <AlternatingItemTemplate></AlternatingItemTemplate><%--交替模板--%>
                <FooterTemplate></FooterTemplate><%--底部模板--%>
                <EditItemTemplate></EditItemTemplate><%--编辑时的模板--%>
                <SelectedItemTemplate></SelectedItemTemplate><%--选中的模板--%>
                </asp:DataList>
            </ContentTemplate>
        </asp:UpdatePanel>

每一个模板中都可以单独的存放一个表格：

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <br />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DataList ID="DataList1" runat="server" OnDeleteCommand="DataList1_DeleteCommand" OnEditCommand="DataList1_EditCommand" OnUpdateCommand="DataList1_UpdateCommand">
                    <HeaderTemplate>
                        <table border="1">
                            <tr>
                                <td width="100"></td>
                                <td width="100">姓名</td>
                                <td width="100">电话</td>
                                <td width="100">分组</td>
                            </tr>
                        </table>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <table border="1">
                            <tr>
                                <td width="100">
                                    <asp:LinkButton ID="LinkButton1" runat="server" CommandName="edit" CommandArgument='<%#Eval("id") %>'>编辑</asp:LinkButton>
                                    <asp:LinkButton ID="LinkButton2" runat="server" CommandArgument='<%#Eval("id") %>' CommandName="delete">删除</asp:LinkButton>
                                </td>
                                <td width="100"><%#Eval("name") %></td>
                                <td width="100"><%#Eval("tel") %></td>
                                <td width="100"><%#Eval("groupid") %></td>
                            </tr>
                        </table>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <table border="1">
                            <tr>
                                <td width="100">
                                    <asp:LinkButton ID="LinkButton1" runat="server" CommandArgument='<%#Eval("id") %>' CommandName="update">更新</asp:LinkButton>
                                    <asp:LinkButton ID="LinkButton2" CommandArgument='<%#Eval("id") %>' runat="server" CommandName="delete">删除</asp:LinkButton>
                                </td>
                                <td width="100">
                                    <asp:TextBox ID="TextBox5" Width="96px" runat="server"></asp:TextBox>
                                </td>
                                <td width="100">
                                    <asp:TextBox ID="TextBox4" Width="96px" runat="server"></asp:TextBox>
                                </td>
                                <td width="100">
                                    <asp:DropDownList ID="DropDownList2" runat="server"></asp:DropDownList>

                                </td>
                            </tr>
                        </table>
                    </EditItemTemplate>
                    <FooterTemplate>
                    </FooterTemplate>
                </asp:DataList>
            </ContentTemplate>
        </asp:UpdatePanel>

这里做出了一个联系人的表，带有编辑 和 删除按钮。放在内部的控件大小格式都可以在自己设置，加粗部分是编辑时的模板。

注：如果要使用交替模板需要，将<ItemTemplate></ItemTemplate>标签中的内容复制，添加进入到<AlternatingItemTemplate></AlternatingItemTemplate>中数据绑定都一样，注意其中的控件的名字也要一样。

上文代码的显示结果：

点击编辑按钮：

首先我们需要获取点击的是哪一行的编辑按钮，

<asp:LinkButton ID="LinkButton1" runat="server" CommandName="edit" CommandArgument='<%#Eval("id") %>'>编辑</asp:LinkButton>

注意：CommandName属性的值是固定的，分别是  编辑：Edit，删除：Delete，修改：Update

CommandArgument属性是绑定的表中的列名。

我们需要这两个属性来获取点击的是哪个按钮以及点击的是哪一行的按钮。

在DataList的属性中可以看到DeleteCommand（删除）、EditCommand（编辑）、UpdateCommand（修改）三个事件，点击编辑、删除、修改时触发的事件，分别双击可以自动生成事件：

三个事件的代码：

private DataClassesDataContext _Context;
    protected void Page_Load(object sender, EventArgs e)
    {
        _Context = new DataClassesDataContext();
        if (!IsPostBack)
        {
            binddropdown();
            binddata();
        }
    }
    //DataList的数据绑定
    public void binddata()
    {
        List<contacts> list = _Context.contacts.AsQueryable().ToList();
        DataList1.DataSource = list;
        DataList1.DataBind();
    }
    //下拉列表的数据绑定
    public void binddropdown()
    {
        List<groups> query = _Context.groups.AsQueryable().ToList();

        if (query != null)
        {
            foreach(groups gdata in query)
            {
                ListItem lt = new ListItem(gdata.name,gdata.id.ToString());
                DropDownList1.Items.Add(lt);
            }
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        contacts data = new contacts
        {
             name = TextBox1.Text,
              tel = TextBox2.Text,
               groupid = int.Parse(DropDownList1.SelectedValue)
        };
        _Context.contacts.InsertOnSubmit(data);
        _Context.SubmitChanges();
    }
    //删除
    protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
    {
        string id = e.CommandArgument.ToString();//根据CommandArgument获取点击的是哪一行
        contacts cdata = _Context.contacts.Single(r => r.id == int.Parse(id));
        _Context.contacts.DeleteOnSubmit(cdata);
        _Context.SubmitChanges();
        Response.Redirect("Default.aspx");//跳转页面
    }
    //编辑
    protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
    {
        DataList1.EditItemIndex = e.Item.ItemIndex;
        binddata();
        string id = e.CommandArgument.ToString();
        contacts cdata = _Context.contacts.Single(r=>r.id==int.Parse(id));
        if (cdata != null)//分组中的下拉列表框绑定
        {
           DropDownList txt = (DropDownList)DataList1.Items[e.Item.ItemIndex].FindControl("DropDownList2");
           List<groups> query = _Context.groups.AsQueryable().ToList();
           if (query != null)
           {
               foreach (groups gdata in query)
               {
                   ListItem lt = new ListItem(gdata.name, gdata.id.ToString());
                   txt.Items.Add(lt);
               }
           }
            //电话文本框传值
           TextBox txt4 = (TextBox)DataList1.Items[e.Item.ItemIndex].FindControl("TextBox4");
           txt4.Text = cdata.tel;
            //名字文本框传值
           TextBox txt5 = (TextBox)DataList1.Items[e.Item.ItemIndex].FindControl("TextBox5");
           txt5.Text = cdata.name;
        }
    }
    //修改  更新
    protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
    {
       string s = e.CommandArgument.ToString();
       contacts cdata = _Context.contacts.Single(r=>r.id==int.Parse(s));
       if (cdata != null)
       {
           cdata.name = ((TextBox)DataList1.Items[e.Item.ItemIndex].FindControl("TextBox5")).Text;
           cdata.tel = ((TextBox)DataList1.Items[e.Item.ItemIndex].FindControl("TextBox4")).Text;
           cdata.groupid = int.Parse(((DropDownList)DataList1.Items[e.Item.ItemIndex].FindControl("DropDownList2")).SelectedValue);

           _Context.SubmitChanges();

       }
       Response.Redirect("Default.aspx");
    }

点击编辑按钮会按照我们设置的<EditItemTemplate>格式显示

可以把两个表的数据组合显示：

注：这一步最好在开始就做出修改，如果在最后再进行修改将会出现很多需要修改的地方，并且很容易报错

首先，两个表中的列名不可以重复，如图中框出的列名，需要我们创建一个别名

在groups的name列的属性中修改名称names：

DataList的数据绑定方法做出相应修改：

使用join语句。

public void binddata()
    {
        _Context = new DataClassesDataContext();
        var vv = from m in _Context.contacts
                 join c in _Context.groups
                 on m.groupid equals c.id
                 select new
                 {
                     m.id,
                     m.name,
                     m.tel,//contacts表
                     c.names//Groups表
                 };
        DataList1.DataSource = vv;
        DataList1.DataBind();
    }

注意：也需要修改网页中的数据绑定：

<ItemTemplate>
<table border="1">
        <tr>
           <td width="100">
           <asp:LinkButton ID="LinkButton1" runat="server" CommandName="edit" CommandArgument='<%#Eval("id") %>'>编辑</asp:LinkButton>
           <asp:LinkButton ID="LinkButton2" runat="server" CommandArgument='<%#Eval("id") %>' CommandName="delete">删除</asp:LinkButton>
           </td>
           <td width="100"><%#Eval("name") %></td>
           <td width="100"><%#Eval("tel") %></td>
           <td width="100"><%#Eval("names") %></td>
        </tr>
    </table>
</ItemTemplate>