如何使用 json/ajax 在 .ascx 文件中调用 .aspx 文件答案

【问题标题】：how to call a .aspx file in a .ascx file with json/ajax如何使用 json/ajax 在 .ascx 文件中调用 .aspx 文件
【发布时间】：2014-07-25 09:49:37
【问题描述】：

我目前正在尝试构建一个相当大的网站，使用 ASP.net，结合 vb.net 或 C#。目前我正在做一些工作，用户按下按钮并出现一些特殊文本（这样描述以使这个解释相对简单）。我想使用 ajax/json 调用一个 .aspx 文件，以显示在网站上的一个小块中。 .aspx 文件将有一个生成输出的自己的方法，所以我只需要 .ascx 文件调用 aspx 文件，也许指定该方法并传递一个参数。

我将在下面发布我的代码，有人可以看看吗？如果我忘记了重要的事情或不清楚的事情，请告诉我。不过我不是这方面的专家

PollDetail.ascx

<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/chart.js/0.2/Chart.js" type="text/javascript"></script>
<div runat="server" id="form1">
    <script type="text/javascript">
        $(function () {
            LoadChart();
            $("[id*=ddlCountries]").bind("change", function () {
                LoadChart();
            });
        });
        function LoadChart() {
            var chartType = parseInt($("[id*=rblChartType] input:checked").val());
            $.ajax({
                type: "POST",
                url: "PollGrafiek.aspx/GetChart", //PollDetail.ascx/GetChart
                data: "{pollID: '" + $("getPollID") + "'}", //+ $("[id*=ddlCountries]").val() +
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("#dvChart").html("");
                    $("#dvLegend").html("");
                    var data = eval(r.d);
                    var el = document.createElement('canvas');
                    $("#dvChart")[0].appendChild(el);

                    //Fix for IE 8
                    if ($.browser.msie && $.browser.version == "8.0") {
                        G_vmlCanvasManager.initElement(el);
                    }
                    var ctx = el.getContext('2d');
                    var userStrengthsChart = new Chart(ctx).Pie(data);

                    for (var i = 0; i < data.length; i++) {
                        var div = $("<div />");
                        div.css("margin-bottom", "10px");
                        div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + data[i].color + "'></span> " + data[i].text);
                        $("#dvLegend").append(div);
                    }
                },
                failure: function (response) {
                    alert('There was an error.');
                }
            });
        }
    </script>
</div>

PollGrafiek.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PollGrafiek.aspx.cs" Inherits="PollGrafiek" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
    <script src="//cdn.jsdelivr.net/chart.js/0.2/Chart.js" type="text/javascript"></script>
    <div runat="server" id="form1">
        <script type="text/javascript">
        </script>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Country:
                    <asp:DropDownList ID="ddlCountries" runat="server">
                        <asp:ListItem Text="USA" Value="USA" />
                        <asp:ListItem Text="Brazil" Value="Brazil" />
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="dvChart">
                    </div>
                </td>
                <td>
                    <div id="dvLegend">
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

PollGrafiek.aspx.cs

public partial class PollGrafiek : System.Web.UI.Page
{

    [WebMethod]
    public static string GetChart(int pollID)
    {
        return the output for the 
    }
}

【问题讨论】：

你得到什么错误，你的 url 应该是 url: "PollGrafiek.aspx/GetChart",
还没有错误，只是还没有显示任何内容。对了，很好的电话，错过了那个
请检查您的网络选项卡以查看请求是否已发送并检查其标头
我检查了网络选项卡并单击了按钮（之后应该显示信息），但我没有看到任何 .aspx 文件。我很确定它没有被正确调用。
您在 PollGrafiek.aspx 页面的哪里添加了“PollDetail.ascx”？

标签： c# jquery asp.net ajax json

【解决方案1】：

我相信你的网址应该是

PollGrafiek.aspx/GetChart

希望这会有所帮助...

【讨论】：

是的，已经改了，但还是不行。没有错误，但也没有任何显示。我怀疑 ajax 功能还不够完善
@I_Am_Not_user3185054 你是否在你的方法中设置了断点并确保它返回值
对，我倾向于忘记这一点。我刚试了一下，系统没有进入'getChart'方法。

【解决方案2】：

您将数据作为字符串发送

data: "{pollID: '" + $("getPollID") + "'}"

但你很可能想要

data: { pollID: $("getPollID") }

【讨论】：

嗯，这是可能的。 PollId 本身是该方法在 .aspx 文件中需要的一个 int 参数，尽管它无法在那边访问它，这就是它是一个参数的原因。 GetPollID 是 .ascx 中提供该参数的方法。我会试试的。