ListView控件学习系列2-编辑ListView

一、编辑，取消，更新操作

首先拖一个ListView控件到页面,然后按如下代码进行调整,这里为了利用ListView控件中按钮的内置功能CommandName必须和我们这里的名字一样

前端代码
<asp:ListView ID="ListView1" runat="server" OnItemEditing="ListView1_ItemEditing"
            OnItemCanceling="ListView1_ItemCanceling" OnItemUpdating="ListView1_ItemUpdating">
            <ItemTemplate>
                <tr>
                    <td>
                        <%#Eval("ID") %>
                    </td>
                    <td>
                        <%#Eval("name") %>
                    </td>
                    <td>
                        <asp:Button ID="EditButton" runat="server" Text="Edit" CommandName="Edit" />
                    </td>
                </tr>
            </ItemTemplate>
            <EditItemTemplate>
                <tr>
                    <td>
                        <asp:Label ID="IDLable" runat="server" Text='<%#Eval("ID") %>' />
                    </td>
                    <td>
                        <asp:TextBox ID="NameTextBox" runat="server" Text='<%#Bind("Name") %>' />
                    </td>
                    <td>
                        <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />
                        <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
                    </td>
                </tr>
            </EditItemTemplate>
            <LayoutTemplate>
                <table>
                    <tr runat="server" id="itemPlaceholder">
                    </tr>
                </table>
            </LayoutTemplate>
        </asp:ListView>

 

这里我们在App_Code文件夹中添加DataAccess类来模拟数据提供,代码如下:

 

模拟数据提供代码
public class DataAccess
{
    public List<Employee> List;
    public DataAccess()
    {
        List = new List<Employee>();
        Employee e1 = new Employee {ID=1, Name = "lfm1", Age = 30 };
        Employee e2 = new Employee {ID=2, Name = "lfm2", Age = 30 };
        Employee e3 = new Employee {ID=3, Name = "lfm3", Age = 30 };
        Employee e4 = new Employee {ID=4, Name = "lfm4", Age = 30 };
        Employee e5 = new Employee {ID=5, Name = "lfm5", Age = 30 };
        Employee e6 = new Employee {ID=6, Name = "lfm6", Age = 30 };
        List.Add(e1);
        List.Add(e2);
        List.Add(e3);
        List.Add(e4);
        List.Add(e5);
        List.Add(e6);

    }
}
public class Employee
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
    public int Sex { get; set; }
}

 

页面的后台代码如下:

 

页面后台代码
public partial class _Default : System.Web.UI.Page
{
    DataAccess da = new DataAccess();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind();
        }
    }
    private void Bind()
    {
        ListView1.DataSource = da.List;
        ListView1.DataBind();
    }
    protected void ListView1_ItemEditing(object sender, ListViewEditEventArgs e)
    {
        ListView1.EditIndex = e.NewEditIndex;
        Bind();
    }
    protected void ListView1_ItemUpdating(object sender, ListViewUpdateEventArgs e)
    {
        foreach (var item in da.List)
        {
            if (item.ID.ToString() == ((Label)ListView1.Items[e.ItemIndex].FindControl("IDLable")).Text)
            {
                item.Name = ((TextBox)ListView1.Items[e.ItemIndex].FindControl("NameTextBox")).Text;
            }
        }
        ListView1.EditIndex = -1;
        Bind();
    }
    protected void ListView1_ItemCanceling(object sender, ListViewCancelEventArgs e)
    {
        ListView1.EditIndex = -1;
        Bind();
    }
}

 

这里需要注意在Page_Load中绑定时必须判断是否是回发,如果是回发状态则不能重新绑定,因为如果重新绑定则相应的事件不会被触发

 

二、删除操作

前端代码

 

前端代码
<asp:ListView ID="ListView1" runat="server" OnItemDeleting="ListView1_ItemDeleting">
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:Label ID="IDLable" runat="server" Text='<%#Eval("ID") %>' />
                    </td>
                    <td>
                        <%#Eval("name") %>
                    </td>
                    <td>
                        <asp:Button ID="EditButton" runat="server" Text="Edit" CommandName="Edit" />
                    </td>
                    <td>
                        <asp:Button ID="DeleteButton" runat="server" Text="Delete" CommandName="Delete" />
                    </td>
                </tr>
            </ItemTemplate>
            <LayoutTemplate>
                <table>
                    <tr runat="server" id="itemPlaceholder">
                    </tr>
                </table>
            </LayoutTemplate>
</asp:ListView>

 

因为这里是模拟数据提供，所以数据的状态我们暂且用Session保存，后台代码如下：

 

后台代码
public partial class _Default : System.Web.UI.Page
{
    DataAccess da;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["da"] == null)
        {
            da = new DataAccess();
            Session["da"] = da;
        }
        else
        {
            da = Session["da"] as DataAccess;
        }
        if (!IsPostBack)
        {
            Bind();
        }
    }
    protected void ListView1_ItemDeleting(object sender, ListViewDeleteEventArgs e)
    {
        foreach (var item in da.List)
        {
            string currentID = ((Label)ListView1.Items[e.ItemIndex].FindControl("IDLable")).Text;
            if (item.ID.ToString() == currentID)
            {
                da.List.Remove(item);
                break;
            }
        }
        Bind();
    }
}

 

三、插入操作

 

ListView的Insert Mode通过其属性InsertItemPosition来控制，该属性的取值有三种：

None：非Insert状态
FirstItem：Insert状态，且编辑模板显示于ListView所有item的最前面
LastItem ：Insert状态，且编辑模板显示于ListView所有item的最后面

前端代码：

 

前端代码
<asp:ListView ID="ListView1" runat="server" OnItemInserting="ListView1_ItemInserting">
            <LayoutTemplate>
                <table id="Table1" runat="server" border="0" style="">
                    <tr runat="server" id="itemPlaceholder" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <%#Eval("ID") %>
                    </td>
                    <td>
                        <asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' />
                    </td>
                    <td>
                        <asp:Label ID="xLabel" runat="server" Text='<%# Eval("age") %>' />
                    </td>
                </tr>
            </ItemTemplate>
            <InsertItemTemplate>
                <tr style="">
                    <td>
                        <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
                        <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
                    </td>
                    <td>
                        <asp:TextBox ID="IDTextBox" runat="server" />
                    </td>
                    <td>
                        <asp:TextBox ID="NameTextBox" runat="server" />
                    </td>
                    <td>
                        <asp:TextBox ID="AgeTextBox" runat="server" />
                    </td>
                </tr>
            </InsertItemTemplate>
        </asp:ListView>
        <asp:Button ID="Button1" runat="server" Text="插入" OnClick="Button1_Click" />

 

后台代码

 

后台代码
public partial class Default3 : System.Web.UI.Page
{
    DataAccess da;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session["da"] == null)
        {
            da = new DataAccess();
            Session["da"] = da;
        }
        else
        {
            da = Session["da"] as DataAccess;
        }
        if (!IsPostBack)
        {
            Bind();
        }
    }

    private void Bind()
    {
        ListView1.DataSource = da.List;
        ListView1.DataBind();
    }

    protected void ListView1_ItemInserting(object sender, ListViewInsertEventArgs e)
    {
        int id = Convert.ToInt32(((TextBox)e.Item.FindControl("IDTextBox")).Text);
        string name= ((TextBox)e.Item.FindControl("NameTextBox")).Text;
        int age = Convert.ToInt32(((TextBox)e.Item.FindControl("AgeTextBox")).Text);
        Data.Employee employee = new Data.Employee { ID = id, Name = name, Age = age };
        ListView1.InsertItemPosition = InsertItemPosition.None;
        da.List.Add(employee);
        Bind();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        ListView1.InsertItemPosition = InsertItemPosition.LastItem;
        Bind();
    }
    protected void ListView1_ItemCanceling(object sender, ListViewCancelEventArgs e)
    {
        ListView1.InsertItemPosition = InsertItemPosition.None;
        Bind();
    }
}