Как мне обновить элемент на моей странице с помощью обратного вызова? - PullRequest
Новая
       4

Как мне обновить элемент на моей странице с помощью обратного вызова?

0 голосов
/ 12 января 2020

У меня на странице есть элемент, который выглядит следующим образом 

<td><span class="badge badge-danger">Stopped</span></td>

, и я хочу обновить его на основе того, что происходит в коде.

Возьмем этот пример. У меня есть кнопка и этот элемент, и когда я нажимаю эту кнопку, я хочу начать загрузку списка имен. После того, как он запущен, я хочу, чтобы текст внутри этого промежутка говорил «Запущено», а не «Остановлено», и после того, как код завершил работу, или список имен был загружен, я хочу, чтобы он сказал «Готово», а не «Запущено»

И я читал взад и вперед о том, как это сделать, и мне кажется, что мне нужно как-то реализовать ajax, и я не уверен, как это сделать.

Я думаю, Кнопка вызовет asp -action = "StartDownload", а затем будет выглядеть примерно так .. 

    public ActionResult StartDownload()
    {
       StartDownload();
       return View("WhereSpanIs");
    }


private void StartDownload()
{
   //Set span text to "Started" some how

   //Finished download

   //Set span text to "Done" some how
}

1 Ответ

0 голосов
/ 13 января 2020

Для манипулирования HTML в браузере при запросе с помощью метода контроллера, как в вашем подходе, вам потребуется что-то вроде SignalR , чтобы включить связь между сервером (т.е. контроллером) и клиентом (то есть браузером) .

Как вы уже узнали, проще использовать Ajax для обновления текста в этом случае (используя JavaScript / JQuery). Как и в следующем примере, вы можете установить текст после нажатия кнопки и после завершения запроса:

В представлении: 

<script type="text/javascript">
    // call this method on button click
    function startDownload() {
        // loading, TODO: update the text)
        $.ajax({
            type: "GET",
            url: '@Url.Action("StartDownload", "Home")',
            contentType: "application/json; charset=utf-8",
            success: function(data) {/* done, TODO: update the text */ },
            error: function() { /* error, TODO: update the text }
        });
    }
</script>

В контроллере (Home) : 

public ActionResult StartDownload()
{
    // TODO: perform the download
    return Json(new {status = "OK"});
}

JSON используется для обеспечения возможности интерпретации результата в JavaScript, хотя в этом примере он не используется. См. Учебник по корзине покупок для получения дополнительной информации.

...