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

Conceal the div element if the value is either undefined or empty in AngularJS

I am experiencing an issue where I get 2 different values when I use console.log($scope.variable). The values shown are undefined and ''. Based on this value, I need to hide a div. Here's what I have tried: <div ng-hide="$scope.variable ...

What is the best way to determine the width of a div within a window that has been rendered using React?

I'm working on a task where I need to determine the size of a div (with CSS width set to 100%) and adjust the zoom factor of a component based on this size. The challenge arises during the initial run of the application when the div has not yet been c ...

I have successfully managed to populate the Google Apps Script listbox based on the previous listbox selection for two options, but unfortunately, I am encountering issues

Struggling to set up 3 list boxes that populate based on each other? At the moment, I have one list box fetching data from a spreadsheet. Could someone assist me in configuring it so that the second list box populates based on the first, and a third list b ...

Utilize modules within the AppModule to promote modularization and maintain separation of concerns in Angular 2

When using templates like those from the ASP.NET Core JavaScript services, typically a single module named AppModule is included. However, in my application, which is divided into two logical areas (AreaA and AreaB), I thought it would be better to use two ...

Is it possible to make a GET request with AJAX that returns an IHttpActionResult?

When utilizing the AJAX function with the GetAll method that yields IQueryable, everything runs smoothly. However, when using the GetOne method, it fails to function correctly and returns "undefined" to the browser. Below is the Get method within the ApiCo ...

What are some ways to showcase information using AJAX?

Hey there! I'm currently facing an issue with AJAX. I need help in extracting data and displaying it as a table in HTML format. The data I have is just dummy, but in reality, it consists of multiple objects, including nested ones. Can someone please a ...

Establish the predefined date for the air-datepicker

I am currently utilizing the air-datepicker inline feature. My objective is to establish the starting date for it. Below is the script detailing my attempt: export function load_datepickers_inline():void { const search_legs_0_datepicker = $("#search_leg ...

Looking to easily move a table that is loaded via Ajax into a tab using drag and drop functionality

In my Index.html file, I have multiple tabs. Some of these tabs contain a table loaded from an .asp file. The table displays correctly on its own, but when placed within a tab, it is not "drag and droppable". To troubleshoot this issue, I created a sample ...

The SWT Browser is failing to display Angular 2 pages within the Eclipse view

I attempted to embed Angular 2 HTML pages within the SWT Browser widget, but it seems that the Angular 2 HTML pages are not displaying correctly inside the SWT Browser. However, I had no trouble embedding Angular 1 (or Angular JS) pages within the SWT bro ...

Intermittent issue with Ajax.ActionLink not triggering POST controller method

Recently, I've been encountering an unusual issue. It all revolves around an Ajax.ActionLink that is utilized for pagination: @Ajax.ActionLink(Model.PaginationText.ToString(), Model.ActionName, Model.RouteValues, new AjaxOptions ...

Is there a way to dynamically modify a website's default viewport settings in a mobile browser?

When viewing a website in Landscape mode, everything looks good. However, switching to Portrait mode displays the message "Screen size not supported." I decided to test this on my desktop browser and discovered that adjusting the initial-scale:1 to initial ...

Create a distinct title for the photo if the current title is already in use within the database

I am currently facing an issue with my database. I have a table where I store the file path name of the folder and the file name of the photo. Everything works fine when I try to display the photos in my GridView. However, the problem arises when I attemp ...

Can you extract information from the XML file and modify the anchor tags?

<description> <div class="field field-name-field-image field-type-image field-label- hidden"><div class="field- items"><div class="field-item even"><a href="/news/news/vg"> ...

Display HTML code within a data attribute

I have a function that modifies an element from OpenLayers. In the official documentation, it mentions that the property label accepts either HTML or a string. methods: { onUpdatePosition (coordinate) { this.deviceCoordinate = coordinat ...

Encountered a JSON error while implementing in an ASP project

Currently, I am working with JavaScript and C# in aspnet. My goal is to pass 3 values from the Asp Page to the code behind, using the Json method. Below is how I achieve this: //initialize x, y and nome var requestParameter = { 'xx': x, 'yy ...

Deactivate the checkboxes with varying attributes

My goal is to disable checkboxes with different warehouse locations once a warehouse is selected. For instance, if I select California, I want all checkboxes from other states to be disabled. This should be based on the whseID attribute, but I am strugglin ...

Ordering tables in jQuery with both ascending and descending options

Trying to sort a table in ascending and descending order using jQuery? Here's the JavaScript code for it. However, encountering an error: Cannot read property 'localeCompare' of undefined If you can provide guidance on how to fix this so ...

Is there a way to automatically submit an upload form once a file has been selected?

Need help with automatically submitting a file upload form when a file is selected. Is there a way to bypass the need for the user to click the Submit button? ...

Disappearing Data: Struts2 Autocompleter's Entries Vanishing Upon Submit Button Click

I am currently utilizing the auto-complete feature from The issue I am facing is that when I type "Ball", the auto-complete suggests "Balloon". Even though both "Balloon" and "Balloon" appear in the text field and the list, when I click elsewhere on the s ...

I tried running the sample program from the website in mongoose, but I encountered a persistent error: "TypeError: fluffy.speak is not a function."

const mongoose = require('mongoose'); main().catch(err => console.log(err)); async function main() { await mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true }); console.log("Connection successfu ...