Invalid postback or callback argument - Button OnClick

Question

I have seen many posts about this error on an aspx web form page.

Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

My issue seems to be a little different. All of the posts I have read seem to be related to grid views, drop down lists, and other controls loading outside of Page_Load event.

In this case, I get this error with a simple Button click:

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

Button1_Click just calls a simple method.

Now, in this Codebehind file, I do have 2 WebMethods that load a dropdown list from another drop down list value in jQuery Ajax. Could the fact that I have WebMethods exposed be the issue with the error?

All of the Click events on the page are now blocked.

Here is the jQuery and WebMethod code.

<script type="text/javascript">

    $("#<%= ddlJobNumber.ClientID %>").change(function (e) {

        var jobNumber = $(this).val();
        FillPhaseCode(jobNumber);
        SetDescription(jobNumber);
    });

    function FillPhaseCode(jobNumber)
    {

        $.ajax({
            type: "POST",
            <%--//url: '<% ResolveUrl("~/Pages/JobTimecard.aspx/FillPhaseCode"); %>',--%>
            url: "JobTimecard.aspx/FillPhaseCode",
            contentType: "application/json; charset=utf-8",
            data: '{"jobNumber":"' + jobNumber + '"}',
            dataType: "json",
            success: function (result) {
                $("#<%= ddlPhaseCode.ClientID %>").empty();

                $.each(result.d, function (key, value) {
                    $("#<%= ddlPhaseCode.ClientID %>").append("option value='0'>Select</option>");
                    $("#<%= ddlPhaseCode.ClientID %>").append($("<option></option>").val(value.PhaseCode).html(value.PhaseDesc));

                });

            },
            error: function ajaxError(result) {
                alert("Error result: " + result.status);
            }
        });
    }

    function SetDescription(jobNumber)
    {
        $.ajax({
            type: "POST",
            url: "JobTimecard.aspx/SetJobDescription",
            contentType: "application/json; charset=utf-8",
            data: '{"jobNumber":"' + jobNumber + '"}',
            dataType: "json",
            success: function (result) {
                $("#<%= lblJobName.ClientID %>").text(result.d);
            },
            error: function ajaxError(result) {
                alert("Error result: " + result.status);
            }
        });
    }

</script>

public class PhaseCodes
    {
        public string PhaseCode { get; set; }
        public string PhaseDesc { get; set; }
    }

    [WebMethod]
    public static List<PhaseCodes> FillPhaseCode(string jobNumber)
    {

        SpectrumSim clsSpectrum = new SpectrumSim();
        DataTable dt = new DataTable();
        dt = clsSpectrum.GetPhaseCodes(jobNumber, "1");
        List<PhaseCodes> list = new List<PhaseCodes>();
        foreach (DataRow dr in dt.Rows)
            list.Add(new PhaseCodes
            {
                PhaseCode = dr["Phase_Code"].ToString(),
                PhaseDesc = dr["Description"].ToString()
            });
        return list;
    }

    [WebMethod]
    public static string SetJobDescription(string jobNumber)
    {
        DataTable dt = new DataTable();
        SpectrumSim clsSpectrum = new SpectrumSim();
        dt = clsSpectrum.GetJobNumbers();
        var dataRow = dt.AsEnumerable().Where(x => x.Field<string>("Job_Number") == jobNumber).FirstOrDefault();
        string description = dataRow["Job_Description"].ToString();
        return description;
    }

I hope it is that simple, but I can't find the issue.

EDIT: here is my Page Load event

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            FillJobNumberDropdown();
            if (TimeId != 0)
            {
                LoadTimecard();
            }
        }
    }

Answer 1

To solve this problem in a Web Forms scenario, I just ended up using an UpdatePanel to build the cascade dropdownlist. The HTML control will work too, but I did not want a mix of controls.

Answer 2

I'm guessing that on PostBack Web Forms is detecting a value in the server-side DropDownList that it doesn't recognise as a valid option because you are adding options to it client-side.

Does the DropDownList(s) that is being changed client-side need to be server-side controls?

If so, you will need to populate it with the same options on PostBack before Page_Load (eg. Page_Init) so it can recognise the selected option.

Alternately, change to a non-server-side HTML control instead and use Request.Form to get the selected value.