Получение данных из API с помощью Blazor. Данные не извлекаются

Использование ASP.net Core 3.0 и Blazor. Я изменяю проект, найденный здесь: https://ankitsharmablogs.com/asp-net-core-crud-using-blazor-and-entity-framework-core/

Я использовал Scofold-DbContext для создания файла Context и класса Model. У VS не было проблем с обращением к базе данных для создания необходимых файлов.

Вид бритвы:

@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");
    }
}

Класс уровня доступа к данным:

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

Когда я запускаю проект и нажимаю ссылку на новую страницу, он показывает "загрузка...", но никогда не берет данные из базы данных и не загружает таблицу.

Может ли кто-нибудь указать мне правильное направление относительно того, что я, возможно, упустил?

Как сделать HTTP-запрос в Javascript?
Как сделать HTTP-запрос в Javascript?
В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:
Создание ресурсов API Laravel: Советы по производительности и масштабируемости
Создание ресурсов API Laravel: Советы по производительности и масштабируемости
Создание API-ресурса Laravel может быть непростой задачей. Она требует глубокого понимания возможностей Laravel и лучших практик, чтобы обеспечить...
Как создать простое погодное приложение на Python с API OpenWeatherMap
Как создать простое погодное приложение на Python с API OpenWeatherMap
Этот учебник проведет вас через процесс создания простого погодного приложения с помощью Python и OpenWeatherMap API.
Пакеты Java
Пакеты Java
Пакет java - это группа классов, интерфейсов и подпакетов схожего типа. Думайте об этом как о папке в каталоге файлов. Мы используем пакеты, чтобы...
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
1
0
770
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, это потому, что ваш URL-адрес неверен. Ты используешь

"api/RepairOrder/Index" вместо "api/Employee/Index"

Могут быть и другие проблемы с этим приложением, но это первое, что заметили мои слабые глаза.

Примечание:

  • Это приложение древнее. Почти предыстория. Он был написан еще до того, как я услышал о Blazor.

  • Вы должны были использовать такие инструменты, как postman или Fiddler, чтобы проверить, возвращает ли ваш веб-API данные. Это может избавить вас от многих неприятностей.

  • Я бы посоветовал вам не изучать Blazor, следуя статьям и книгам, написанным этим парнем. Ему самому нужно много курсов по Blazor и тому, как работает Интернет. Он также никогда серьезно не выходит за рамки CRUD. Статья, на которую вы дали ссылку, полна ошибок и базового понимания Интернета, SPA и самого Blazor.

Вместо этого изучите:

  1. Документы Blazor
  2. Я начал изучать Blazor и рекомендую вам использовать
  3. https://github.com/dotnet-presentations/blazor-мастерская
  4. https://github.com/aspnet/samples/tree/master/samples/aspnetcore/blazor

Надеюсь это поможет...

Спасибо, ваши ссылки указали мне на лучшие варианты. Я уже разобрался с этим вопросом!

Dwayne Barsotta 11.06.2019 21:02

Другие вопросы по теме