>> Hey there, welcome back.
My name is Jeff Fritz and this is another Blazor 101 video.
This time we're going to talk about managing state
in-between pages as we're navigating our application.
It's one thing to be able to pass
parameters between components and pages
or to fetch some information from
a database and save some information into the database,
but what happens when I just want to manage
the state of what's in your shopping cart,
or what's currently happening with
the wizard of data that you're filling out,
you're filling out that form and
you're going through steps 1, 2,
and 3, and I need to carry that state through from page to page,
or from component to the next component to the next.
How do I do that? How do I manage state across
pages and components inside of a Blazor application?
In this video, we're going to go over to
the code and we're going to take a look at how we can do that,
how we can work with, in this case,
a shopping cart and pass
that data back and forth between various pages as we
navigate the application so that
our application doesn't forget what's in your shopping cart.
Let's go take a look. Here I am
back in the Blazing Pizza sample application.
We've got this really neat application that
lets us place orders for a pizza.
If I go and start ordering a pizza here,
I'll order my pepperoni pizza.
Let me add some mushrooms to that pizza.
There's my order.
But if I click off this page and go look at,
what are my other orders?
What did I order last time?
Maybe there's some orders listed here.
When I go back to my Get Pizza page,
it's forgotten the order I started.
How do we manage that state?
How do we have some application state that we
pass along from one page to the next,
be able to reference and use that throughout our application.
What we can do is using
the injected application state using a little bit of
dependency injection and a custom class
that we share through our application.
Let me go over to the code and show you how you can
implement one using the Blazing Pizza as
an example to define that pizza order
that we're going to maintain as we go
from page to page in the application.
This is the order state class.
This contains the information about the state of
our cart of the order that we're putting
together with the various pizzas that we're going to
be ordering and hopefully getting delivered to our home.
You see it has an order property there that
defines exactly what's in our order.
The order object has a collection of pizzas that belong to that.
We also have the pizza that we're currently configuring,
so that if you click away from
the Configure dialogue, we can return.
It still remembers the toppings
and items that you wanted to configure,
you wanted to customize for your pizza.
This is fine and it's got a couple of methods there,
so it remembers the interactions with the page.
But Jeff, how do we pass this from page to page?
Where does that wire up?
How does that plumbing happen inside the application?
Well, we can use the existing dependency injection features
of Blazor to make this object available for the currently
logged in user as they work from page to
page and inject it into each page or component as necessary.
Let me head over to the program and show you how it's configured.
Here in the WebAssembly version of Blazor,
we're adding on Line 17,
the order state as a scoped object.
In this way, there's going to be one order state created for
each time that the browser is
opened and interacted with this application.
Since Blazor WebAssembly runs entirely within the browser,
nobody else will have access to this order state object.
It's persisted in-memory for
this user and in-memory of the browser.
As they're navigating around their Blazor application,
they'll get the same order state object
returned to them wherever it's requested.
This doesn't quite cover all the scenarios.
If our user navigates away from the Blazor application,
if they refresh their browser,
it will forget what's in that order state object.
But as they're navigating from page
to page and doing our typical workflow,
that order state will persist.
If we go over to our Index page,
you'll see on Line 3 we inject
the order state object with the property name of order state.
In this way, we can grab that current order,
we can grab that current configured pizza and we
can decide exactly how to interact with them.
As that order state is updated,
it will stay in memory and stay
persisted so that as we navigate from page to page,
our order state contains exactly what we last did with it.
Let me run this application now and show you
how even though we're working with order state now on Line 12,
it remembers everything for
our pizza as we're interacting with it.
Here we are back in the Blazing Pizza application.
I'll click on "My Pepperoni Pizza" I want to order,
and I'll choose that I'd like some mushrooms or my pizza.
Let's add that to My Order. There's My Order.
Hey, let's go over and look at
the other orders that I've placed previously.
Oh, I haven't placed any previously at this Blazing Pizza.
Let me go back and let's see if we can customize further.
There's My Order and it remembers
my pepperoni pizza with mushrooms on it.
All of this because I just added that injective order state.
It remembers it as I navigate from page to page.
Thank you so much for watching.
I hope you stick around for more of our videos.
We're going to be talking about Blazor and forms
and validation in our next few videos.
[MUSIC]