ASP.NET无需数据库实现双DropDownList选中后点击按钮新增GridView行

问题原因 #

ASP.NET Web Forms为无状态架构，每次点击提交触发页面回发后，原有页面数据都会被重置。你原有代码中每次调用BindGrid方法都会创建全新的空DataTable，仅插入当前选中的1行数据，之前提交的历史数据没有被保留，因此看起来只能添加第一行，后续提交都会覆盖旧数据。
另外原有代码直接将SelectedItem对象赋值给DataRow，会导致GridView列显示System.Web.UI.WebControls.ListItem而非实际的选项文本，也需要同步修复。

修复方案 #

你只需要用ViewState存储历史提交的DataTable数据，每次新增行时先取出历史数据追加新行后再绑定即可，修改后的后台核心代码如下：

using System;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MasalaStore
{
    public partial class Menu2 : System.Web.UI.Page
    {
        // 不需要数据库可以直接删除这行SqlConnection声明，不影响功能
        // SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["mycon"].ToString());
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void SubmitButton_Click(object sender, EventArgs e)
        {
            BindGrid();
        }
        private void BindGrid()
        {
            // 过滤未选择有效选项的提交
            if (DropDownList1.SelectedValue == "0" || DropDownList2.SelectedValue == "0")
            {
                // 可自行添加选项为空的提示逻辑
                return;
            }
            DataTable dt;
            // 从ViewState读取已保存的历史数据
            if (ViewState["MasalaData"] != null)
            {
                dt = (DataTable)ViewState["MasalaData"];
            }
            else
            {
                // 首次提交时初始化表结构
                dt = new DataTable();
                dt.Columns.Add("ITEM", typeof(string));
                dt.Columns.Add("QUANTITY", typeof(string));
                dt.Columns.Add("PRIZE", typeof(string));
            }
            // 新增当前选中的行
            DataRow dtrow = dt.NewRow();
            dtrow["ITEM"] = DropDownList1.SelectedItem.Text;
            dtrow["QUANTITY"] = DropDownList2.SelectedItem.Text;
            dtrow["PRIZE"] = "#";
            dt.Rows.Add(dtrow);
            // 将更新后的数据存回ViewState
            ViewState["MasalaData"] = dt;
            // 绑定GridView
            GridView2.DataSource = dt;
            GridView2.DataBind();
            // 重置下拉框选项
            DropDownList1.ClearSelection();
            DropDownList2.ClearSelection();
        }

        protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            GridView2.PageIndex = e.NewPageIndex;
            this.BindGrid();
        }

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                if ((e.Row.Cells[1].Text).ToUpper() == "OUT OF STOCK")
                {
                    // CHANGE THE COLOR OF THE CELL.
                    e.Row.Cells[1].BackColor = System.Drawing.Color.Crimson;
                    e.Row.Cells[1].ForeColor = System.Drawing.Color.WhiteSmoke;
                }
            }
        }

        protected void ddl_onSelectIndexChanged(object sender, System.EventArgs e)
        {

        }
        // 可选：清空所有已添加行的方法
        protected void ClearBtn_Click(object sender, EventArgs e)
        {
            ViewState["MasalaData"] = null;
            GridView2.DataSource = null;
            GridView2.DataBind();
        }
    }
}

补充说明 #

ViewState的生命周期和当前页面一致，只要不关闭页面或强制刷新浏览器，已添加的行数据都会保留，完全符合你不需要数据库的需求。如果需要跨页面保留数据，可以把ViewState替换为Session即可。

内容的提问来源于stack exchange，提问作者Amit Goswami