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

本文关键字：文件 调用 aspx ascx 何使用 json ajax | 更新日期: 2023-09-27 18:14:52

我目前正试图建立一个相当大的网站，使用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 
    }
}

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

我认为你的url应该是

PollGrafiek.aspx/GetChart

您正在以字符串形式发送数据

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

但是你很可能想要

data: { pollID: $("getPollID") }
相关文章：