ASP.NET 核心 3.1 中的 AJAX 請求。 剃刀頁面

Question

我正在嘗試遵循本指南：Learn Razor Pages

我收到 Http 500 錯誤，當我嘗試單擊按鈕執行 AJAX 獲取請求時：

System.InvalidOperationException：沒有注冊“RazorPagesAJAX.Interfaces.CarService”類型的服務。

我很確定我已經使用以下代碼注冊CarService ：

public void ConfigureServices(IServiceCollection services)
{
    services.AddTransient<ICarService, CarService>();
    services.AddRazorPages();
}

在我的部分頁面_CarPartial.cshtml我使用

@inject Interfaces.CarService carsList

也許這就是問題？

我無法從指南中獲取代碼

 @model List<Car>

去工作。

任何幫助，將不勝感激：）

我的代碼：

索引.cshtml：

@page
@model RazorPagesAJAX.Pages.IndexModel

<divclass="text-center">
    <h1 class="display-4">Razor Pages AJAX Example</h1>
    <p>Main page updated at - @DateTime.Now.</p>
</div>

<h2>Ajax</h2>
<p><button class="btn btn-primary" id="load">Load</button></p>
<div id="grid"></div>
@section scripts{
    <script>
        $(function () {
            $('#load').on('click', function () {
                $('#grid').load('/Index?handler=CarPartial');
            });
        });
    </script>
}

索引.cshtml.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Logging;
using RazorPagesAJAX.Interfaces;                // Import interfaces
using RazorPagesAJAX.Models;                    // Needed to access List of type Car

namespace RazorPagesAJAX.Pages
{
    public class IndexModel : PageModel
    {
        // Dependency injection stuff
        private ICarService _carService;

        // Constructor Injection
        public IndexModel(ICarService carService)
        {
            _carService = carService;
        }

        [BindProperty]
        public List<Car> Cars { get; set; }

        public void OnGet()
        {
        }

        public PartialViewResult OnGetCarPartial()
        {
            Console.WriteLine("Car Partial test");
            Cars = _carService.GetAll();
            return Partial("_CarPartial", Cars);
        }
    }
}

啟動.cs：

namespace RazorPagesAJAX
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            // I have added CarService to the Dependency Injection :
            services.AddTransient<ICarService, CarService>();
            services.AddRazorPages();
        }

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

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

            app.UseRouting();
            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
            });
        }
    }
}

接口 ICarService：

namespace RazorPagesAJAX.Interfaces
{
    public interface ICarService
    {
        // Interface for getting and returning a list of cars
        List<Car> GetAll();
    }

    // The class can use the interface by appending ": I<name>"
    public class CarService : ICarService
    {
        // The GetALL() method has some data entered for testing...
        public List<Car> GetAll()
        {
            List<Car> cars = new List<Car> {
                new Car { Id = 1, Make = "Audi", Model = "R8", Year = 2014, Doors = 2, Colour = "Red", Price = 79995 },
                new Car { Id = 2, Make = "Aston Martin", Model = "Rapide", Year = 2010, Doors = 2, Colour = "Black", Price = 54995 },
                new Car { Id = 3, Make = "Porsche", Model = " 911 991", Year = 2016, Doors = 2, Colour = "White", Price = 155000 },
                new Car { Id = 4, Make = "Mercedes-Benz", Model = "GLE 63S", Year = 2017, Doors = 5, Colour = "Blue", Price = 83995 },
                new Car { Id = 5, Make = "BMW", Model = "X6 M", Year = 2016, Doors = 5, Colour = "Silver", Price = 62995 },
            };

            return cars;
        }
    }
}

AJAX 部分頁面_CarPartial.cshtml：

<!-- The @inject might be the problem???  --->
@inject Interfaces.CarService carsList

<table class="table table-striped">
    <!-- carsList.GetAll() is the GetAll() list in ICarService interface-->
    @foreach (var car in carsList.GetAll())
    {
        <tr>
            <td>@car.Model</td>
            <td>@car.Make</td>
            <td>@car.Year</td>
            <td>$@car.Price</td>
        </tr>
    }
</table>
<p>AJAX Updated at -  @DateTime.Now.</p>

Answer 1

您需要在 _CarPartial.cshtml 中注入接口ICarService而不是 inheritance CarService CarService：

@inject ICarService carsList