刷新ASP.NET Core 6寫的一個網頁

Question

我正在尋找幾個小時，但找不到解決我的問題的方法。 我在 c# 使用 WinForms 和 WPF 做了很多“愛好”項目。現在我想用 asp.net 開始一個簡單的網站。

在 VS 2022 中我開始了一個新項目ASP.NET Core-Web-App

我有一個提交按鈕，與此同時，我已經設法從 FTP 服務器加載圖像並在我按下此按鈕時顯示它。

但是，我想在不按下按鈕的情況下定期從服務器加載和顯示不同的圖像。 為此，我內置了一個計時器，可以一遍又一遍地重新加載圖像。

然后我將此圖像分配給我在 Index.chtml 中的圖像，但不幸的是頁面或圖像沒有更新。

我的 index.chtml 看起來像：

@page
    @model IndexModel
    @{
        ViewData["Title"] = "Home page";
    }

    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
        <p>@Model.Test</p>
        <form method="post">
            <label for="@Model.Test" id="LblTest" runat="server"/>
            <input type="text" id="txtName" name="name" width="300" value="@Model.Test"/>
            <input type="submit" id="btnSubmit" value="Get Current Time" asp-page-handler="Submit"/>
            <br />
            <p><img src="@Model.imageSrc" alt="InfoImage" width="800" border="0" /></p>>
        </form>
    }
    </div>

我的代碼是：

public class IndexModel : PageModel
{
      System.Timers.Timer ReloadTimer = new System.Timers.Timer(10000);

      public IndexModel(ILogger<IndexModel> logger)
      {
          _logger = logger;
      }

      public void OnGet()
      {
          ReloadTimer.Elapsed += ReloadTimer_Elapsed;
          ReloadTimer.Enabled = true;
      }

      private void ReloadTimer_Elapsed(object? sender, System.Timers.ElapsedEventArgs e)
      {
          ReloadTimer.Interval = 60000;
          Infoanzeige();
      }

      public void OnPostSubmit(string name)
      {
          Infoanzeige();
      }

      public void Infoanzeige()
      {
          //Code to get new image from FTP
      }
}

按下按鈕后，頁面刷新並顯示圖像。 但是當計時器結束時，它運行相同的代碼，但我只看到舊圖像。 我已閱讀有關使用 StateHasChanged 的內容，但此命令在我的上下文中不存在。 （？？）

如果有解決方案，我將不勝感激。

Answer 1

JHBonarius 說得對，你不能根據需要從服務器更新頁面，你需要使用 ajax 等技術，使用 javascript

在本例中為 jQuery

<script type="text/javascript">  

function InvokeAction(param){
    $.ajax({
        type: "GET",
        async: true,
        data: param.data,
        url: param.url,
        success: function(response){
            // replace image with response.image
        },
        error: function (jqXHR, exception) {
            console.log('error')
        }
    })
}

$(function () {  
    setInterval(InvokeAction, 60000)
});  

Answer 2

非常感謝您的所有幫助。 我將答案的代碼標記為解決方案，因為它是功能性的。 盡管如此，我還是為我找到了另一個解決方案。 我開始了一個新項目 blazor 服務器應用程序。 有了這個，我能夠毫無問題地將我的 C# 代碼直接集成到網站的代碼中。 在我的代碼中，我最終調用了“InvokeAsync(() => StateHasChanged());”，因此更改將在客戶端呈現。

<img src="@ImageSrc" height="650" style="border:1px solid black;"/>

@code
{
    string ImageSrc = "";
    System.Timers.Timer TimerReload = new System.Timers.Timer();

    protected override void OnInitialized()
    {
        TimerReload.Interval = 10000;
        TimerReload.Elapsed += TimerReload_Elapsed;
        TimerReload.Start();

        InfoseiteLaden();
    }

    private void TimerReload_Elapsed(object? sender, System.Timers.ElapsedEventArgs e)
    {
        InfoseiteLaden();
    }

    private void InfoseiteLaden()
    {
        //Code to get new image from FTP

        InvokeAsync(() => StateHasChanged() );
    }
}
´´´