Build a Simple CRUD App with ASP.NET Core and Vue

Developer Blog Comments
1

Build a Simple CRUD App with ASP.NET Core and Vue

This tutorial walks you through building a basic CRUD application with ASP.NET Core and Vue.js.

2

Keith Lewis

I was going through this and got an error: ‘FoodRecords is not an Object’. Going through the code I determined an issue with the code. You never import the FoodRecords component in your router/index.js. The following needs to be added to router/index.js: 



import FoodRecords from ‘@/components/FoodRecords’

3

Keith Lewis

Additionally, when it tries to do the okta auth, I am directed to 

{my_Okta_Domain}/oauth2/default/v1/authorize?client_id={my_Client_ID}&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fimplicit%2Fcallback&response_type=id_token token&response_mode=fragment&state={state}&nonce={nonce}&scope=openid profile email

and receive a 400 ‘Bard Request’ error. I have white-listed
http://localhost:8080/implicit.callback
&
http://localhost%3A8080%2Fimplicit%2Fcallback

4

Keith Lewis

I noticed some issues with the FoodRecords.vue. your code shows the b-alert element with an extra space between the colon and show but it should look like this:

<b-alert :show=“loading” variant=“info”>Loading…</b-alert>


This also happens in b-card element between colon and title where it should be:

<b-card :title="(model.id ? ‘Edit Food ID#’ + model.id : ‘New Food Record’)">


and in the tr for the table where it should be:

<tr v-for=“record in records” :key=“record.id”>

5

lopchoi53

Hi Ibrahim Šuta, how to up vue and asp.net core to hosting together?

6

Deveron Crawford

Namespaces! Why are they not included in your sample code? It took me a while (3 days, in fact) to realize that FoodRecords.cs should have “using System;” before the class declaration, and Startup.cs needs

using AspNetCore.Controllers;
using Microsoft.EntityFrameworkCore;

to resolve all of it’s references.

7

arcooke

Great article, thanks for this. I have one problem with the demo project I’m not sure how to solve. I added meta: { requiresAuth: true } to the / route. When I’m logged out and navigate to localhost, my app fully loads and appears in the browser for a split second before being redirected to the Okta login page. How can I prevent any rendering from occurring before redirect?

8

Mika Gouzee

Hello

Thanks for the work. Interesting. Just a question : in the appsettings for the aspnetcore app, you wrote a ClientSecret line. However, when configurated as a SPA, there’s no Client Secret to be found in Okta’s configuration.
Could you provide more explanation here ? is it something that changed recently, or were you distracted ?

Thanks

9

leebrandt

The SPA app uses the implicit flow for authentication and doesn’t require a client secret. The newer guidance would be to look at the Auth Code flow with PKCE like Mobile apps do. https://developer.okta.com/…

Hope this helps!

10

Philipp Grigoryev

Weird thing, when I try to open FoodTracker page, it comes empty. Not sure how to troubleshoot a possible issue. npm doesn’t show any issues while running…

11

leebrandt

All you should need in trusted origins is http://localhost:8080 which should be added automatically for you when you create the application in Okta. is http://localhost:8080 not in your trusted origins?

12

Keith Lewis

this is what shows: https://uploads.disquscdn.c…

I don’t know if the trailing Implicit.callback is waht is causing it or not, and I don’t have this stood up any more. Some point soon, I will look and see if I can find the time to stand it back up.

13

mihai vancsa

hei, i get this error: The type or namespace name ‘JwtBearer’ does not exist in the namespace ‘Microsoft.AspNetCore.Authentication’
Can someone help me with it?

14

antikonservativ

Just run this in terminal:
dotnet add package Microsoft.AspNetCore.Authentication.JwtBearer --version 3.0.0

15

Eric Brown

Confused,:

you say
Inside of your main folder food-records navigate to AspNetCore folder and run the following:

I don’t have a food-records folder, I’ve been following till then, can you give more context?

16

Fabian Rhoda

What about rolebased authorization in the ModelController in Asp.net Core? Something linke [Authorize(Role=“Admin”)] instead of simple [Authorize] annotation?

17

vinod patil

From where you copied the client secretkey in appsetting.json??