Mvc: can I change text on the view after it's displayed?

Question

0.00/5 (No votes)

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 14-Feb-20 6:42am

Ron Anders

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Accepted Answer · 2020-02-14T07:25:00

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:

Razor

<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:

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:

C#

[HttpPost]
public ActionResult SendReceipt(Guid id)
{
    ... Send the receipt ...
    return Json("Receipt sent.");
}