Ron Anders Ответов: 1

Mvc: могу ли я изменить текст в представлении после его отображения?

Я все гуглил и гуглил. Я, по-видимому, не знаю, как спросить об этом, так как я никуда не иду с тем, что кажется простым.

У меня есть страница просмотра, которая отображает некоторые данные из пакета просмотра, подготовленного заранее.
Эти данные ViewBag представляют собой группу квитанций о продажах, отображаемых в html-таблице, которые будут отправлены на сервер, когда пользователь будет готов сделать это.

Когда пользователь нажимает кнопку для инициирования действия отправки, код контроллера начинает отправлять квитанции о продаже на целевой сервер.

Я хочу изменить строку в ячейке таблицы "статус" для каждого чека продажи из строки времени загрузки по умолчанию "Xfer Ready" на что-то другое, например "отправлено" или "ошибка" из цикла отправки данных контроллера.

В ореховой скорлупе я хочу, чтобы из кода контроллера C# каракули на веб-странице просмотра после того, как он загружен и находится в поле зрения.

Что я уже пробовал:

Почти все, что я могу погуглить.

Прямо сейчас я, кажется, даже не могу асинхронно поставить "hello world!" на веб-странице, о которой идет речь, после того, как она будет показана.

ТИА

ZurdoDev

Похоже, вы хотите что-то изменить после того, как страница отправит данные на сервер? Если это так, то ваше действие контроллера должно возвращать представление, чтобы вы могли поместить его в это представление или поместить в ViewBag.

Ron Anders

Нет, страница-это просто доверительное представление данных, которые контроллер имеет и собирается отправить. Затем пользователь нажимает кнопку, которая вызывает функцию в контроллере, выполняющую тяжелую работу. Я просто хочу отразить прогресс "игры за игрой" по мере того, как работа выполняется контроллером.

Прямо сейчас, если вы нажмете кнопку "go", стол просто смотрит на вас, как будто ничего не происходит, когда все есть. :-)

Это не обязательно должно быть сложным. Я просто могу нацарапать на странице из mvc.

Я сделал функцию javascript на веб-странице, чтобы отобразить "hello world", но затем поиск в Google, как вызвать эту функцию из кода контроллера mvc, привел меня к путям, которые казались слишком большими, как будто я использовал неправильные поисковые запросы.

1 Ответов

Рейтинг:
8

Richard Deeming

Это звучит так, как будто вы отправляете форму на сервер, а затем пытаетесь обновить представление на сервере, пока выполняется серверный код. Это не сработает - обновленный ответ не вернется в браузер до тех пор, пока серверный код не завершит работу.

Что вы мочь сделайте это, напишите немного Javascript, чтобы сделать вызов AJAX на сервер, и обновите элементы на Вашей странице в соответствии с полученным ответом.

Я бы рекомендовал создать действие контроллера для отправки одной квитанции. Затем ваш Javascript должен инициировать AJAX-запрос для каждой квитанции, которую вы хотите отправить. По мере завершения каждого запроса AJAX вы можете обновить метку для этой квитанции в соответствии с ответом.

Напр.:

Смотреть: 

<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); }
});
Контроллер: 
[HttpPost]
public ActionResult SendReceipt(Guid id)
{
    ... Send the receipt ...
    return Json("Receipt sent.");
}

Ron Anders

Спасибо, но что за Пита!

Кажется сумасшедшим, что мы не можем просто распылять данные на "терминал", как это было бы
на "терминале" - даже если он нарушает все правила.

Однако я ценю то, чему вы меня научили.
Позвольте мне полить его, и, может быть, я смогу справиться с этим.

Спасибо.

Richard Deeming

Да, во многих отношениях веб-разработка все еще застряла в 90-х годах. :)

Я еще не использовал его, но что-то вроде Blazor может немного облегчить ситуацию, особенно после выпуска клиентской версии в мае:
Blazor | создание клиентских веб-приложений с помощью C# | .NET[^]
Введение в ASP.NET Core Blazor | Microsoft Docs[^]

Ron Anders

О боже! Blazor похоже, это все, что нам нужно!