CODEWITHSUNDEEP
c#asp.net-mvc
Samra
Samra

Reputation: 2013

asp.net mvc -view displaying real-time progress status

I want to display progress on my screen/page/view just as happens in console. So when i click install button, my "textarea" control should start displaying progress like

connecting to database connection successful running script a.sql running script b.sql operation complete connection closed

  1. Is textarea the correct control for this purpose?
  2. it Seems like there will be too many trips from server to the client just to write the progress on screen how can i minimize it?

Upvotes: 0

Views: 1825

Answers (2)

Muhammad Soliman
Muhammad Soliman

Reputation: 23876

To be able to do this easily, you can use SignalR which simplify all the hassle of which underlying technology to be used based on the version of the browser it will choose the best communication protocol (WebSocket, LongPolling..etc).

Behind SignalR, one of the underlying used technologies is websockets, it doesn't send anything except keep an open full duplex channels between server and client, in case any update in the server it will push this update to the client. most popular sites use websockets for keeping open channels between server and client.

SignalR uses actually websockets however it will downgrade to use long polling for example in case of old browsers that don't support websocket's connection upgrades.

You have the option to use the websockets directly in case you are assured your clients use new browsers.

One last thing Stackoverflow as a big and heavy loaded site uses websockets to update once there is a new answer or comment for example.

Upvotes: 2

caesay
caesay

Reputation: 17233

The general approach for this is just sending an ajax request every second or so and asking for an update from the server.

<div>
    <pre id="status">
    </pre>
</div>

setInterval(function () {
    $.ajax("/getUpdate?someParam=1234").then(function (result) {
        // result is whatever JSON object you send from the server
        $("#status").innerText = result.someProp;
    });
}, 1000);

It might look something like the above. Note that it's doing a request every second and storing the message from the server in the pre element.

Upvotes: 1

Related Questions