Build A TodoList with ASP.NET and Electron Vue

Install dotnet core 6 by downloading the correct release candidate installer for mac arm64 or x64, or windows x64, then verify the installation with dotnet --version.

Install Visual Studio 2020 preview or 2022, with the Community edition free for open source contributors, and the developer version of SQL Server to complete this tutorial.

Learn how to connect to SQL Server, create a new database named 'to do app', and prepare an empty database for building your todo list with ASP.NET and Electron Vue.

Create an ASP.NET Core Web API project in Visual Studio 2022 using .NET 6, then inspect controllers to marshal data from a database or data service for the to-do app.

Open the NuGet package manager, install Entity Framework Core and Entity Framework Design Tools, and enable ORM-based database connections for the ASP.NET TodoList app.

Learn to connect to a database by creating a connection string from the server explorer, saving it in app settings.json under connection strings named default, and wiring it in program.cs.

Create a todo model with id, title, and completed, and a todo context with a dbset, then configure sql server and register the context.

Create and apply an entity framework core migration to mirror your to-do model in the database. Use the NuGet package manager console to add the migration and update the database.

Create an ASP.NET Core API Todo controller, scaffold and wire up an Entity Framework context, and implement standard CRUD actions to manage todos in the database.

Develop async methods to get todos using Entity Framework Core, including a GetTodos list with context.Todos.ToListAsync and a single Todo by id with Find, returning not found when absent.

Implement an asynchronous post method to save a to-do in the database with Entity Framework Core, add it to the context, save changes, and return the created id.

Update todos using entity framework core in an ASP.NET app, applying async update, context entry to state modified, and handle concurrency with save changes and not found errors.

Delete a to-do item with Entity Framework Core in an async controller action, return not found or no content after removal and save, and test with Postman or Insomnia.

Run and test an ASP.NET Core RESTful API for a to-do app, demonstrating create, read, update, and delete operations via Insomnia, and verify data persistence in the database.

Learn to set up an electron vue project for a todo app using vue.js and the electron V8 builder, scaffold with vite, and run and modify main and renderer code.

Install and configure the Element Plus UI library for a Vue.js app, import it, and switch a button to primary, while enabling hot reloading on the dev server.

Build a todo list component with Vue and TypeScript, load todos from a local API on mount, and add create functionality using Axios, with future support for update and delete.

Implement update, delete, and load actions for todos, wiring ids and messages for canceling deletes, and then begin building the ui to display the list.

Import the to do list component into the app file to render the user interface. Center the column and offset, then await the loaded todos.

Create a todo list table with a title column and an operations column, wire a template and scope, and prepare to explain why no data is shown yet.

Apply a security policy to block unwanted traffic and enable visible to-dos by configuring HTTP/HTTPS rules in the index.html metadata tag, then test in the browser or Electron app.

Create a delete todo button with a danger style and a confirm dialog, featuring yes/no prompts and an info icon, then refresh the list after deletion.

Create a reactive todo list form component in Vue by defining props, validating the title length, and submitting a todo object with title and completed, then resetting the form.

Identify and fix a not a function error by passing the submit todo as a prop, enabling submitting todos, deleting them, and making changes in the to do list.