Explore the world of HTML event listening through .NET integration

Imagine this scenario: within an HTML page, using an UpdatePanel, you have a loading animated gif spinning while ASP.NET processes data from a webservice.

I'm curious if there's a way to create an Event in .NET code that can be detected on the HTML side, like:

Let's say I'm fetching individual persons' data from a webservice and I want the loading message on the HTML page to update accordingly.

Importing person 1
Importing Person 2
Importing Person 3
All Done!

and done

Is there a clever trick to achieve this?

Currently, my HTML Code has the following:

the HEAD section

<script type="text/JavaScript" language="JavaScript">

    function pageLoad() {

        try {
            var manager = Sys.WebForms.PageRequestManager.getInstance();
            manager.add_endRequest(endRequest);
            manager.add_beginRequest(OnBeginRequest);
            manager
        }
        catch (err) {
        }
    }

    function OnBeginRequest(sender, args) {

        $("#loadingText").html("<img src='_assets/img/animated/parweb_loading.gif' alt='' />&nbsp;" + strLoadingText);
    }

    function endRequest(sender, args) {
    }  

</script>

the BODY section includes:

<asp:UpdateProgress AssociatedUpdatePanelID="pnlAllIn" runat="server" ID="pnlUpdating">
    <ProgressTemplate>
        <div id="loadingText" style="background-color: Red; position: absolute; width: 200px;
            top: 0px; right: 20px; padding: 5px; color: White; text-align: center; vertical-align: middle;
            font-size: 14px;">
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Thank you for any assistance!

Answer №1

Using the AJAX.NET controls from Microsoft makes it easy to work with, although there are some limitations.

For a different approach, you can also check out Michael Schwarz's AJAX.NET library:

  1. Create a method for importing information that logs data to session or another location.

  2. Develop a second method to monitor and display this log while the process is ongoing.

Answer №2

Instead of relying on AJAX, consider initiating the query to the webservice in a dedicated thread. This thread should maintain a variable or reference to monitor the progress from the webservice. Periodically, JavaScript can be used to check the status every 2 seconds and update the HTML content accordingly.

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

Combining two numbers retrieved from Firebase using React

Hello, I am new to React and finding it challenging to perform mathematical calculations with React. I have been attempting to add two values retrieved from a Firebase database, but they keep displaying as strings without adding the actual values together. ...

Wrap it in a ReactJS container tag

Today I encountered a frustrating issue while diving into ReactJS. I'm excited to learn by getting my hands dirty, but unfortunately, I keep running into this error: Adjacent JSX elements must be wrapped in an enclosing tag (47:14) And here's t ...

Is it possible to incorporate variables when updating an array or nested document in a mongodb operation?

Within the "myCollection" target collection, there exists a field named "japanese2". This field is an array or an object that contains another object with a property called "japanese2a", initially set to 0 but subject to change. My goal is to update this p ...

Need to get an item from a collection at the library?

Is it possible to import and use an object from a library? For instance, suppose we have a file named data.js with the following content: return { "name": "Testing" } In the file index.js, could we do something like this: const data = require('. ...

Using jQuery in an external JavaScript file may encounter issues

As a newcomer to jQuery, I decided to try writing my jQuery code in an external js file rather than embedding it directly into the head of the HTML file. Unfortunately, this approach did not work as expected. Here is what my index.html looks like: < ...

Incorporating Javascript jQuery functionalities from an external file

I have encountered an issue when trying to run my index.html file with the control.js file that I outsourced. It seems like they are not working together properly: <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.c ...

Generate a table containing information organized by category

I am looking to create a component Table that groups countries together. Here is my mockup: enter image description here I am struggling to find a solution for this issue. Can someone please assist me? ...

Exploring the world of design with React JS and MUI's diverse styling options

Exploring the various styling options offered by MUI From useTheme, styled, makeStyles to other methods - what sets them apart and how do they differ in use cases? We're looking for a comprehensive breakdown of their unique features, practical appli ...

When downloading text using Angular, the file may not display new line characters correctly when opened in Notepad

When downloading text data as a .txt file in my Angular application using JavaScript code, I encountered an issue. Below is the code snippet: function download_text_as_file(data: string) { var element = document.createElement('a') eleme ...

Reproducing a table row

Here is the table structure I am working with: <table id="customFields" class="table table-bordered table-hover additionalMargin alignment"> <thead> <tr> <th colspan="2"></th> <th>Some Title</ ...

Perform an action upon a successful completion of an AJAX request using Axios by utilizing the `then()` method for chaining

I'd like to trigger a specific action when an ajax call is successful in axios save() { this.isUpdateTask ? this.updateProduct() : this.storeProduct() this.endTask() } When the ajax call to update or store the product succeed ...

Animate a div once the parent section becomes visible while scrolling

I previously had this function working, but it seems that I have somehow messed it up in the process. My current setup includes a scroll hijack feature that navigates users to a new section or card each time they scroll. The script adds a visible class w ...

Is the CSS scale activated by mouseover or click?

My CSS code successfully scales images, but the issue is that it affects every image on the page. I am looking for a solution to apply this CSS only when the user hovers over or clicks on an image. The challenge is that images are added by non-technical w ...

JavaScript: Obtaining a Distinct Identifier for Various Replicated Entries

Imagine we have an object: var db = [ {Id: "201" , Player: "Jon",price: "3.99", loc: "NJ" }, {Id: "202", Player: "Sam",price: "4.22", loc: "PA" }, {Id: "203" ,Player: "Sam",price: "4.22", loc: "NY" }, {Id: "204", Player: ...

Using the codesnippet feature in CKEditor in combination with highlight.js

I am currently experimenting with implementing the highlight.js library in conjunction with the CKEditor addon called CodeSnippet. Although I have successfully integrated the CodeSnippet addon into my CKEditor, the code is not being properly detected, col ...

Reveal the CSRF token to the client located on a separate domain

Utilizing the module https://www.npmjs.com/package/csurf to safeguard my public routes from cross-site request forgery. Due to the server and client being on separate domains, a direct method of passing the generated token to the client is not feasible. I ...

Swapping out a sequence of characters in a web address with a different set

Swapping out imgur for filmot, Enter URL - https://i.stack.imgur.com/Uguvn.jpg Click the submit button After clicking submit, a new tab should open with the link .filmot.com/abcde.jpg. <html> <head> <title>input</title> <sc ...

Encountering a 403 error while trying to deploy a Node.js application on Heroku

Yesterday, I encountered an issue while trying to access a Node.js application on Heroku. The error message from the Chrome console was: Refused to load the image 'https://browser-rpg-app.herokuapp.com/favicon.ico' due to Content Security Policy ...

The React component continuously refreshes whenever the screen is resized or a different tab is opened

I've encountered a bizarre issue on my portfolio site where a diagonal circle is generated every few seconds. The problem arises when I minimize the window or switch tabs, and upon returning, multiple circles populate the screen simultaneously. This b ...

Generate a compressed file from a readable source, insert a new document, and transfer the output

The objective is to obtain an archive from the client, include a file, and transfer it to Cloud Storage without generating a temporary file. Both the client and server utilize the archiver library. The issue with the code snippet provided is that the file ...