>> All right, we're
getting somewhere in our ASP.NET 101 video series. This is going to be making it work. I think we've set
yourself up for success. As we said before, we could have just split
the data onto the page and declared success but
we want to do it right. >> Right. So in the last video
we created our own service to be able to do all that work for us without having to clutter
up the rest of our code. >> Exactly, we tried to impose the single responsibility
principle on our code. We have a class whose job it is, is to get that data, and if we did it right, our webpage won't even know whether it's a database
or a web service or file. >> It doesn't need to
know. Ignorance is bliss. >> Indeed, so let's find
out if that's true when we try to make it work
with data on a web page. If you were following along, just a reminder that you can go up to
github.com/dotnet-presentations, we're working on the
Contoso Crafts workspace. So that's the code that
we're doing here and some of the gists and places
that I'm copying from will all be listed there in
the read me so you can follow along or pause this video of course if you think
that we're going too fast. >> We're convenient. >> Okay, so let's just
take a moment and remind ourselves of where we
are at, that's okay. We've got our data
coming out of a file. Again, poor person's database
could come from anywhere. Product, that is the C#
representation of the JSON. Then our service that knows how to pick that file up and
turn it into a list of, or in this case, an
array of products. Then we wired it all
up in our startup. So we told ASP.NET all about
our JSON file product service, but we really haven't
done anything with HTML. >> Yeah, where are all the
crafts, that was promised. >> Either there's someone
said there would be crafts. >> Yeah. I think now that
we have the service, now we've got to figure
out which page is actually get to use the service. >> All right. Well if we
go over here into pages, there's a couple of
things going on here. We've got an index.chtml and
we had changed that early on. >> Yeah. >> That page, I assume,
will have some crafts. >> Yeah, I think it
makes sense to stick all the crafts front and center from the moment you get to that site. >> Okay, so this is
called a razor page. That cshtml is C# HTML. It's a really interesting
syntax where it's kind of HTML and it's kind of C#. It's interesting
because you can type in HTML and just do like that. But then as soon as
you hit an at sign, and then there's C#. >> It lets you do server-side thing that you normally have to create. >> That's a really good point.
This is not JavaScript, this is not running in
your browser today. We'll have some things
that will later. But right now, this is all
running on the server side. So the work that's happening is
happening on the web server. So let's go and do this. Let's notice that this has
a directive at the top. It's just at page.
Hey, this is a page. Then it says at model.
This is interesting. Index and index model.
What is index model? Well, there's a little bit of a
lie that's happening over here, and this is interesting,
nobody wants to be lied to. But this is a page and
there's another file, it's like the friend of this
page, it's a buddy page. That's the code behind it, what's called the page model. So here's our page, and then here's what the data looks like when it's about
to go on that page. So I can't output anything as HTML until I have some
objects that describe it. So we need to figure out
how to wire this stuff up. We've got this list of products
and we've got this page, maybe they can know about
each other. All right? >> All right. >> So I want to click on that and oh, my goodness what's happening here? Yeah, exactly. You sound thrilled. >> Yeah. >> All right. >> About Loggers. >> Well so that's a great point. The first thing we notice is
that there's like a logger. What's a logger? I don't
know what's going on there. What this is, is it is a page model that is the friend or the
sibling or the buddy, it's the side card
for our index.cshtml. I could have put that
code all in one page, but it's nice to have them separate. This is another model, we
keep seeing this a lot. This is the thing you see
a lot where you've got a constructor with some
stuff as an argument. You saw the logger right away,
you're like, what's that? Well logging is a service that is made available
to you by ASP.NET. We're saying, I want to
really log this to a firewall and I log that to the Azure
or the Cloud or whatever. You don't make a logger, you ask for one, and you ask for one by simply
listing it in your arguments. >> It's degree. >> It is. It's not
really intuitive though, I didn't feel immediately
that's obvious. But if we think about it, what are some other
services that I might want? Maybe a JSON file products service. >> That sounds like a good idea. >> So JSON file products
service and remember we have to hit Control dot or
we hit the little light bulb, and we let it know about
that and I just got my using statement at the top there. So we'll see JSON file products service and what
I'm going to call it here?. >> Call it Product Service. >> Product Service, deal. Okay. This is again important. We're not knowing it. I forgot my comma. Yeah, it's always the comma. >> They involve debugging. >> The million dollar comma? >> Yeah. >> What we can do here is just
to split this on separate lines. I could go and ask for
other stuff if I have, a service called Foo and
a service called Bar, I could go on and on and on and on. What I'm doing is I'm
declaring to ASP.NET, I need some stuff, go get it. This is super important. Remember before we told
it about the service, and now anyone who asks
for it will get one. This is really cool. This is why we did all that work for two because you're like,
where is the class? >> Yeah, what's the point? >> What's the point of all this? >> Startup file, who cares. >> Now that I know how to do this, I can make all kinds of services, do all kinds of different stuff, image services and services to
do this and services do that, and anyone can ask for one by just
putting in their constructor. >> That's great because again you're
not cluttering your code with all this stuff that you maybe
want to reuse in the future. >> That you want to reuse.
I appreciate that you said that because it's all about reuse and this whole thing has been about making code that I
can use in multiple places. That only knows how to do one thing. It's worth pointing out that the JSON file product service doesn't even know
what's on the Internet. Now, notice how we
take the logger and we stick it into a variable for loggers. We need to save this JSON
file product service aside. So public JsonFileProductService. Notice how I start
typing, autocomplete. >> Pretty great. >> Tab. That's my friend,
I love my my tabs, and let's call it Product Service, that'll be the name of that thing. Our page should have products. So this is interesting.
The index page, as we had said before, should list out products. >> Yes. >> So it's model, the non-visual part of it
should have a list of products. >> So we need to go retrieve
those products in that service. >> So let's figure out
a place to put them. We said that they were IEnumerable. You said it could be
a list or whatever, we'll say our product. Now again not squiggly. Let's do, I'll help her up. Now we're telling about models. See, responsibilities, models
are responsible for one thing, services for another, that's cool. So we have a newer
product and then let's call this Products, plural. >> Great. >> Then, this is a clever
thing I saw recently, you can get them which is cool, but it's a private set. Only this class can set them. That way nobody can mess
them up accidentally. >> That's pretty nice. >> Yeah, because we don't
want to have somebody else puttering around in here
and messing up our product. >> In fact, they're not allowed
to use that in that shorthand. >> Is that nice? >> That is really nice. >> This used to be way
longer back in the day. All right. This is cool,
these are special. Razor pages have an idea
of an on something, on get, on post, on put. Those are all words that
you hear in the HTTP world. >> Yeah. >> All right. I used to only
hear about getting post. >> Same, yeah, those are usually the most commonly used ones anyway. >> So when someone gets this
page, what should we go and do? >> So in this case, I'd want to retrieve the products. So why don't we call
our products service? I believe we created a
method called get products. >>All right. So we will
say ProductService, which is this variable here. Notice how Visual Studio
actually makes it gray. Then as you said, look, I hit dot. GetProducts is available. I see success and
victory coming soon. >> No red lines? >> No red lines, ship it.
So what's cool about this is we asked for a
service available to us. We are holding our products, and we're holding it
in a variable called products here, this is public. So now index pages know
about products, cool. We didn't have to even
change anything here. This model, the model associated with this page now knows about products. Let's see if that is in fact true. >> Sweet. >> Okay, so what do I need to do on this page to actually
output some data? In the short-term, let's
do this, let's try this. In the short-term, we'll split this up into a couple of videos
here. Why don't we do this? Let's do product in model.
This is interesting. Model is a special
word, Model.Products. For each part we saw, for
each is before in our C# 1. >> Again that's like
cool razor syntax. We normally see all that information if you're just doing straight HTML. >> That's a good point. Notice
that I'm smoothly going back and forth between HTML and C#. So I'm just going to make a
header here and I'm going to say product.Title. How about that? >> Makes sense. >> Let's do title. All right, so I'm just going to do that
and I noticed that I put that here and I'm just going to
put the h2 right next to it. I don't even know if
this is going to work. I think it's all just a test to see if we get some
data because we've been promised crafts and it's
all been lied so far. So I'm going to hit Control
F5 to go and build that. All right, so it's going to
go and give me an error, which is really
interesting because it's telling me exactly the line number that it's happening on and it's saying object
reference not set. So product service is null and it is literally pointing to the line
that's wrong. So that's cool. So even though I was writing
code over here, clearly, we've done something
wrong index.html OnGet. Let's go back over here,
where's our page here? >> [inaudible]. >> Thank you. All right. So look at this. We had our logger and we set it. >> But we didn't set
our product service. >> Yeah. >> It's important. >> ProductService
equals productService. All right, so it was in fact null. So the error that it told us was
a reality, which is pretty cool. So I'm going to get and
hit Control F5 or you can hit start without debugging
and let's try that again. Errors are going to happen, it's
part of life. We have data. >> That looks like some success. >> All right, we've got data, so we've made it work. >> Yes. >> In the next video,
we'll make it pretty. >> Yes, because this does not look
very appealing to me right now. Why would I want to buy
anything off this site? >> Hang on for the next video. >> Cool.
