从 aspx 页面调用代码隐藏方法的 AJAX 代码不起作用答案

【问题标题】：AJAX code for calling code-behind method from aspx page doesn't work从 aspx 页面调用代码隐藏方法的 AJAX 代码不起作用
【发布时间】：2013-09-04 12:04:43
【问题描述】：

点击锚链接后，我想调用一个代码隐藏函数（它将一些 HTML 内容代码加载到页面中）。

代码隐藏：

public void loadNewPage(string id)
    {
        ltlContent.Text = getPageCenter(id);
    }

JS代码：

$('a').click(function (e) {
            e.preventDefault();
            var data = { userName: $(this).attr("id") };
            var dataVal = JSON.stringify(data);

            $.ajax({
                type: "POST",
                url: "Default.aspx/loadNewPage()",
                contentType: "application/json; charset=utf-8",
                data: dataVal,
                dataType: "json",
                success: function (id) {
                }
            });
        });

HTML：

<a href="#" id="kontakt">Go to Kontakt</a>

我得到的只是#被添加到URL的后面并且没有调用代码隐藏函数。

【问题讨论】：

你的 dataValconsist of {'username':idvalue} 和你的方法需要一个参数 id，此外，从 url:"Default.aspx/loadNewPage()" 中删除 ()
将您的密钥也包含在数据中的引号中，即 var data ={'id':value}
我认为您的代码隐藏可能是错误的。您无法通过 Web 服务调用访问页面上的控件。即ltlContent 将无法访问
@zgood - 那么你对将 HTML 代码从字符串注入页面有什么建议？

标签： javascript jquery asp.net ajax

【解决方案1】：

试试这个：

在你的锚中这样做：

<a href="javascript:void(0)" id="kontakt">Go to Kontakt</a>

并将您的 ajax 脚本修改为：

$('a').click(function (e) {

     var data = { 'id': $(this).attr("id") };
     var dataVal = JSON.stringify(data);

     $.ajax({
            type: "POST",
            url: "Default.aspx/loadNewPage",
            contentType: "application/json; charset=utf-8",
            data: dataVal,
            dataType: "json",
            success: function (id) {
      }
   });
});

【讨论】：

我之前尝试过href="javascript:void(0)" 的方式，但没有成功。 Ofc，我没有添加#，但该函数仍然没有被调用。即使我将username 固定为id，仍然没有效果。
尝试调试你的脚本，使用 chrome debugger(f12) 或 firebug，看看有什么错误
Uncaught TypeError: Cannot call method 'getElementsByTagName' of null 是我得到的。我读到的是当脚本在头部时，它会在元素之前加载，然后它们就无法访问了。你有什么建议？
看，这个错误仅仅意味着，无论你试图找到什么标签，都不可用，要么标签名称错误，要么 dom 尚未构建。尝试将整个 js 脚本包装在 $(document).ready(function(){ //here your code}); 中或将整个代码放在 body 的末尾
仍然不成功。（两件事都做了）。

【解决方案2】：

试试这个：

JavaScript：

$(document).ready(function(){

    $('a').click(function (e) {
         e.preventDefault();
         var data = { 'id': $(this).attr("id") };
         var dataVal = JSON.stringify(data);

         $.ajax({
                type: "POST",
                url: "Default.aspx/loadNewPage",
                contentType: "application/json; charset=utf-8",
                data: dataVal,
                dataType: "json",
                success: function (data) {
                    var htmlStr = data.d;
                    $('#ltlContent').html(htmlStr);
                }
         });
    });
});

C# 代码隐藏：

using System.Web.Services;

[WebMethod()]
public static string loadNewPage(string id) {
       string result = getPageCenter(id);
       return result;
}

如果一切正常，那么只需在 jquery ajax 调用成功的任何地方注入 html 字符串

【讨论】：

是否可以使代码隐藏方法非静态？会这样吗？ “在成功的ajax调用中将html字符串放在任何我想要的地方”是什么意思？不是alert(data.d)吗？
至于非静态方法，简短回答：否。长回答：Read this。在 WebMethod 调用返回时，会返回一个 json 字符串，并且 jQuery 会自动将其解析为一个对象 - 在这种情况下为 data。你可以console.log(data)查看它包含的内容。 data.d 是来自您的 getPageCenter(id) 的有效负载，我假设它是您尝试加载的页面的 html 字符串（我可能在这里错了）。因此，您需要将其加载到您的ltlContent 控件中，就像这样-$('#ltlContent').html(data.d);
另外，如果您的 ltlContent 控件是 <asp:Literal /> 控件，您可能必须将其更改为 <asp:PlaceHolder /> 之类的东西，因为文字控件不会呈现您可以注入的 html，而是呈现占位符控件渲染 div，您可以将 html 注入其中。 Referance