4

I'm confused what type of project should I use because I'm newbie to ASP.NET and programing as a whole.

I got instructions to create a web page to manage employees.

The instructions are:

  • nav menu with 3 buttons
  • 3 pages to show employees, positions, past employees
  • editing, adding, removing and creating employees

The employees have to be on the server and the data have to be saved in a SQL database (there will be always just one client).

Technologies that I should use:

Client

  • SASS, LESS or CSS (Bootstrap)
  • Vue.js, VueCLI
  • Typescript

Server

  • ASP.NET Core Web API
  • Docker container (Linux OS)
  • Database: SQL

I tried to build the app in ASP.NET Core 5.0 using ASP.NET Core Web App but I'm not sure if its the correct project type because the server technology in the instructions is ASP.NET Core Web API.

In the instructions I got to study ASP.NET Web API 2 but there are just examples of web api project without interface.

I feel really lost in what should I do. I deleted the project several times because of confusion.

Can please someone help me? Thanks!

1
  • WebAPI project template then set up vuejs project which has nothing to do with asp.net as your Vue project will call your API. You should be able to find examples of calling API from vuejs from Google. Commented Apr 3, 2022 at 18:43

1 Answer 1

2

"I'm confused what type of project should I use because I'm newbie to ASP.NET and programing as a whole?"

Based on your description and requirement you should have one client-side (frontend) project and one server-side (backend project) within the same solution. You could follow the steps below.

Client: Frondtend Project:

For client-side vue.js project you could take the project like below. Please see the screen shot.

enter image description here

Note: For more details steps you could check our official document here

Server: Backend Project:

For dealing with client-side vue.js request you should have one server-side backend project which should be kind of asp.net core web API project. You could take this like below.

enter image description here

Note: For more details steps you could check our official document here

Project Request Architecture:

Your vue.js client-side which we call front-end application will sent request to your asp.net core web API application controller. For example your employees controller then you should return required data from your controller which you will bind to your client-side project eventually. Your project architecture should look like below:

enter image description here

For details you could check official document here

Your Domain Class:

Based on your description you should have employee domain class for exaple an imaginary employee class like below:

public class Employee 
    {
        public Guid Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
    }

ApplicationDbContext:

public class ApplicationDbContext: DbContext
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
            : base(options)
        {
        }
        public DbSet<Employee> Employee { get; set; }
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            //  base.OnModelCreating(modelBuilder);
            modelBuilder.Entity<Employee>().ToTable("Employee");
        }
       
    }

Note:

You should similar SQL Table on your database, to make is easier here I am providing the Database script as well.

SQL Script:

CREATE TABLE [Employee]
(
    Id UNIQUEIDENTIFIER PRIMARY KEY default NEWID(),
    [FirstName] [varchar](50) NULL,
    [LastName] [varchar](50) NULL,
    [Email] [varchar](50) NULL,
 
)

Controller:

    [Route("api/[controller]")]
    [ApiController]
    public class UnitOfWorkEmployeeController : ControllerBase
    {
        private readonly ILogger<UnitOfWorkEmployeeController> _logger;
        private readonly IUnitOfWork _unitOfWork;

        public UnitOfWorkEmployeeController(
            ILogger<UnitOfWorkEmployeeController> logger,
            IUnitOfWork unitOfWork)
        {
            _logger = logger;
            _unitOfWork = unitOfWork;
        }

        [HttpGet]
        public async Task<IActionResult> Get()
        {

            var employees = await _unitOfWork.Employee.All();
            return Ok(employees);
        }
        
    }
}

Note: If you need more details steps reagrding the best practice and implementation you could have a look here in this thread

Hope above steps guided you accordingly to implement your requirements.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.