ASP.NET无效“asp：button”上的回发或回调参数点击JQuery POST

Question

我正在学习如何在asp.NET和jQuery上使用ajax，并试图在浏览器中模拟简单的文件编辑器。到目前为止，我有一个使用ajax和jQuery通过WebMethods加载的文件列表。当我尝试复制该功能以点击按钮以加载文件时，我得到一个无效回传的例外。我试图链接jQuery到按钮和调试传入值的许多方法，但它已经不早，我似乎根本无法找到问题d：

笔者认为：

<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> 

代码隐藏：

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; 
} 

的excep引发的信息：

[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 

对这个问题的任何建议/修复将是美好的。

Answer 1

更新：根据您的意见，我有这个作为进一步向下跌破上市调查，可以看到3个问题完全。

一旦所有的3个问题固定的，我可以检查我创建示例应用程序这方面的工作。

所以我希望这应该为你工作以及100％。

问题1：

在你LoadFile功能，我想你应该叫LoadFileContents，但你是一个参数data: JSON.stringify({ selectedFile: selectedFile })它不应该在后面的Web方法的代码中定义的任何参数调用GetFileList。

因此，您可以将其更改为WebEditor.aspx/LoadFileContents，如下所示。

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

问题2：

作为WebMethod具有参数的名称作为fileName在public static string LoadFileContents(string fileName)，下面的参数的名称应该是相同的，因为这样，

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

问题3 ：

And f最初，当按钮<asp:Button呈现在客户端时，它呈现为“提交”按钮type="submit"，因此这是调用表单提交，它又以上述错误结束。因此，为了防止这种形式提交，您可以添加以下行，

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

因此，您的最终function变得如下，

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); 
      } 
     }); 
    } 

我呈现在文本文件的内容与下面的代码，

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

Answer 2

在您LoadFileContents WEBMETHOD尝试Page.IsPostback溶液（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; 
    } 
}