使用 Blazor 从 API 检索数据。数据未被拉取

Question

使用 ASP.net Core 3.0 和 Blazor。我正在修改在这里找到的项目：https://ankitsharmablogs.com/asp-net-core-crud-using-blazor-and-entity-framework-core/

我使用 Scofold-DbContext 构建了我的上下文文件和模型 class。 VS 在联系数据库以创建所需文件时没有问题。

Razor 视图：

@using ShopLive1.Shared.Models
@page "/fetchemployees"
@inject  HttpClient Http

<h1>Shop Live - Repair Order Update</h1>

@if(roList == null)
{
    <p><em>Loading....</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Control Number</th>
                <th>VIN</th>
                <th>Make</th>
                <th>Model</th>
                <th>Customer</th>
                <th>Repair Stage</th>
                <th>Location</th>
                <th>Assigned</th>
            </tr>
        </thead>
        <tbody>
            @foreach(var ro in roList)
            {
                <tr>
                    <td>@ro.ControlNumber</td>
                    <td>@ro.Vin</td>
                    <td>@ro.Make</td>
                    <td>@ro.Model</td>
                    <td>@ro.Customer</td>
                    <td>@ro.Stage</td>
                    <td>@ro.VehicleLocation</td>
                    <td>@ro.Technician</td>
                </tr>
            }
        </tbody>
    </table>
}


@functions{
    RepairOrder[] roList;

    protected override async Task OnInitAsync()
    {
        roList = await Http.GetJsonAsync<RepairOrder[]>("api/RepairOrder/Index");
    }
}

数据访问层class:

ShopLiveContext db = new ShopLiveContext();

        //To get all repair orders
        public List<RepairOrder> GetAllRepairOrders()
        {
            try
            {
                return db.RepairOrder.ToList();
            }
            catch
            {
                throw;
            }

        }

        //To add new Repair Orders
        public void AddRepairOrder(RepairOrder ro)
        {
            try
            {
                db.RepairOrder.Add(ro);
                db.SaveChanges();
            }
            catch
            {
                throw;
            }
        }

        //To update Repair Orders
        public void UpdateRepairOrder(RepairOrder ro)
        {
            try
            {
                db.Entry(ro).State = EntityState.Modified;
                db.SaveChanges();
            }
            catch
            {
                throw;
            }
        }

        //Get the details of a particular RO
        public RepairOrder GetRepairOrderDetails(int id)
        {
            try
            {
                RepairOrder ro = db.RepairOrder.Find(id);
                return ro;
            }
            catch
            {
                throw;
            }
        }

        //To delete a record
        public void DeleteRepairOrder(int id)
        {
            try
            {
                RepairOrder ro = db.RepairOrder.Find(id);
                db.RepairOrder.Remove(ro);
                db.SaveChanges();
            }
            catch
            {
                throw;
            }
        }
    }
}

数据上下文文件：

public ShopLiveContext()
        {
        }

        public ShopLiveContext(DbContextOptions<ShopLiveContext> options)
            : base(options)
        {
        }

        public virtual DbSet<RepairOrder> RepairOrder { get; set; }

        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            if (!optionsBuilder.IsConfigured)
            {
                optionsBuilder.UseSqlServer("Data Source=sumcso-8g5lr52;Initial Catalog=ShopLive;Integrated Security=True");
            }
        }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.HasAnnotation("ProductVersion", "3.0.0-preview5.19227.1");

            modelBuilder.Entity<RepairOrder>(entity =>
            {
                entity.Property(e => e.ControlNumber)
                    .IsRequired()
                    .HasMaxLength(13)
                    .IsUnicode(false);

                entity.Property(e => e.Customer)
                    .IsRequired()
                    .HasMaxLength(50)
                    .IsUnicode(false);

                entity.Property(e => e.Make)
                    .HasMaxLength(50)
                    .IsUnicode(false);

                entity.Property(e => e.ManagerNote)
                    .HasMaxLength(5000)
                    .IsUnicode(false);

                entity.Property(e => e.Model)
                    .HasMaxLength(50)
                    .IsUnicode(false);

                entity.Property(e => e.Stage)
                    .IsRequired()
                    .HasMaxLength(50)
                    .IsUnicode(false);

                entity.Property(e => e.TechncicianNote)
                    .HasMaxLength(5000)
                    .IsUnicode(false);

                entity.Property(e => e.Technician)
                    .HasMaxLength(50)
                    .IsUnicode(false);

                entity.Property(e => e.VehicleLocation)
                    .IsRequired()
                    .HasMaxLength(50)
                    .IsUnicode(false);

                entity.Property(e => e.Vin)
                    .HasColumnName("VIN")
                    .HasMaxLength(20)
                    .IsUnicode(false);
            });
        }
    }

当我运行这个项目，点击link到新页面时，它显示"loading..."但从来没有从数据库中抓取数据并加载table.

有人可以指出我可能遗漏的正确方向吗？

Answer 1

我猜是因为你的url错了。您使用

"api/RepairOrder/Index" 而不是 "api/Employee/Index"

这个应用程序可能还有其他问题，但这是我的弱眼第一次注意到。

注：

这个应用程序很古老。差不多pre-history。它是在我听说 Blazor 之前就创作的。
你应该用过postman或者Fiddler之类的工具来验证你的WebAPIreturns数据是否正确。这样可以省去很多麻烦。
我建议你不要按照这个人写的文章和书籍来学习 Blazor。他自己需要大量有关 Blazor 以及 Internet 工作原理的课程。他也从未认真地超越 CRUD。您提供 link 的文章充满了错误以及对 Web、SPA 和 Blazor 本身的基本理解。

改为学习：

Blazor 文档
我开始学习 Blazor 并推荐你使用
- https://chrissainty.com/blazor/
- https://learn-blazor.com/ 这是一个很好的学习来源。被主人遗弃了一段时间。不过希望他已经开始更新了
https://github.com/dotnet-presentations/blazor-workshop
https://github.com/aspnet/samples/tree/master/samples/aspnetcore/blazor

希望这对您有所帮助...

使用 Blazor 从 API 检索数据。数据未被拉取

Retrieving data from an API using Blazor. Data not being pulled

api

crud

asp.net-core

blazor