Click here to Skip to main content
14,454,989 members
Rate this:
Please Sign up or sign in to vote.
See more:
I have been googling and googling. I apparently don't know how to ask this as I'm getting nowhere with what seems simple.

I have a view page that displays some data from a ViewBag prepared ahead of view time.
This ViewBag data is a group of Sales Receipts displayed in an html table that are going to be sent to a server when the user is ready to do so.

When the user clicks a button to initiate the sending action, the controller code starts sending the sales receipts to the destination server.

I want to change a string in the "status" table cell for each sales receipt from it's default load time string of "Xfer Ready" to something else like "Sent" or "Error" from the controller data send loop.

In a nut shell I want to from C# controller code scribble on the view web page after it is loaded and in view.

What I have tried:

Just about everything I can google.

Right now I can't seem to even asynchronously put "hello world!" on the web page in question after it is shown.

TIA
Posted
Comments
ZurdoDev 14-Feb-20 12:59pm
   
It sounds like you want to change something after the page sends data to the server? If so, your controller action should be returning a View so you can put it into that view or put it into the ViewBag.
Ron Anders 14-Feb-20 13:11pm
   
No, the page is just a confidence view of the data the controller has and is going to send. The user then clicks a button that calls a function in the controller that does the heavy lifting. I just want to reflect the "play by play" progress as the work is done by the controller.

Right now, if you click the "go" button the table just stares at you like nothing is happening, when everything is. :-)

It's doesn't have to be elaborate. I just can scribble on a page from mvc.

I made a javascript function in the web page to display "hello world" but then googling how to call that function from a mvc controller code led me down paths that seemed way overboard as if I was using the wrong search terms.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

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.");
}
   
Comments
Ron Anders 14-Feb-20 13:35pm
   
Thanks, but what a pita!

Seems crazy that we cant just spray data on "the terminal" like we would
on a "terminal" - even if it breaks all the rules.

I appreciate what you have taught me however.
Let me pour over it and maybe I can get my head around it.

Thanks.
Richard Deeming 14-Feb-20 13:40pm
   
Yes, in many ways, web development is still stuck in the 90s. :)

I've not used it yet, but something like Blazor might make things slightly easier, particularly once the client-side version is released in May:
Blazor | Build client web apps with C# | .NET[^]
Introduction to ASP.NET Core Blazor | Microsoft Docs[^]
Ron Anders 14-Feb-20 14:58pm
   
Oh, my! Blazor looks like just what we all need!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100