Introduction
In our previous project we dove into Microsoft’s Beginner MVC Tutorial and created our first full-stack application. In that app, each action has a dedicated page. However, what happens if I want to have a single page application and not open a new page every time they want to create, delete or update their data? This is what we will build now.
For this project we will pull from a few different resources. We will be introduced to “minimal APIs” and working with “Fetch API”, which will help us with moving data around asynchronously
Get ready, now it really gets fun! You’ll finish this project understanding how C#, Javascript and Bootstrap work together. From here, the limit to what you’ll be able to build will be close to the limit of your imagination. 😁
Requirements
- This is an application where you should manage a todo list.
- Users should be able to Add, Delete, Update and Read from a database, using a SPA (single-page application). The user should never be redirected to a new page.
- You need to write a minimal API to connect the front-end and database.
- You need to use the JS Fetch API from your front-end to call your minimal API in the backend.
- You need to use Entity Framework, raw SQL isn't allowed.
- You don't need a navigation bar. No menu is necessary since you'll only have one page.
- Once you execute any operation, the todo-list needs to be updated accordingly.
- Your data model is only one table with to-dos. You. might be tempted to create more complex data-models (categories of todos for example) but avoid that for now. We're focusing on the front-end.
- When deleting, present an 'Are you sure?' confirmation message
- Upon updating, present a message saying the record hasn't been updated until the user submits the new todo. Then present a success message.
Resources
Here are a few resources that might be helpful.
Tips
- When learning to connect JS to your MVC App, take a step-by-step approach: First try to call a simple alert, then try to send data to and from the controller into JS.
- Use your browser dev tools to set breakpoints in the JS to help you debug when working together with C#.
- The tutorial about calling APIs with JS uses MongoDB. If it adds too much confusion, just connect your App to a SQL server or SQLite solution instead. The focus right now is on the front-end.
