I am using ASP.NET MVC 4 application, I need to Display messages in the Client, by sending messages from Controller to Client.
My requirement is user click a button in UI and i will process the files on the server and Display message in UI on end of each foreach file i process. i need to show the File names in the Client Using ASP.NET MVC.
Can any one Help how to show the messages in the Client by calling client method from server on for-each loop each time.
I am able to call the controller and end of each controller I am sending final message to UI, but how to send on each foreach loop iteration?
Try this:
Script method to update progress based on predefined interval you want
Controller:
public class HomeController : Controller
{
private static IDictionary<Guid, int> tasks = new Dictionary<Guid, int>();
public ActionResult Index()
{
return View();
}
public ActionResult Start()
{
var taskId = Guid.NewGuid();
tasks.Add(taskId, 0);
Task.Factory.StartNew(() =>
{
for (var i = 0; i <= 100; i++)
{
tasks[taskId] = i; // update task progress
Thread.Sleep(50); // simulate long running operation
}
tasks.Remove(taskId);
});
return Json(taskId);
}
public ActionResult Progress(Guid id)
{
return Json(tasks.Keys.Contains(id) ? tasks[id] : 100);
}
}
View:
<script type="text/javascript">
function updateMonitor(taskId, status) {
$("#" + taskId).html("Task [" + taskId + "]: " + status);
}
$(function () {
$("#start").click(function (e) {
e.preventDefault();
$.post("Home/Start", {}, function (taskId) {
// Init monitors
$("#monitors").append($("<p id='" + taskId + "'/>"));
updateMonitor(taskId, "Started");
// Periodically update monitors
var intervalId = setInterval(function () {
$.post("Home/Progress", { id: taskId }, function (progress) {
if (progress >= 100) {
updateMonitor(taskId, "Completed");
clearInterval(intervalId);
} else {
updateMonitor(taskId, progress + "%");
}
});
}, 100);
});
});
});
Start new task …
You have to write an ActionResult that progressively write result to the response. so you can show the user some data in every foreach loop iteration. I have written a simple ActionResult that writes a number every 2 seconds:
public class ProgressiveResult : ActionResult
{
public override void ExecuteResult(ControllerContext context)
{
for (int i = 0; i < 20; i++)
{
context.HttpContext.Response.Write(i.ToString());
Thread.Sleep(2000);
context.HttpContext.Response.Flush();
}
context.HttpContext.Response.End();
}
}
and this is an action that returns this result:
public ActionResult LongProcess()
{
return new ProgressiveResult();
}
So you can write an ActionResult and write your foreach code in ExecuteResult method.
UPDATE:
You can make this call with an Ajax request and return result with a simple code like the following code:
var result = "";
function showResult() {
if (result !== oReq.responseText) {
result = oReq.responseText;
console.log(result);
}
}
var oReq = new XMLHttpRequest();
oReq.open("get", "/Home/LongProcess", true);
oReq.send();
setInterval(showResult, 1000);
Related
Sorry for my bad english. The application reads data from the accelerometer of the smartphone. He has a server in which when a smartphone is connected, a pair of id-data about the position in space is created. At the moment, data from all users come to the server. The task is to do the opposite: each time a user connects, a separate space is created that receives data from only one id.
Server code:
var express = require('express');
var compression = require('compression');
var http = require('http');
var path = require('path');
var socketIO = require('socket.io');
const port = process.env.PORT || 5000;
var cors = require('cors');
var app = express();
var server = http.Server(app);
var io = socketIO(server);
app.use(cors()) ;// Use this after the variable declaration
app.set('port', port);
app.use(compression());
app.use(express.static(__dirname + '/'));
app.use('/static', express.static(__dirname + '/static'));
// Routing
app.get('/', function (request, response) {
response.sendFile(path.join(__dirname, 'view.html'));
console.log(Object.keys(player_move).length);
if (Object.keys(player_move).length >= 1){
let data = {
id: socketId,
x: player_move[socketId].x,
z: player_move[socketId].z,
};
response.send(data);
console.log('connected');
}else{
response.send("no");
console.log('not connected');
};
});
app.use(express.static(__dirname + '/client/'));
// Routing
app.get('/view', function (request, response) {
response.sendFile(path.join(__dirname, '/client/index.html'));
});
server.listen(port, function () {
console.log('Старт сервера по адресу localhost:' + port);
console.log('Старт просмотра по адресу localhost: ' + port + ' /view');
});
var player_move = {};
var socketId;
io.on('connection', function (socket) {
socket.on('new player', function () {
console.log('new player');
socket.emit('ok');
});
socket.on('disconnect', function () {
});
socket.on('movement', function () {
console.log('movement');
console.log('player_move', player_move);
if (player_move[socketId]) {
let data = {
id: socketId,
x: player_move[socketId].x,
z: player_move[socketId].z,
};
socket.emit('ok', data);
}
});
socket.on('phone_data', function (data) {
console.log('phone_date', data);
socketId = socket.id;
player_move[socket.id] = {
x: data.x,
z: data.z
};
});
// GET method route
app.get('/', function (req, res) {
res.send('Contact');
console.log("est kontakt");
});
});
socket code:
using System.Collections;
using System.Collections.Generic;
using System.Globalization;
using UnityEngine;
using UnityEngine.Networking;
public class SocketController : MonoBehaviour
{
[SerializeField]
PlayerController player;
// Start is called before the first frame update
void Start()
{
StartCoroutine(GetRequest("http://plantgo.ru:5000"));
}
private void Awake()
{
//socket.url = "ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket";
}
// Update is called once per frame
void Update()
{
}
//private IEnumerator Connector()
//{
// while (true)
// {
// socket.Emit("movement");
// yield return new WaitForSeconds(0.10f);
// }
// wait 1 seconds and continue
// }
class PlayerInfo
{
public string id;
public string x;
public string z;
}
IEnumerator GetRequest(string uri)
{
while (true)
{
using (UnityWebRequest webRequest = UnityWebRequest.Get(uri))
{
// Request and wait for the desired page.
yield return webRequest.SendWebRequest();
string[] pages = uri.Split('/');
int page = pages.Length - 1;
if (webRequest.isNetworkError)
{
Debug.Log(pages[page] + ": Error: " + webRequest.error);
}
else
{
Debug.Log(pages[page] + ":\nReceived: " + webRequest.downloadHandler.text);
if (webRequest.downloadHandler.text == "no")
{
continue;
}
else
{
PlayerInfo playerInfo = (PlayerInfo)JsonUtility.FromJson<PlayerInfo>(webRequest.downloadHandler.text);
Debug.Log(playerInfo);
player.PlayerMove(float.Parse(playerInfo.x, CultureInfo.InvariantCulture), float.Parse(playerInfo.z, CultureInfo.InvariantCulture));
}
}
}
//yield return new WaitForSeconds(0.1f);
}
}
}
when I start the server, several users can control the character at once, since they are in the same game space, it is necessary for each to have its own.
I have a progress bar logic that implements SignalR on a page that processes uploaded file. It works properly and produces correct progress.
However, it produces progress bar for ALL users, not just for the user that uploaded the file. In other words, one user uploads the file, but that progress for that file upload shows even on screens of other user/sessions that conducted no action on their ends
I did come up with a workaround, where I send a user id with the SignalR progress call/signal and compare it with the user id stored in a hidden field on aspx. If they don't match, I don't produce the progress bar. However, this fix seems to be like a dirty workaround.
Is there a more efficient way to ensure the SignalR to work only within one session?
Just in case here is my code
protected void btnSubmit_Click(object sender, EventArgs e)
{
HttpFileCollection attachments = null;
try
{
lblMessage.Text = string.Empty;
var hubContext = GlobalHost.ConnectionManager.GetHubContext<ProgressHub>();
hubContext.Clients.All.AddProgress("Upload has been initiated: ", string.Empty, "0",
Context.User.Identity.Name, pageName);
if (fileupload1.HasFile)
{
attachments = Request.Files;
if (attachments.Count > totalnumberoffiles)
{
lblMessage.Text += "Please select only " + totalnumberoffiles + " files.";
lblMessage.Visible = true;
}
else
{
double fileProgressPercentagePortion = 100 / attachments.Count;
double fileProgressPercentage = 0;
double fileProgressPercentageSegment = fileProgressPercentagePortion/6;
for (int i = 0; i < attachments.Count; i++)
{
HttpPostedFile attachment = attachments[i];
if (attachment.FileName == string.Empty)
{
continue;
}
hubContext.Clients.All.AddProgress("Currently processing: ", new System.IO.FileInfo(attachment.FileName).Name, "0",
Context.User.Identity.Name, pageName);
if (attachment.ContentLength > 0 && !String.IsNullOrEmpty(attachment.FileName))
{
hubContext.Clients.Client(hubContext.co).AddProgress("Currently processing: ", new System.IO.FileInfo(attachment.FileName).Name,
fileProgressPercentageSegment, Context.User.Identity.Name, pageName);
ProcessFile(attachment, hubContext, fileProgressPercentageSegment,
fileProgressPercentage);
fileProgressPercentage += fileProgressPercentagePortion;
}
}
}
}
}
catch (Exception e3)
{
}
finally
{
}
}
Here is my JavaScript
$(function () {
// Reference the auto-generated proxy for the hub.
var progress = $.connection.progressHub;
console.log(progress);
var hfUserAccount = document.getElementById("<%=hfUserAccount.ClientID %>");
// Create a function that the hub can call back to display messages.
progress.client.AddProgress = function (fileName, message, percentage, userAccount, pageName) {
if (userAccount === hfUserAccount.value && pageName === "CheckEFile.aspx") {
ProgressBarModal("show", fileName + " " + message);
document.getElementById("divProgress").style.display = "block";
document.getElementById("divUpload").style.display = "block";
document.getElementById("divProgress").style.width = percentage + "%";
document.getElementById("lblPercentage").innerHTML = parseInt(percentage) + "%";
$("#processingStatus").html("Please Wait. Checking files...");
$('#ProgressMessage').width(percentage);
if (percentage === "100%") {
ProgressBarModal();
}
}
};
$.connection.hub.start().done(function () {
var connectionId = $.connection.hub.id;
console.log(connectionId);
});
});
Here is my hub
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace IAACCESS.SignalR
{
public class ProgressHub : Hub
{
static ProgressHub()
{
}
}
}
If you only want to respond to whoever called your server side method, you can use the Clients.Caller property like so:
// Notice 'Clients.Caller' not 'Clients.All'
hubContext.Clients.Caller.AddProgress("Currently processing: ", new System.IO.FileInfo(attachment.FileName).Name, "0", Context.User.Identity.Name, pageName);
Found a solution, in my aspx I have
$.connection.hub.start().done(function () {
var connectionId = $.connection.hub.id;
console.log(connectionId);
$('#<%=hfConnectionId.ClientID %>').val(connectionId);
});
where I set the connection ID to a hidden field
<asp:HiddenField id="hfConnectionId" runat="server" />
And in code-behind I now have
hubContext.Clients.Client(hfConnectionId.Value).AddProgress("Currently processing: ", fn4, currentProgress, Context.User.Identity.Name, pageName);
I have a string array which contains addresses of websites:
string[] arr = new string[]
{
"https://www/google.com",
"https://www.yahoo.com",
"https://www.microsoft.com"
};
I have to send these URLs as argument to the asynctask method so that I will be able to calculate the loading time of each website. I don't have to show the website pages, so I am not using webview.
I can use stopwatch or httprequest to calculate the loading time and my ultimate goal is that all the websites need to start loading at the same time asynchronously, and output has to look like the following
Loading time
google - 00:00:04:092345 (hr:min:sec:millisec) yahoo - 00:00:06:028458
How can I send an array to asynctask and how I can generate loading time without using await?
Here is a brief solution of what you could do.
This is not complete nor perfect. It will will give you the loading time of one URL. Also there is a suggestion of how you could extend this to multiple URLs.
You will need a WebView, either in code or from UI.
Load the URL into the WebView using webview.LoadUrl("https://www/google.com");.
Create a new class by extending it from WebViewClient as follows:
public class myWebViewClient : WebViewClient
{
public override void OnPageFinished(WebView view, string url)
{
base.OnPageFinished(view, url);
Console.WriteLine("OnPageFinished for url : " + url + " at : " + DateTime.Now);
}
}
In your OnCreate() method add the following line of code :
webview.SetWebViewClient(new myWebViewClient());
So from here what you have to do is, Create a Dictionary with URL as key and Loading time as value. Set all the loading time to 0 initially. Update the value corresponding to each URL in the OnPageFinished(). Create an async Task function which would return you the populated dictionary.
public async Task<Dictionary<string, double>> myAsyncFunction()
{
await Task.Delay(5); //to make it async
//Wait till all the OnPageFinished events have fired.
while (myDictionary.Any(x=>x.Value == 0) == true)
{
//there are still websites which have not fully loaded.
await Task.Delay(1); //wait a millisecond before checking again
}
return myDictionary;
}
You can call myAsyncFunction() in a seprate thread than your UI and implement the ContinueWith() or just let it run in a separate thread and write that output into somewhere that you can check when required.
eg : Task.Run(async () => await myAsyncFunction());
UPDATE : based on OP's comments
In the UI thread :
var myClassList = new List<myClass>
{
new myClass{URL = "https://www/google.com", TimeTaken = null},
new myClass{URL = "https://www.yahoo.com", TimeTaken = null},
new myClass{URL = "https://www.microsoft.com", TimeTaken = null}
};
Console.WriteLine("Started at : " + DateTime.Now.ToShortTimeString());
var business = new BusinessLogic();
var loadtimetask = business.GetLoadTimeTakenAsync(myClassList);
await loadtimetask;
Console.WriteLine("Completed at : " + DateTime.Now.ToShortTimeString());
And implementation class :
public async Task<List<myClass>> GetLoadTimeTakenAsync(List<myClass> myClassList)
{
Parallel.ForEach(myClassList, myClassObj =>
{
using (var client = new HttpClient())
{
myClassObj.StartTime = DateTime.Now;
var stream = client.GetStreamAsync(myClassObj.URL)
.ContinueWith((s) =>
{
if (s.IsCompleted)
{
var myClassObjCompleted = myClassList.Where(x => x.URL == myClassObj.URL).First();
myClassObjCompleted.EndTime = DateTime.Now;
myClassObjCompleted.TimeTaken = myClassObj.EndTime - myClassObj.StartTime;
}
});
Task.Run(async () => await stream);
}
});
while (myClassList.Any(x => x.TimeTaken == null))
{
await Task.Delay(1);
}
return myClassList;
}
//Create TextView to display status of Wifi
TextView wifitext = FindViewById<TextView>(Resource.Id.WifiTextView);
//Configuring Wifi connection
var connectivityManager = (ConnectivityManager)GetSystemService(ConnectivityService);
var activeConnection = connectivityManager.ActiveNetworkInfo;
if (activeConnection != null && activeConnection.IsConnected)
{
wifitext.Text = "WIFI AVAILABLE";
string[] urladdress = new string[] { "https://www.google.com/", "https://www.yahoo.com/"};
for (int i = 0; i < urladdress.Length; i++)
{
string url = urladdress[i];
//Call async method
Task returnedTask = Task_MethodAsync(url);
}
}
else
wifitext.Text = "WIFI UNAVAILABLE";
}
public async Task Task_MethodAsync(string url)
{
LinearLayout ll = FindViewById<LinearLayout>(Resource.Id.linearLayout1);
WebClient client = new WebClient();
Stopwatch stopwatch = new Stopwatch();
stopwatch.Start();
Stream listurl = client.OpenRead(url);
StreamReader reader = new StreamReader(listurl);
stopwatch.Stop();
// listurl.Close();
var time = Convert.ToString(stopwatch.Elapsed);
I'm working on a script wich is in a ASP.NET MVC5 application. This script is working on 15.000 files so i don't want to wait the end to refresh my view.
My problem is that i would like to refresh my view during my Async task.
I tried many solutions like using AJAX to reload my partial view during my task but when i launch my script, it block evrything and never refresh my view untill the end of this script.
My code :
View
#{
ViewBag.Title = "ConvertScript";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>ConvertScript</h2>
<div id="PartialDiv">
#{Html.Partial("getStatus");}
</div>
#section Scripts
{
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
<script type="text/javascript">
$(function () {
setInterval(function () { $('#PartialDiv').load('/Annotation/Refresh'); }, 1000); // every 3 sec
});
</script>
}
Controller
public string testOut(int callDuration, out int threadId)
{
var File = from m in db.Annotations where m.IsDocument == true select m;
int i;
for (i = 0; i < 100; ++i)
{
Annotation item = File.OrderBy(t => t.FileSize).Skip(i).Take(1).Single();
using (FileStream stream = new FileStream("C:\\Users\\administrator\\Documents\\Visual Studio 2013\\Projects\\Files\\" + item.FileName, FileMode.Create, FileAccess.ReadWrite))
{
byte[] fileContent = Convert.FromBase64String(item.DocumentBody);
Debug.Write("Doing item nb : " + i + " Filename : " + item.FileName + "\n");
stream.Write(fileContent, 0, fileContent.Length);
stream.Close();
Session["count_files"] = (int)Session["count_files"] + 1;
}
}
threadId = Thread.CurrentThread.ManagedThreadId;
return ("Yes");
}
public delegate string AsyncMethodCaller(int callDuration, out int threadId);
[OutputCache(NoStore = true, Location = OutputCacheLocation.Client, Duration = 1)]
public ActionResult Refresh()
{
Debug.Write("Refresh " + Session["State"] + "\n");
if ((int)Session["State"] == 2)
{
Debug.Write("In\n");
int threadId;
AsyncMethodCaller caller = testOut;
IAsyncResult result = caller.BeginInvoke(10, out threadId, null, null);
string res = caller.EndInvoke(out threadId, result);
}
Session["State"] = (int)Session["State"] + 1;
ViewData["count_file"] = (int)Session["count_files"];
return PartialView("getStatus");
}
Does anyone have an idea to do that ?
Thanks,
Oliver
You could use SignalR to send data to the client from the server in the async method. Basically, SignalR is an implementation by Microsoft of multiple methods (with fallbacks for almost every browser) to allow bi-directionnal communication, which is probably what you are looking for.
I suggest you learn it. You can read about it here : http://signalr.net/, and there is some content about SignalR on MVA. The documentation is here, and it seems to offer a lot of tutorials to get you started. Good luck with that.
So I am trying to add an async progress bar on a really slow and long query that inserts a bunch of rows to a database. My implementation is based off this example: http://blog.janjonas.net/2012-01-02/asp_net-mvc_3-async-jquery-progress-indicator-long-running-tasks
Here is the javascript code for the progress bar
function updateMonitor(taskId, status) {
$("#" + taskId).html("Task [" + taskId + "]: " + status);
}
//other code
if (doSend == true) {
$.post("/SendBatch/HandleBatchRequest", {
//other code
},
function (taskId) {
// Init monitors
//breakpoint here does not stop it, it never enters this somehow?
$("#monitors").append($("<p id='" + taskId + "'/>"));
updateMonitor(taskId, "Started");
// Periodically update monitors
var intervalId = setInterval(function () {
$.post("SendBatch/Progress", { id: taskId }, function (progress) {
if (progress >= 100) {
updateMonitor(taskId, "Completed");
clearInterval(intervalId);
} else {
updateMonitor(taskId, progress + "%");
}
});
}, 100);
}
,"html");
Then there is the DIV within the display part of the website
<div id="monitors"></div>
Here is how the controller looks
public SendBatchController
//some code
private static IDictionary<Guid, int> tasks = new Dictionary<Guid, int>();
public ActionResult HandleBatchRequest(
//some code
)
{
var taskId = Guid.NewGuid();
tasks.Add(taskId, 0);
var batchId = Guid.NewGuid().ToString("N");
var costd = cost.ToDecimal();
IEnumerable<BatchListModel> customers;
try
{
customers = new CustomerService(_customerRepository.Session).GetCustomers(
//some code
);
}
catch (Exception err)
{
return Json(err.Message);
}
if (doSend)
{
var sent = 0;
foreach (var c in customers)
{
try
{
var usr = _customerRepository.LoadByID(c.ID);
var message = new ComLog
{
//insertions to log
};
_comLogRepository.Save(message);
sent++;
//progress bar part inside here that is important comes here:
tasks[taskId] = sent;
}
catch (Exception e)
{
Log.WriteLine("ERR:" + e);
}
tasks.Remove(taskId);
}
return Json(taskId);
}
return Json(customers.Count() + " customers");
}
public ActionResult Progress(Guid id)
{
return Json(tasks.Keys.Contains(id) ? tasks[id] : 100);
}
This does not work. The process works in the background. It is only the div that never shows up and never gives any indication. I know this is a lot of code to read but I am really stuck and would love some input on how to fix this.
try change your updateMonitor function into this :
function updateMonitor(taskId, status) {
$("#monitors").html("Task [" + taskId + "]: " + status);
}