why the form posted values are not those submitted by users?

Question

I use Asp.net web forms. I have a form with a table and a combo box. The table changes as the selected item of the combo box changes. The combo box is an asp.net control and I set autopostback = true. The table is also an asp.net control, and all table cells are created/rendered in the server side.

Users will input values in the table and submit it to the server.

The problem I find is that when a user changes the selected item of the combo box, the table changes and the web page rendered correctly. Then the user inputs some values and clicks submit. From the server side, the value I get is the default values of the table, not the user inputs. If the user submits again, the server side can get the user inputs.

Here is the code I write to reproduce this issue. I create a default web form project, add a new web from which inherits the site master. To reproduce, take following steps: 1. select one radio button 2. submit and you will see a text about your selection at the top of the page. 3. change the combo box selection 4. select another radio button 5. submit and you will find the bug. 6. redo 4 and 5, you will find the text correct.

 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="PostBackUsingMasterPage.aspx.cs" Inherits="WebFormBug.PostBackUsingMasterPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">

    <asp:DropDownList ID="comboBox" runat="server" AutoPostBack="true" OnSelectedIndexChanged="UpdateTable">
                <asp:ListItem>Apple</asp:ListItem>
                <asp:ListItem>Beet</asp:ListItem>
                <asp:ListItem>Citron</asp:ListItem>

    </asp:DropDownList>
    <asp:Label ID="userInput" runat="server"></asp:Label>
    <asp:Table runat="server" ID="testTable"> </asp:table>
    <asp:Button ID="submit" runat="server" Text="Submit for validation" OnClick="SubmitButton_Click" />
</asp:Content>

The aspx.cs is like this

using System;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace WebFormBug
{
    public partial class PostBackUsingMasterPage : Page
    {
        private string _scope; 
        protected void Page_Load(object sender, EventArgs e)
        {
            _scope = comboBox.SelectedValue ?? "Apple";
            PopUpTable(_scope);
        }

        private void PopUpTable(string item)
        {
            testTable.Rows.Clear();
            var row = new TableRow();
            row.Cells.Add(new TableCell {Text = item});
            row.Cells.Add(AddRadioButtons(item));
            testTable.Rows.Add(row);
        }

        private TableCell AddRadioButtons(string name)
        {
            var cell = new TableCell();
            var radioButtons = new HtmlInputRadioButton[5];
            for (var i = 0; i < 3; i++)
            {

                radioButtons[i] = new HtmlInputRadioButton { Name = name, Value = name + " " + i };

                cell.Controls.Add(radioButtons[i]);
                var label = new Label { Text = name + " " + i };
                cell.Controls.Add(label);
            }
            return cell;
        }

        protected void UpdateTable(object sender, EventArgs e)
        {
            PopUpTable(comboBox.SelectedValue);
        }

        protected void SubmitButton_Click(object sender, EventArgs e)
        {
            int valueIndex = 1;
            for (int i = 0; i < testTable.Rows.Count; i++)
            {
                var row = testTable.Rows[i];
                string inputValue = null, inputName = null;
                foreach (var ctrl in row.Cells[valueIndex].Controls)
                {
                    if (ctrl is HtmlInputRadioButton)
                    {
                        var radioInput = (HtmlInputRadioButton) ctrl;
                        if (!radioInput.Checked) continue;
                        inputValue = radioInput.Value;
                        inputName = radioInput.Name;
                        break;
                    }
                }
                if (inputName != null && inputValue != null)
                {
                    userInput.Text = inputName + " " + inputValue;
                }
            }

        }
    }
}

Answer 1

Preparation knowledge of ASP.NET WebForm: dynamically added table data is missing from form post asp.net table adding rows dynamically don't remain after postback. Your sample is the case - you are composing table data dynamically.

Solution for posting back dynamic table data is to re-create the form data in each post back in (and should ONLY in) page Load method. and your sample is doing this (the PopUpTable method is always called in Page_Load).

However, in your code Page_Load is not the only place doing table re-creation, but also in OnSelectedIndexChanged which results in cleaning your table data. Actually, you don't need register this event.

So, solution (sorry for attaching the code as image, but I found attaching large segment of code is very hard to format):

1. Remove OnSelectedIndexChanged
2. Change code behind as below:

Answer 2

I'm assuming you have updatepanel with which the change of the selected index on the dropdown updates the radiobuttons. You could try changing the eventhandler for the dropdown to

protected void UpdateTable(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        PopUpTable(comboBox.SelectedValue);
    }
}

Answer 3

Try this:
in page load:

if(!IsPostBack)
{
    // set data to table
}