刷新用 ASP.NET Core 6 编写的网页

Question

我搜索了几个小时，但找不到解决我的问题的方法。我用 WinForms 和 WPF 在 c# 中做了很多“业余爱好”项目。现在我想用 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://docs.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() );”，因此更改将在 client-side.

上呈现

<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() );
    }
}
´´´

刷新用 ASP.NET Core 6 编写的网页

Refresh a webpage written in ASP.NET Core 6

c#

asp.net-core