It sounds like you're posting a form to the server, and then trying to update the view on the server whilst the server-side code is running. That's not going to work - the updated response doesn't get back to the browser until the server-side code has finished running.
What you
can do is write some Javascript to make an AJAX call to the server, and update elements in your page according to the response you receive.
I would recommend creating a controller action to send a single receipt. Your Javascript should then trigger an AJAX request for each receipt you want to send. As each AJAX request completes, you can then update the label for that receipt according to the response.
Eg:
View:
<table id="receipts-table">
<tbody>
@forach (var receipt in Model.Receipts)
{
<tr data-receipt-id="@receipt.Id">
...
<td>
<span class="status-label"></span>
</td>
</tr>
}
</tbody>
</table>
<button id="sendReceiptsButton" type="button">
Send Receipts
</button>
Javascript:
function sendReceipt($tr){
var id = $tr.data("receiptId");
$tr.find(".status-label").html("Sending receipt...");
var request = $.post({ url: '@Url.Action("SendReceipt")', data: { id: id } });
request.then(function(response){ $tr.find(".status-label").html(response); });
request.catch(function(){ $tr.find(".status-label").html("Error sending receipt."); });
return request;
}
function sendAllReceipts($table){
var requests = $table.find("tr[data-receipt-id]").map(function(){ sendReceipt($(this)); }).makeArray();
return Promise.all(requests);
}
$("#sendReceiptsButton").click(function(e){
e.preventDefault();
var $btn = $(this);
$btn.prop("disabled", true);
var promise = sendAllReceipts($("#receipts-table"));
promise.finally(function(){ $btn.prop("disabled", false); }
});
Controller:
[HttpPost]
public ActionResult SendReceipt(Guid id)
{
... Send the receipt ...
return Json("Receipt sent.");
}