ASP.NET Invalid Postback or callback argument on “asp:button” click with JQuery POST

Question

I am learning how to use ajax with asp.NET and jQuery , and am trying to simulate a simple file editor in browser. So far I have a list of files being loaded using ajax and jQuery through WebMethods. When I try to duplicate that functionality for a button click in order to load the file, I get an exception for an invalid postback. I have tried numerous methods of linking the jQuery to the button and debugging the incoming values but it is getting late and I simply cannot seem to find the problem D:

My View:

<form id="textform" runat="server">
<div>
    <asp:DropDownList ID="ddlSelectFile" runat="server">
        <asp:ListItem Text="Select a file..." Value="" />
    </asp:DropDownList>
    <asp:Button ID="btnLoadFile" runat="server" Text="Load File" />
    <asp:Button ID="btnSaveFile" runat="server" Text="Save File" />
    <br />
    <asp:TextBox ID="txtFileEditor" runat="server" TextMode="MultiLine" Width="100%" Height="100%" />
</div>
</form>

Codebehind:

public partial class WebEditor : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static List<string> GetFileList()
    {
        string path = HostingEnvironment.ApplicationPhysicalPath + "\\Files";
        List<string> files = new List<string>();

        foreach(string filePath in Directory.GetFiles(path))
        {
            string fileName = Path.GetFileName(filePath);
            files.Add(fileName);
        }

        return files;
    }

    [WebMethod]
    public static string LoadFileContents(string fileName)
    {
        string fileContents = string.Empty;
        string path = HostingEnvironment.ApplicationPhysicalPath + "\\Files\\" + fileName;

        if (File.Exists(path))
        {
            fileContents = File.ReadAllText(path);
        }

        return fileContents;
    }
}

FileEditor.js:

$(document).ready(function () {
$("#btnLoadFile").on('click', LoadFile);

$.ajax({
    type: "POST",
    url: "WebEditor.aspx/GetFileList",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnFileListReceived,
    failure: function (response) {
        alert(response.d);
    },
    error: function (response) {
        alert(response.d);
    }
});

function OnFileListReceived(response) {
    var files = response.d;
    var fileList = $("#ddlSelectFile");

    $(files).each(function (val, text) {
        fileList.append($('<option></option>').val(text).html(text));
    });
}

});


function LoadFile() {
var selectedFile = $("#ddlSelectFile").val();
$.ajax({
    type: "POST",
    url: "WebEditor.aspx/GetFileList",
    data: JSON.stringify({ selectedFile: selectedFile }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnFileContentsReceived,
    failure: function (response) {
        alert(response.d);
    },
    error: function (response) {
        alert(response.d);
    }
});
}


function OnFileContentsReceived(response) {
    var fileContents = response.d;
}

The exception message that is thrown:

[ArgumentException: Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> 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.]
   System.Web.UI.ClientScriptManager.ValidateEvent(String uniqueId, String argument) +9748914
   System.Web.UI.Control.ValidateEvent(String uniqueID, String eventArgument) +108
   System.Web.UI.WebControls.DropDownList.LoadPostData(String postDataKey, NameValueCollection postCollection) +64
   System.Web.UI.WebControls.DropDownList.System.Web.UI.IPostBackDataHandler.LoadPostData(String postDataKey, NameValueCollection postCollection) +18
   System.Web.UI.Page.ProcessPostData(NameValueCollection postData, Boolean fBeforeLoad) +457
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1833

Any advice/fixes to this problem would be wonderful.

Answer 1

Update : As per your comment, I have investigated this further and can see 3 issues totally as listed down below.

Once all the 3 issues fixed, I can check this working in the sample app I created.

So I hope this should work for you as well 100%.

Issue 1 :

In your LoadFile function, I assume you should call LoadFileContents but you are calling GetFileList with a parameter data: JSON.stringify({ selectedFile: selectedFile }) which shouldn't have any parameter defined in the code behind web method.

So you can change this to WebEditor.aspx/LoadFileContents as below.

$.ajax({
        type: "POST",
        url: "WebEditor.aspx/LoadFileContents"
        ....
});

Issue 2 :

As the WebMethod has a parameter name as fileName at public static string LoadFileContents(string fileName) , the parameter name below should be same as this like,

data: JSON.stringify({ fileName: selectedFile })

Issue 3 :

And finally, when the button <asp:Button renders on client side, it renders as "submit" button type="submit" and hence this is invoking a form submit which again ends with the above mentioned error. So to prevent this form submitting, you can add the below line,

function LoadFile(e) {
   e.preventDefault();
   ....
}

Hence, your final function becomes as below,

   function LoadFile(e) {
        e.preventDefault();
        var selectedFile = $("#ddlSelectFile").val();
        $.ajax({
            type: "POST",
            url: "WebEditor.aspx/LoadFileContents",
            data: JSON.stringify({ fileName: selectedFile }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnFileContentsReceived,
            failure: function (response) {
                alert(response.d);
            },
            error: function (response) {
                alert(response.d);
            }
        });
    }

And I render the file content in the textbox with below code,

    function OnFileContentsReceived(response) {
        var fileContents = response.d;
        $("#txtFileEditor").val(fileContents);
    } 

Answer 2

Within your LoadFileContents Webmethod try the !Page.IsPostback solution ( http://net-informations.com/faq/asp/ispostback.htm ) :

[WebMethod]
public static string LoadFileContents(string fileName)
{
    if (!Page.IsPostBack)
    {
       string fileContents = string.Empty;
       string path = HostingEnvironment.ApplicationPhysicalPath + "\\Files\\" + fileName;

       if (File.Exists(path))
       {
          fileContents = File.ReadAllText(path);
       }
       return fileContents;
    }
}