asp.net: ASP.NET Core 8 對 ScriptManager 使用的替代方案

在 ASP.NET Core 8 中，ScriptManager 和 UpdatePanel 等傳統 Web Forms 控件不再適用，因為 ASP.NET Core 採用了更現代化和靈活的方式來處理 JavaScript 和 AJAX。

以下是一些可以替代 ScriptManager 的方式來管理 JavaScript 和進行 AJAX 操作：

1. 使用 JavaScript 直接進行 AJAX 請求
使用 JavaScript（例如原生的 fetch API 或第三方庫如 jQuery）進行 AJAX 請求是非常普遍的方法。這種方法不依賴於服務端控件，可以更靈活地管理和處理客戶端行為。

使用 Fetch API 的範例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example with Fetch API</title>
    <script>
        async function fetchData() {
            try {
                const response = await fetch('/api/data');
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                document.getElementById('result').textContent = JSON.stringify(data);
            } catch (error) {
                console.error('There has been a problem with your fetch operation:', error);
            }
        }
    </script>
</head>
<body>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="result"></div>
</body>
</html>

使用 jQuery 的範例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#fetchButton").click(function() {
                $.ajax({
                    url: '/api/data',
                    method: 'GET',
                    success: function(data) {
                        $("#result").text(JSON.stringify(data));
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="fetchButton">Fetch Data</button>
    <div id="result"></div>
</body>
</html>

2. 使用 Blazor
Blazor 是一個用於構建互動式網頁 UI 的框架，使用 C# 而不是 JavaScript。Blazor 提供了豐富的組件模型，可以在 WebAssembly 或服務端運行。

Blazor Server 範例

在您的 ASP.NET Core 8 專案中添加一個 Blazor 組件：

csharp

@page "/fetchdata"
@inject HttpClient Http

<PageTitle>Fetch Data</PageTitle>

<h3>Weather forecast</h3>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temperature (C)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
        @foreach (var forecast in forecasts)
        {
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.Summary</td>
            </tr>
        }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
    }
}

在 Startup.cs 中配置 Blazor 服務：

csharp

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
        });
    }
}

3. 使用 Tag Helpers 和 View Components
在 ASP.NET Core 中，Tag Helpers 和 View Components 是強大而靈活的功能，允許您在 Razor 視圖中組織和重用代碼。

使用 View Component 的範例

創建一個 View Component：

csharp

public class WeatherViewComponent : ViewComponent
{
    private readonly HttpClient _httpClient;

    public WeatherViewComponent(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    public async Task InvokeAsync()
    {
        var forecasts = await _httpClient.GetFromJsonAsync("WeatherForecast");
        return View(forecasts);
    }
}

創建對應的視圖：

在 Views/Shared/Components/Weather/Default.cshtml：

html

@model WeatherForecast[]

<h3>Weather forecast</h3>

@if (Model == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temperature (C)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
        @foreach (var forecast in Model)
        {
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.Summary</td>
            </tr>
        }
        </tbody>
    </table>
}

在 Razor 視圖中使用 View Component：

html

@await Component.InvokeAsync("Weather")

總結
在 ASP.NET Core 8 中，您可以使用以下現代化替代方案來取代 ScriptManager：

直接使用 JavaScript 和 AJAX：使用原生的 fetch API 或 jQuery 進行 AJAX 請求。
Blazor：使用 Blazor Server 或 Blazor WebAssembly 來構建互動式的單頁應用程序。
Tag Helpers 和 View Components：在 Razor 視圖中組織和重用代碼。
這些方法不僅更靈活，而且能更好地適應現代網頁開發的需求。

Google Code Prettify

ASP.NET Core 8 對 ScriptManager 使用的替代方案