如何使用动态控件创建可编辑的GridView

Question

如何使用动态控件创建可编辑的网格视图。下图提供了一个想法。

在页面加载时，将显示一个gridview，其中只有一行而不是标题。该行包含两个下拉列表，两个文本框和一个图像按钮。一旦我在第一行输入数据，然后按图像按钮，将创建一个包含这些控件的新行，依此类推。

这怎么可能？

Answer 1

Gridview默认情况下不提供处理Insert操作的简单方法。 您将不得不执行几个步骤来处理这个问题。

首先，每个gridview列必须转换为TemplateColumn（TemplateField）。然后在页脚模板中，您必须插入控件（下拉列表，文本框等）

<asp:TemplateField HeaderText="Item Category">
    <%--Define item template--%>
    <FooterTemplate>    
      <asp:DropDownList ID="dropDownListCategory" runat="server"></asp:DropDownList>
    </FooterTemplate>
</asp:TemplateField>
...... similarly other footer templates

您必须为ImageButton添加onclick事件。

protected void imageButtonInsert_Click(object sender, EventArgs e)
{
    //Get the gridview row
    GridViewRow row = (sender as Control).NamingContainer as GridViewRow;
    DropDownList dropDownListCategory = row.FindControl("dropDownListCategory") as DropDownList;
    ///Similarly you can access the other controls here

    //If you are using SqlDataSource then you can add/assign these values to the insert parameters
    //Note that, you need to have insertcommand defined for the sql data source with appropreate parameters
    SqlDataSource1.InsertParameters.Add("category", dropDownListCategory.SelectedValue);
    //Similarly assign the other parameter values

    //Call the insert method of the sql data source.
    SqlDataSource1.Insert();

    //If you are not using data source approach, here you can insert the data to 
    // database by calling sql command or other ways


    //Rebind the gridview.
    GridView1.DataBind();

}

当您在gridview中显示一些行时，这应该可以。

大问题：空行

如果gridview中至少有一行，则上述方法有效。但是如果你没有任何行，那是第一次，gridview将是空的。如果gridview数据源为空，则它不显示任何内容，甚至页眉，页脚，行等。 作为初始解决方法，首先需要使标题始终可见

ShowHeaderWhenEmpty="true"  ShowFooter="true"

这可确保您始终拥有标头。 现在页脚根本不会显示，除非并且直到gridview中有一些行。 作为解决方法，您可以使用gridview的EmptyDataTemplate。

在这里，你需要再次添加所有控件，下拉列表，文本框等。不是你必须在这里使用相同的布局。您可以使用相同的控件ID，这样您就不需要再次编写代码隐藏了

<EmptyDataTemplate>
    <tr>
        <td><asp:DropDownList ID="dropDownListCategory" runat="server"></asp:DropDownList></td>
        <td><asp:Button runat="server" CommandName="Insert"  ID="buttonInsert" OnClick="imageButtonInsert_Click" Text="Insert" /></td>
        <%--Other controls go here--%>
    </tr>
</EmptyDataTemplate>

这对于第一次和连续加载都是好的。

您可能遇到的下一个问题是如何绑定这些下拉列表。为此，您需要使用RowCreated事件，您可以在其中访问下拉列表并填充它们

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Footer || e.Row.RowType == DataControlRowType.EmptyDataRow)
    {
        DropDownList dropDownListCategory = e.Row.FindControl("dropDownListCategory") as DropDownList;
        //similarly access the other controls and bind them
    }
}

Answer 2

对于此操作，可以在客户端使用Dynamic表。您可以在其中动态创建整个表，还可以应用看起来像网格视图的样式。对于样式使用可以使用JQuery DataTables来提供更多的控件。

通过使用JQuery DataTables或JQuery Code，您还可以在客户端动态添加行。