如何在由ASP.NET中的列表填充的gridview中添加頁腳行

Question

我需要使用列表填充GridView ，並且要添加頁腳行，以便用戶可以添加新行。

這就是我的前端外觀。

   <asp:GridView ID="GridView1" AllowPaging="true"  ShowFooter="true" PageSize="5" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowEditing="GridView1_RowEditing"
        runat="server"  CellPadding="3"  GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
         OnRowCancelingEdit="GridView1_RowCancelingEdit">
        <Columns>            
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ImageUrl="~/Images/edit.png" runat="server" CommandName="Edit" ToolTip="Edit" Width="20px" Height="20px"/>
                        <asp:ImageButton ImageUrl="~/Images/delete.png" runat="server" CommandName="Delete" ToolTip="Delete" Width="20px" Height="20px"/>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:ImageButton ImageUrl="~/Images/save.png" runat="server" CommandName="Update" ToolTip="Update" Width="20px" Height="20px"/>
                        <asp:ImageButton ImageUrl="~/Images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px"/>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:ImageButton ImageUrl="~/Images/addnew.png" runat="server" CommandName="AddNew" ToolTip="Add New" Width="20px" Height="20px"/>
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
   </asp:GridView>  

這就是我填充GridView 。

    protected List<Emp> GetEmpList()
    {
        List<Emp> lEmp = new List<Emp>();
        Emp oemp = new Emp(1234, "Upendra", "Noida");
        lEmp.Add(oemp);
        oemp = new Emp(1934, "Rahul", "Noida");
        lEmp.Add(oemp);
        //.......
        return lEmp;
    }

    protected void BindGridList()
    {
        GridView1.DataSource = GetEmpList();
        GridView1.DataBind();
    }

這是我的網格的圖片。

我的問題是如何添加頁腳行，謝謝您的幫助。

Answer 1

我們需要修改以下內容以在GridView中實現頁腳控件。

1）GridView-更改為AutoGenerateColumns =“ False” 2）使用TemplateField將所有列添加到設計視圖中的Grid 3）描述列的EditItemTemplate，ItemTemplate，FooterTemplate 4）在文件后面的代碼中，使用GridView1.FooterRow.FindControl

樣本ASPX代碼

<asp:GridView ID="GridView1" AllowPaging="True" ShowFooter="True" PageSize="5" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowEditing="GridView1_RowEditing"
                runat="server" CellPadding="3" GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
                OnRowCancelingEdit="GridView1_RowCancelingEdit" AutoGenerateColumns="False">
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/edit.png" runat="server" CommandName="Edit" ToolTip="Edit" Width="20px" Height="20px" />
                            <asp:ImageButton ImageUrl="~/Images/delete.png" runat="server" CommandName="Delete" ToolTip="Delete" Width="20px" Height="20px" />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/save.png" runat="server" CommandName="Update" ToolTip="Update" Width="20px" Height="20px" />
                            <asp:ImageButton ImageUrl="~/Images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px" />
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:ImageButton ImageUrl="~/Images/addnew.png" runat="server" CommandName="AddNew" ToolTip="Add New" Width="20px" Height="20px" OnClick="btnAddNew_Click" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Id">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Id") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Name">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtNameFooter" runat="server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="City">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label3" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                        </ItemTemplate>
                         <FooterTemplate>
                            <asp:TextBox ID="txtCityFooter" runat="server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

代碼后面的示例代碼：

protected void btnAddNew_Click(object sender, EventArgs e)
        {
            TextBox txtName = GridView2.FooterRow.FindControl("txtNameFooter") as TextBox;
            TextBox txtCity = GridView2.FooterRow.FindControl("txtCityFooter") as TextBox;
            cmd.CommandText = $"INSERT INTO tblLocation(Name,City) VALUES('{txtName.Text}','{txtCity.Text}')";
        }