ASP.NET Core 2.0 Vue.JS Starter Guide

Learn how to install and configure a ready-to-use ASP.NET Core 2.0 Vue.js template, including cloning, opening in Visual Studio, restoring packages, and exploring the client structure and Vue.js devtools.

Explore why Vue.js is approachable and high-performing, with components, routing, and state management, and review available resources and real-world performance comparisons with other frameworks.

Learn how single-file components bundle template, script, and style to create reusable blocks, reference across an application, and render them via routing in a Vue.js starter setup.

Explore the data section to define component properties, including strings and complex objects, access the value property, and update it, to render some values.

Explore templates with mustache templates to bind data from objects to the dom, including nested data, string interpolation, and expressions, with automatic dom updates as data changes.

Learn to use Vue directives to conditionally render, bind data, and interpolate values with v-if, v-bind, and v-on, including shorthand forms and v-once to preserve state.

Master databinding in the ASP.NET Core 2.0 Vue.JS Starter Guide by binding properties to elements, dynamically applying CSS classes and attributes, and leveraging hot reload for real-time updates.

Master two-way binding with the v-model directive to sync UI elements—from text box, checkboxes, and an area to buttons—with data properties, enabling real-time updates between the template and script.

Define routes and nest a child component inside a parent, using router-view to render the nested view. Navigate with links and pass and display route parameters like an id.

Define methods as component properties, bind them to click events, pass parameters with proper signature and string interpolation, and call other methods to update messages.

Master axios to call, post, get, and delete data from the UI using a Vue.js app, installing the library, wiring it to views, and handling json responses.

Explore iterating through objects and lists in templates using the v-for directive, access each item and its index, render properties with interpolation, and use ranges with v-if for conditional results.

Explore how computed properties in a Vue.js component cache results and update only when underlying data changes, with optional get and set to modify values, and observe updates.

Learn how to share functionality across Vue.js components using mixins, defining data, methods, and lifecycle hooks in a reusable module. Import mixins and use their data and methods.

Create and use custom directives in Vue.js by binding values, handling lifecycle events (bind, inserted, updated, unbind), and applying actions like changing an element's background color.

Master Vue.js filters by creating local and global filters to transform bound data, capitalize or lowercase values, and understand how sequential filter order changes the final result.

Explore how to implement view-level transitions and animations using transition elements, CSS classes, and state toggles to animate elements as they enter, leave, or change color.

Master Vuex state management in a Vue.js app by creating a store with mutations and actions, using mapGetters and mapActions to access state, and persisting a counter across pages.

Discover Dapper, a lightweight micro-ORM for .NET that delivers strongly typed query results with fast performance and easy integration with other frameworks, install via NuGet including Dapper.Contrib.

Design database tables for an e-commerce ordering system, connect customers, orders, and order items, and map these relationships to c# classes.

Create entity classes in the models folder to represent each table, generate them from a C# and SQL tool, mark the id as the primary key, and avoid system tables.

Configure a default database connection, inject configuration via dependency injection, and query the customers table to return a list of customers for display in the UI.

Explore using Dapper to query a one-to-one relationship between customers and orders, joining tables, mapping results to order and customer objects, and returning a mapped list.

Learn how to fetch one-to-many relationships with Dapper by linking orders to multiple items, using a simple approach to map order items to each order and execute queries.

Execute commands against the database using dapper with parameterized queries and anonymous types, and learn how the execute command and command type (text or stored procedure) determine rows affected.

Use the dapper contrib get extension to retrieve a single order by id and fetch all orders, mastering entity mapping with the key attribute.

Demonstrates inserting data with Dapper Contrib, using single or multiple item inserts, returning new IDs, and updating the orders list in ASP.NET Core.

Learn how to use dapper contrib update to modify a single item or a list via the connection, updating an order total to 1000 and all orders to 2000.

Learn to perform delete operations with Dapper Contrib, including single-entity, multiple-entity, and all-record deletions, plus async variants, using a connection and id-based or conditional filters.

Explore Dapper Contrib data attributes to map models to database tables, including table, primary key, and computed or write attributes.

Explore how RESTful services connect web servers to internet-enabled apps, enabling data exchange via controllers and endpoints using HTTP verbs like get, update, and delete, and understand benefits of approach.

Create API controllers in ASP.NET Core 2.0 using the template, expose get, post, put, and delete actions. Use a base controller to share common code and centralize attributes across controllers.

Learn how to implement a get method in a controller using the get attribute and template, including an id parameter and a get all items route to retrieve data.

Learn how the post method adds data by sending a request body to the items endpoint, creating an item (id, name, price) via the rest layer for any client.

Use the put method to update existing data by sending the id and updated item in the request body, enabling an audit trail.

Learn the delete method, deleting by item id or by item data, and perform bulk deletes with a list of items, demonstrated via Postman.

Fetches all items from the get /items API and renders them in the store page, displaying each item's name and price with basic error handling.

Add a new item by posting item data to the REST API, using the add component to collect name and price, and update UI to confirm the item was added.

Use the boot method to update items by loading the item by id, binding its values, and sending the updated object to the update extension method in the items controller.

Learn to delete an item by id with an API call, passing only the item id rather than the entire object, and confirm the item disappears from the store home.

Demonstrate how JWT-based authentication protects private data by encoding header, payload, and signature, verifies tokens, and enforces admin permissions.

Set up barrier-based token authentication in the ASP.NET Core 2.0 Vue.js starter: generate a unique key, configure startup with barrier schema, and define issuer, audience, and signing key.

Generate a jwt by configuring claims such as email, user id, and name, setting signing credentials, issuer, audience, and expiry, then protect actions with authorization.

Authenticate users with JWT in Vue.js by posting email and password, receiving and storing a token, and sending it in the authorization header to access protected endpoints.