Unable to utilize PageMethod (Asynchronous JavaScript and XML in C# .net)

I've been experimenting with the PageMethod feature in asp.net. To start, I added a Script Manager to my aspx page:

 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

Then, I created an onClick method in JavaScript:

   function TestAJAX() {
            PageMethods.TestA( onSucess, onError);

            function onSucess(result) {
                alert('Success!');           
            }

            function onError(result) {
                alert('Oops, something went wrong.');
            }
        }

In the code behind, I implemented the TryA method:

  [WebMethod]
    public static String TryA()
    {
        return "JSON CHECK";

    }

Despite seeing that it enters the 'TryA' method in the debugger, I always receive the message 'something wrong'. What could be causing this issue? Thank you!

Answer №1

Although this may not be the expected solution path, I believe it offers a superior option. Here are my thoughts...

Your button in HTML:

<input type="button" id="myStupidButton" value="Click Me Yo" />

Your JavaScript (I will also incorporate jQuery, but can provide a pure JS alternative if needed):

<script>
$(function(){
   $(document).on('click', '#myStupidButton', function(){
      $.ajax({
        type: "POST",
        url: "Mypage.aspx/TryA",
        success: function(data){
           // Parsing ASP.NET's response
           data = $.parseJson(data);
           // ASP.NET formats JSON as {"d": "yourresponse"}
           alert(data.d);
        }
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Uploading a file using AngularJs

When it comes to uploading an image or file using HTML tag in AngularJS, it seems that the tag is not supported. The solution? Create a custom directive. In my index.html page, I included the following code: <body ng-controller="myController"> ...

Migrate information from an Excel spreadsheet to a SQL Server database

I am facing an issue with transferring data from an Excel sheet to a SQL Server database using an aspx page. When attempting to store the data, I encountered the following error message: The Microsoft Office Access database engine cannot open or wr ...

Attempting to send a formik form to a specified action URL

Seeking assistance with a simple fix as I navigate through the learning process. I have created an action called addTenant() that is supposed to receive the state and use it to dispatch a post API call, like so: export const addTenant = (tenant) => (di ...

I am looking for a way to add some color to the text within a div on my HTML page. Can you help me

Is there a way to apply background color only to the text content within this div, without styling the entire element? ...

Show the id value of the event triggered by eventclick

I am currently attempting to retrieve the id of the event so that I can remove it from the database. My approach involves using eventClick, where a dialog pops up when the user clicks an event prompting them to remove it. In order to proceed with this oper ...

The multi-level navigation bar is not displaying properly

I am currently facing an issue with my Mega menu. It displays two levels of menus perfectly fine, but I need to add a third level as shown in the image below. However, when I try to include the third level, it disrupts the design and causes the Grand Child ...

Issue with webcomponents-lite.js file

Encountering this particular error message in the console while attempting to run the application: webcomponents-lite.js:64Uncaught TypeError: Cannot read property 'getAttribute' of null at webcomponents-lite.js:64 at Object.549 (webcomp ...

After triggering an action, I am eager to make a selection from the store

To accomplish my task, I must first select from the store and verify if there is no data available. If no data is found, I need to dispatch an action and then re-select from the store once again. Here is the code snippet that I am currently using: t ...

Recursive methodology for building DOM tree structure

var div = { element:'div', parent:'body', style: { width:'100px', height:'100px', border:'1px solid black' } child: { element:'input', type:'text', ...

Struggling to create a BMI Calculator using JS, the result is consistently displaying as 'NaN'

Having trouble creating a BMI Calculator using JavaScript. The issue I'm facing is that the calculation always returns 'NaN'. I've tried using parseInt(), parseFloat(), and Number() but couldn't solve the problem. It seems that the ...

Entity Framework does not provide support for persisting byte arrays

Currently, I am working with ASP.NET Core 3.1 and Entity Framework to store byte arrays in a MySQL database. However, I've encountered an issue where Entity Framework does not seem to be functioning as expected. Let's take a look at the model be ...

The ESLint rule "eqeqeq" configuration is deemed incorrect

After successfully running eslint with the provided .eslintrc file, I encountered an issue when making a simple change to use 'standard' instead of 'airbnb-base' as the extend: module.exports = { root: true, parser: 'babel-esl ...

Next.js and Material UI - issues with dynamic styles not functioning

I recently started using Next JS in combination with Material UI, following the example project setup provided in the documentation on Github: https://github.com/mui-org/material-ui/tree/master/examples/nextjs My main objective is to utilize Material UI&a ...

Challenges encountered while trying to combine Vue 3 with Firestore

I am currently in the process of integrating Firebase (and Cloud Firestore) with my Vue 3 app. I have successfully installed the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65030c170007041600255c4b554b57">[email prot ...

Information displays instantly in the initial milliseconds

When developing dynamic web pages with Nuxt, I encountered an issue in the pages directory where a file named _url.vue is located. The contents of this file are as follows: <template lang="pug"> div component( v-for= ...

Get the package from a Lerna-managed monorepository using a git URL

Currently working on a project using yarn. The project has a dependency that is part of a larger monorepo managed by lerna. Despite the subpackage being updated, it has not been published yet and I require access to that unreleased code. Is there a method ...

Transferring a document to a koa-js server using formidable

Looking for some guidance with my attempted file upload process from my Ionic app to a Node.js server using koajs. I'm currently utilizing koa-body and formidable to parse the body. Below is the configuration on my server: this.app.use(formidable()) ...

The GET request on the Express route is malfunctioning, causing the Postman request to time out after getting stuck for some

My Express app seems to be experiencing some issues with the GET route. When making a request using Postman, the response gets stuck for a while before fetching. The GET route is properly set up with all necessary request parsers and the app initialized an ...

The ng-click functionality in the internal template of the directive is not working as expected

The alert is not showing when the inner template of the directive is clicked, even though ng-click has been implemented. You can find the fiddle link for this issue here: http://jsfiddle.net/NNDhX/ ...

Building a custom tooltip for a Bootstrap multiselect dropdown menu

I have been attempting to implement a tooltip on a multiselect dropdown menu that I constructed using the Bootstrap-select jQuery plugin... Here is how I coded my select in the HTML... <select id="dropDownList" class="selectpicker" t ...