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

时间:2014-07-25 09:49:38

标签: c# jquery asp.net ajax json

我目前正在尝试使用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 
    }
}

2 个答案:

答案 0 :(得分:0)

我相信你的网址应该是

PollGrafiek.aspx/GetChart

希望这会有所帮助...

答案 1 :(得分:0)

您将数据作为字符串

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

但你很可能想要

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