Data in a Razor page - ASP.NET Tutorial

- 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 ourselves up for success. As we said before, we could've just splattered 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 a file. - 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 webpage. And if you were following along, just a reminder that you can go up to github.com/dotnet-presentations, we're working on the ContosoCrafts workspace. So that's the code that we're doing here, and some of the gits and places that I'm copying from will all be listed there in the README so you can follow along, or pause this video of course, if you think that we're going too fast. - Really convenient. - Mm-hmm, okay, so let's just take a moment and remind ourselves of where we are at, if that's okay. We've got our data coming out of a file, again, poor person's database could come from anywhere. - Yup. - Our product, that is the C# representation of the JSON, and 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. And 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. - [Leslie] Yeah, where are all the crafts that was promised? - [Scott] 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 pages actually get to use the service. - [Scott] All right, well if we go over here into pages, there's a couple of things going on here. We've got an index.cshtml, and we had changed that early on. - Yup. - That page, I assume will have some crafts that are somewhere, (indistinct) - Yeah, I think it makes sense to stick all the crafts front and center from the moment you get to that site. - [Scott] 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#. - Yeah. - It's interesting because you can type HTML and just do like that, but then as soon as you hit an @ sign, and then there's C#. - [Leslie] It lets you do, kind of, that server side thing that you normally have to create a separate file- - That's a really good point. This is not JavaScript. - Nope. - 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 in the web server. So let's go and do this. Let's, notice that this has a directive at the top, it says @page, hey, this is a page. And then it says, @model. This is interesting. Index and IndexModel. What is IndexModel? 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, kind of 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! - [Scott] So I'm want to click on that, and oh my goodness, what's happening here? - Oh, good, goodie. (laughs) - [Scott] (laughs) Yeah, exactly, you sound thrilled. - Yeah. - All right, so. - About loggers. - [Scott] Well, so, that's a great point. The first thing we noticed that this 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 the friend or the sibling or the buddy, it's the sidecar for our index.cshtml. I could've put that code all in one page, but it's nice to have them separate. - Yeah. - [Scott] And this is another model. We keep seeing this a lot, this is a thing you see a lot where you've got a constructor with some stuff as an argument, and you show the logger right away, I'm like, "Ah, what's that?" Well, logging is a service that is made available to you by ASP.NET. And we're saying, I want to be able to log this to a file, I want to log that to Azure, 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 pretty great. - It is! It's not really intuitive though. It doesn't feel immediately like, "Oh, that's obvious". But if we think about it, what are some other services that I might want? Maybe a JSON file product service. - [Leslie] That sounds like a good idea. - [Scott] So JSON file product service, and remember we have to hit Control + Dot, or 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 product service- - Yes. - And we going to call it here? - Call it product service. - Product service, deal. Okay, this is again important. We're not newing it, we're not, see, a little something, - Yup, - What'd I forget, I forgot my comma. - Stick a little comma. - Yeah, it's always the comma. - The bane of all debugging. - The million-dollar comma. - Yup. - [Scott] What we can do here is just to, just put this on separate lines. I could go and ask for other stuff, right? - Yeah! - If I had 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? - [Leslie] Yeah. - And now anyone who asks for it will get one. This is really cool. - It's pretty sweet. - This is why we did all that work for two. 'Cause you're like, "Where is the class?" - Yeah, what's the point? - What's the point of all this? - Like, startup files? 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 to do that, and anyone can ask for one by just putting in their construction. - It's great, 'cause you're, 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. - Yeah. - That only knows how to do one thing, it's worth pointing out that the JsonFileProductService doesn't even know what's on the Internet. - Mm-hmm. - Uh-huh? Okay, now notice how we take the logger, and we stick it into a variable for loggers. We kind of need to save this JsonFileProductService aside. So public JasonFileProductService. Notice how I start typing, autocomplete- - Pretty great! - Tab, that's my friend, I love my tabs. And let's call it ProductService. That'll be the name of that thing. And our ProductService should, kind of, have products available to it. I mean, our page, rather, should have products, so this is interesting. The index page, as we had said before, should list out products. - Yes. - [Scott] So it's Model, the non-visual part of it, should have a list of products. - So we need to go retrieve those products from that service. - Right. So let's figure out a place to put them. We said that they were an IEnumerable, right, we're going to keep a, - Mm-hmm. - You said it was going to be a list, or whatever. - Yes. - We'll say product, yeah. - What we want. - Now again, a squiggly. Let's do our, we'll help her out. Now we're telling you about models. See, responsibilities. Models are responsible for one thing, services for another. That's cool. Ah, so we have an IEnumerable Product, and then let's call this Products. Plural. - Great. - And then this is a clever thing I saw recently. You can get them, which is cool, but it's a private set. - Oh! - Only, only this class can set them. that way, nobody can mess them up accidentally. - That's pretty nice. - Yeah, 'cause we don't want to have somebody else puttering around in here and messing up our files. - And the fact that it lets you use that in that shorthand. That one is really nice. - Ain't that nice? This used to be way longer. - Oh yeah. - Back in the day, all right. And this is cool. These are special. Razor pages have an idea of an on, something. OnGet, OnPost, OnPut. Those are all words that you hear in the HTTP world. - Yeah. - Right. I usually only hear about Get and Post. - Same, yup, those are usually the most commonly used ones anyway, so. - 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 product service, and- - Okay. - And call, I believe we created a method called GetProducts. - All right. So we'll say ProductsService, or ProductService, which is this variable here. Notice how Visual Studio actually makes it a gray. And then, yep, as you said, look, I hit dot, GetProducts is available. - Great! - I see success and victory coming soon. - No red lines. - No red lines, ship it! - Good sign, yep! (laughs) - Okay, 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! And 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. - Yeah! - [Scott] In the short term, we'll split this up into a couple of videos here. Why don't we do this? For each, people will see, - Product? - [Scott] Yeah, product, thank you. They see a product in Model. This is interesting. Model's a special word. Model.Products. Okay? Foreach product, we saw foreachs before in our C# 1, and then let's just do- - Again, that's a cool razor syntax, like- - Yeah. - [Leslie] You wouldn't normally see all that information if you're just doing straight HTML. - [Scott] That's a good point. And notice that I'm smoothly going back and forth between HTML and C#. - Yup. - So I'm just going to make a header here, and I'm going to say, I don't know, product., what was it, there's a name of product? Sure, we had an ID, Title. How about that? - That makes sense. - [Scott] Let's do Title. All right, so I'm just going to do that. And, notice 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? - Is this some sort of test? Fingers crossed? - I think this, so just a test to see if we get some data, 'cause we've been promised crafts, and it's all been lies so far. (Leslie laughs) So I'm going to hit Control + F5 to go and build that. - Looking good, oh no! - 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 of it that it's happening on, and it's saying "Object reference not set". So ProductService is null. And 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.cshtml, OnGet, let's go back over here to our, where's our page here? - Oh, it's that first one. - Oops, thank you. All right, so, ah, look at this! We had our logger, and we set it, but- - But we didn't set our product service! - Yeah! - It's important. - [Scott] ProductService = productService. Right, so it was in fact, null. So the error that it told us was in reality, which is pretty cool. So I'm going to go 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. - Yeah. - Ooh, ooh. - Oh! ♪ 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. (laughs) (Scott laughs) Why would I want to buy anything off this site? - Hang in for the next video. - Cool.