How to update GridView on UI before method ends - asp.net

Question

I am running a small app in SharePoint that produces the data needed for someone in our company. In short it pulls data from an Azure database into a data-table, and then converts that data-table to excel. This can take about a minute or two and sometimes, because we are in New Zealand and are using a remote server in the USA, they get timeouts and one of the worksheets won't load.
So what it does when it builds the excel is it iterates through a list of suppliers, and a list of financial weeks getting the data for each and creating a separate worksheet in excel per data-table. Ideally, what I would like to add a new row to a grid view that the user sees, as the report is being built, stating whether that financial week and supplier was successfully added, or not, as the excel report is creating in the back-end. This would allow the user to be more aware of the progress, and allow them to know if there has been a problem rather than guessing.
It's a lot of code so I will try to show you the relevant parts.
Method that pulls and creates excel
public void excelThreadCall()
{
DataTable updateDataTable = new DataTable();
gridView.DataSource = updateDataTable;
//Payments only download chosen Financial Week
using (XLWorkbook workbook = new XLWorkbook())
{
//gradeWeek = selectedGradeWeek.SelectedValue;
foreach (ListItem supplier in selectedSuppliers.Items)
{
if (supplier.Selected)
{
foreach (ListItem fWeek in selectedfWeeks.Items)
{
if (fWeek.Selected)
{
string checkEmptyTableSQL = #"SELECT COUNT(*) FROM FleshvGraded WHERE Supplier_Code = '" + supplier.Value + "' AND PO_Revision = " + fWeek.Value;
int rowCount = Convert.ToInt32(getVariable(checkEmptyTableSQL));
if (rowCount > 0)
{
foreach (ListItem report in selectedReports.Items)
{
//SQL Strings
string sqlIntakeDate = #"SELECT Week_Ending_Date FROM Fiscal_Calendar WHERE Fiscal_Week = LEFT(" + fWeek + ", 2) AND Fiscal_Year = CONCAT(20, RIGHT(" + fWeek + ", 2))";
string sqlPO = #"SELECT DISTINCT PO_No FROM FvGSummaryAll WHERE Supplier_Code = '" + supplier.Value + "' AND f_Week = " + fWeek.Value;
string sqlAllSerials = "SELECT * FROM FvGData WHERE Supplier_Code = '" + supplier.Value + "' AND f_Week = " + fWeek.Value
//variables
DateTime weekEnding = Convert.ToDateTime(getVariable(sqlIntakeDate));
DateTime weekStarting = weekEnding.AddDays(-5);
string fWeekString = fWeek.ToString();
string poNoString = getVariable(sqlPO).ToString();
string intakeDateString = weekStarting.Day + "/" + weekStarting.Month + "/" + weekStarting.Year + " to " + weekEnding.Day + "/" + weekEnding.Month + "/" + weekEnding.Year;
//adds summary variables to dictionary
Dictionary<string, string> summaryVariablesDict = new Dictionary<string, string>();
summaryVariablesDict.Add("f Week", fWeekString);
//other values added to Dict
//Adds WorkSheets based on above data
if (report.Selected && report.Value.Equals("allserials"))
{
string worksheetName = supplier.Value + " Data " + fWeek.Value;
DataTable dataTable = getDataTable(sqlAllSerials);
createWorkSheet(workbook, worksheetName, dataTable);
}
//Other Reports follow
**//what I hope to do - need this to show in the grid view immediatley not end of method
updateDataTable.Rows.Add(suppler, fweek, "successful");
gridView.DataBind();**
}
}
}
}
}
}
workbook.SaveAs(filePath);
}
}
So currently this exists in another class but it's no problem for me to move it to the aspx page, and so I have taken liberties to just show you what I need to do in this method. So if it doesn't make complete sense in that respect (i.e. I wouldn't declare the datasource for the grid in the method normally).
The problem I have is that it will wait until the end of the method before updating the grid view via the postback and then the user gets it all at once. I was hoping there is a way to update the gridview at each iteration or even every few seconds if we use a timer, but can't find a way to implement this.
So long story short, how can I update the gridview from this method where the results appear immediately on the users UI, and not wait until the end of the method.

Answer 1

I would do something along these lines:
When the page first loads, start a background thread to start building the spreadsheet.
When the page loads, call some JavaScript that kicks off a callback.
In the method in your code-behind that's called by the callback, check the status of the building process. Have that process maintain a list of strings, each representing the HTML for a row in a table.
Have the page (via JavaScript) perform a callback every few seconds. That callback will get the current list of rows. JavaScript on the page will receive the response and update the rendered table to include the new rows.
When the spreadsheet is done (or when a error occurs that aborts the creation process), show a success or failure message to the user.
If it would be helpful, I can provide some simple callback samples to get you going.
Edit: Added code sample:
Markup:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CallBackWebForm.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
var callbackFrequency = 2000;
// Callback javascript
// To make callback to server, call CallServer();
// Receive response from server after callback
function ReceiveServerData(arg, context) {
// Parse the JSON that we got from the server
args = JSON.parse(arg);
// Add rows to table
$.each(args.TableRows, function (index, value) {
$('#table1').append(value);
});
// If we're done, show a message
if (args.DoneLoadingSpreadsheet)
$('#doneDiv').show();
// Otherwise, start a timer to call back again
else
window.setTimeout(function () { CallServer(); }, callbackFrequency);
}
$(document).ready(function() {
// Start the callback loop
window.setTimeout(function () { CallServer(); }, callbackFrequency);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Sample page with some progress-y stuff
</div>
<table id="table1">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<!-- Rows inserted by Javascript will go here -->
</table>
<div id="doneDiv" style="display: none;">
All done!
</div>
</form>
</body>
</html>
Code-behind:
using System;
using System.Collections.Generic;
using System.Threading;
using System.Threading.Tasks;
using System.Web.UI;
using Newtonsoft.Json;
namespace CallBackWebForm
{
public partial class Default : System.Web.UI.Page, ICallbackEventHandler
{
protected void Page_Load(object sender, EventArgs e)
{
// Setup Callback javascript so that page can initiate callbacks and receive callback responses
CreateClientSideCallbackFunction();
if (!Page.IsPostBack)
StartBuildingSpreadsheetTask();
}
#region Callback
private void CreateClientSideCallbackFunction()
{
var cm = Page.ClientScript;
// The Javascript function in the markup must exactly match the function name as entered below (ReceiveServerData)
var cbReference = cm.GetCallbackEventReference(this, "arg", "ReceiveServerData", "");
// The Javascript function to be placed in the markup which will be used to initiate the callback
var callbackScript = "function CallServer(arg, context) {" + cbReference + "; }";
cm.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
}
/// <summary>
/// Called when CallServer(arg, context) is called in javascript on the page
/// </summary>
/// <param name="eventArgument">Not used, but must be passed</param>
public void RaiseCallbackEvent(string eventArgument)
{
}
/// <summary>
/// Called at the end of a callback; provides the response/result to the client
/// </summary>
/// <returns>JSON string representing an instance of the DataTransferClass</returns>
public string GetCallbackResult()
{
// Serialize the DataTransferObject, then delete all TableRows so we don't send them to the browser again
// Note: this is not currently thread-safe. You should add some sort of locking mechanism so the background thread
// doesn't modify the TableRows list while we're serializing it and deleting from it.
var dtoJson = JsonConvert.SerializeObject(DataTransferObject);
DataTransferObject.TableRows.Clear();
return dtoJson;
}
public class DataTransferClass
{
public bool DoneLoadingSpreadsheet { get; set; }
public List<string> TableRows { get; set; }
}
#endregion Callback
#region Background Task
// Sessions have unique IDs, but individual page views don't. So, create one for this page view.
private string ViewID
{
get
{
if (string.IsNullOrEmpty(ViewState["_viewID"] as string))
ViewState["_viewID"] = Guid.NewGuid().ToString();
return ViewState["_viewID"] as string;
}
}
// Store all DataTransfer data and token sources in static dictionaries so the background task can get to them
private static Dictionary<string, DataTransferClass> DataTransferDictionary = new Dictionary<string, DataTransferClass>();
private static Dictionary<string, CancellationTokenSource> TokenSourcesDictionary = new Dictionary<string, CancellationTokenSource>();
// Make the values in the dictionaries for this View easily accessible via Properties
private DataTransferClass DataTransferObject
{
get
{
if (DataTransferDictionary.ContainsKey(ViewID))
return DataTransferDictionary[ViewID];
else
return null;
}
set
{
if (DataTransferDictionary.ContainsKey(ViewID))
DataTransferDictionary[ViewID] = value;
else
DataTransferDictionary.Add(ViewID, value);
}
}
private CancellationTokenSource TokenSource
{
get
{
if (TokenSourcesDictionary.ContainsKey(ViewID))
return TokenSourcesDictionary[ViewID];
else
return null;
}
set
{
if (TokenSourcesDictionary.ContainsKey(ViewID))
TokenSourcesDictionary[ViewID] = value;
else
TokenSourcesDictionary.Add(ViewID, value);
}
}
private void StartBuildingSpreadsheetTask()
{
DataTransferObject = new DataTransferClass() { DoneLoadingSpreadsheet = false, TableRows = new List<string>() };
TokenSource = new CancellationTokenSource();
var token = TokenSource.Token;
(new TaskFactory()).StartNew(() => BuildSpreadsheet(ViewID, token), token);
}
private void BuildSpreadsheet(string viewID, CancellationToken token)
{
// Simulate work. Update DataTransferObject every 5 seconds, finish after 30 seconds (6 iterations with 5 second wait);
for (int i = 0; i < 6; i++)
{
// Work for 5 seconds
System.Threading.Thread.Sleep(5000);
// Update DataTransferObject with new row (don't use the 'DataTransferObject' property; it relies up the 'ViewID' property, which in
// turn relies upon ViewState, which isn't available from a background thread).
DataTransferDictionary[viewID].TableRows.Add("<tr><td>Val " + i + "</td><td>Val " + (i * 10) + "</td><td>Val " + (i * 100) + "</td></tr>");
}
// All done; update DataTransferObject
DataTransferDictionary[viewID].DoneLoadingSpreadsheet = true;
}
#endregion Background Task
}
}
A couple notes:
Add Json.Net NuGet package (Newtonsoft)
Note that the page class implements the ICallbackEventHandler interface
Edit 2: Updated suggested process at the top to match what I actually did in the code sample.