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.
Again we will be using a tutorial from the official documentation, where 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 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.
What you'll learn
- 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 console.log() to help you debug your javascript code when working together with C#.
- The tutorial uses Mongo DB as data solution. If it adds too much confusion, just connect your App to a SQL server or SQLite solution instead. The focus now is on the front-end, so where the data is coming from shouldn't matter.
