JSON AJAX returning page HTML instead of method value

meckeard

New member
Joined
Jun 30, 2021
Messages
1
Programming Experience
10+
Hi all,

I'm trying to make a simple call from an asp.net form using json & ajax to a method in the code-behind page but it's returning that page html instead of the value from the method.

Here is the method in the code-behind:
C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Services;

namespace Tags
{
    public partial class AJAX3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        [WebMethod]
        public static string CalculateSum(Int32 Num1, Int32 Num2)
        {
            Int32 Result = Num1 + Num2;
            return Result.ToString();
        }
    }
}
Here is my web form:
C#:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AJAX3.aspx.cs" Inherits="Tags.AJAX3" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Call asp.net server side page methods using jQuery AJAX & json</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnCalculate").click(function () {
                //Get values from textboxes that will be passed to function
                var num1 = $('#txtFirstNumber').val();
                var num2 = $('#txtSecondNumber').val();

                $.ajax({
                    type: "POST",
                    dataType: "text",
                    contentType: "application/json; charset=utf-8",
                    //Url is the path of our web method (Page name/function name)
                    url: "AJAX3/CalculateSum",
                    //Pass values to parameters. If function have no parameters, then we need to use data: "{ }",
                    data: "{'Num1':'" + num1 + "', 'Num2':'" + num2 + "'}",
                    //called on ajax call success       
                    success: function (result) {    
                        $('#dvMsg').text("Sum of " + num1 + " and " + num2 + " = " + result);

                    },
                    //called on ajax call failure
                    error: function (xhr, textStatus, error) {                      
                        $('#dvMsg').text("Error:" + error + ", xhr: " + xhr + ", textStatus: " + textStatus);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Enter First Number:</td>
                    <td>
                        <asp:TextBox ID="txtFirstNumber" runat="server" Text="22" /></td>
                </tr>
                <tr>
                    <td>Enter Second Number:</td>
                    <td>
                        <asp:TextBox ID="txtSecondNumber" runat="server" Text="33" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:Button ID="btnCalculate" Text="Calculate" runat="server" OnClientClick="return false;" />
                        <div id="dvMsg"></div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
My goal is to return a string and not a JSON object.

What am I doing wrong?

Thanks!
 
Last edited by a moderator:
Top Bottom