Adding data to an ASP.NET Core website - ASP.NET Tutorial

- Hey, we're making an asp.net website and this "ASP.NET 101" series. And we did a Hello World. - Yup. - I'm feeling pretty successful already. - That's pretty great. Self-esteem is boosted. - Self esteem is an all time high. - Yup. - Let's add some data to our website. Now, when we last left our heroes, we had made the Contoso Crafts website. It's a local website, and all we did at this point, was we successfully changed that code. - [Leslie] Cool, but where are the crafts? - [Scott] It's cool. We have no crafts, that's a problem. We also have no database. - [Leslie] Not good. - [Scott] So, data comes in lots of different forms, right? We could make a database, we could find a website that would give us database. - [Leslie] Well, what is a database, right? Database is like where you store all that information that you're going to go and retrieve. - Mm-hmm. And it could be a static database where it doesn't change very often, it could be a SQL server, you who thinks like that, or SQL Lite, we also can use a file as a database. - Yeah. And I feel like databases, you can do a whole new tutorial series just on that alone. So, maybe we should focus on on the file- - Let's do that. We'll make sure that we have a database tutorial series, but for now, let's use a file. Good idea! So, I have one on my desktop called products.JSON. - [Leslie] What do you know? - [Scott] So, if we go over to our application, we need to find a place to put that. And I'm not really sure what the first place to put it is. - [Leslie] Well, why don't we make a models folder. And this is where we can hold all of our products and any other related assets, or contents that we want to show the user on our site. - Okay. So, right now we've got a folder here. I just right-clicked and I said models. So, on the right-hand side here, we've got a number of different folders. You can see we've got pages, we've got www root, and we've gotten models. So, I've got a folder where I'll put my models. And a model is a C-sharp file, right? - Yeah. - And it's going to describe what a product is, or something like that, but where's my data? Well, I've got this file called product.JSON. And you had said in the first video, that we can put things that can be served here. I'm just going to go and cheat a little bit, and then right-click and say new folder, And I'll just put data here. - [Leslie] Makes sense. - [Scott] Everyone's system is different. I realized that this might be non-standard, or not what you're used to doing, but it's a way. - Yeah. - That people can do stuff. So, this is a file. - [Leslie] Well, and I'm noticing the extension is different from the usual HTML and CS that we've been seeing recently. - Exactly. - So, this is JSON files. - This is JSON files, that's JavaScript object notation. It's kind of a database. It's basically an object that describes the shape of some data. And we're using it in lieu of a database or as the poor person's database. - Yeah. So, we can like extract this data from this JSON file, and then convert it into the kind of object that we want to see. - That's a great point. In our previous videos on C-sharp, we talked about lists and collections of objects. And with Kendra, I did a bank, in the bank account had transactions. With you, we're going to have products. And each one of these is a product, but you see that there's some abbreviations in there, and you know, maybe our object will be shaped like this, and maybe it won't. - So, I kind of want to name some things differently. - That's a good point. So, let's do this, let's go back to our models that you had make. That's a folder. - [Leslie] Right. - I want to right click and add a new class. Okay. And what should we call that? We have a bunch of products- - [Leslie] Yup. Why don't we just call it Product, singular? - [Scott] Product, singular. Okay. And notice, this is interesting because the folder was called models. I ended up getting the free namespace there. - Yeah, so convenient. - All right. Public, class, product. All right. Now, one thing I could do, is I could actually right click on this tab. You see these tabs that show all of our different files? I can right click it, I could say, new vertical tab, and I could have it next to my things. So, I got my code here, and I got my database over here. So, I'm just going to kind of put that off to the side, just the way we can kind of see what's going on. - Mm-hmm. - All right. Now, this is the boring part, right? - Yeah. - Public, string, ID. Yeah, exactly. Thank you for looking at your watch. (Leslie laughing) - You know, I've heard of something else that exists in Visual Studio called code snippets. - Mm-hmm. - Maybe if you try typing in prop- - Right. 'Cause we're making the properties. - Yeah. And you should get a nifty template that- - Look at that? - Yeah. - Code snippet for properties. So, prop, tab, tab, string- - Look at that? - Tab, tab, maker, enter, enter, prop, tab, tab. Aren't we having fun? - Yeah. - Enter, enter, enter, prop, tab, tab, URL. Actually, that's a string - Go, go, go! - String, tab, tab. Yeah. Now, the pressure's on. Tab- - This is when you put on your get-to-it playlist on Spotify. - Well, people are like, "He's he really typing that or, you know, it this real?" "I don't know, he's talking while he's typing." - Right. Do it in your sleep. - I don't know. Like we got some ratings. We're going to talk about ratings a little bit later. - Yup. - Does that look like mine? - Yeah. Although, you know- - I said image though. See, look at that? It showed image instead of- - That's interesting. How are we going to make sure that gets mapped correctly? - Yeah. So, this is a JSON file, this is a JavaScript file. And this is a C-sharp class that represents that data. And I want to have lists of products. We need to map those two together, you're absolutely right. How can we do that? - I've heard of something called JSON property, which is an attribute that you can stick at the top of your property. - Mm-hmm. - And then map that way. - And we've talked about attributes before, in other videos. It's basically a post-it note that you stick to a property. But if I type it, it doesn't say anything, it doesn't know anything about it. - Yeah. - It's all confused, it's squiggly, maybe I spelled it wrong. - What's going on? - Well, I can use the- - Light bulb. - Light bulb. And it says, "Look, Oh, I know about that. That's inside system.text." Remember that we use system dot this, and system dot that? So, helpfully, Windows, Visual Studio rather, It says cool and then it adds up for me. - We call those refactoring tools in Visual Studio. - Mm-hmm. So, that was a refactoring? - Yeah. So, if you're ever feeling stuck, if you see that red or sometimes green squiggly line, then check out the light bulb that's most likely going to be next to it. - Hopefully, the light bulb we'll have something helpful for you. - Yeah. - So, I'm going to say that the JSON property is IMG. And what we're doing is we're mapping IMG to image. - Cool. Yeah, 'cause I didn't want to abbreviate, B. - Yeah. I don't want. I don't want the shape of my database to affect maybe the shape of my object. So, that's a good call. - And another thing that I'm thinking of, back in my college days, I was always told to put a tostring method in all of my classes. - Yeah. - Tostring is really interesting. Every object or most objects in .NET, have a tostring. So, if you've got a thing, you can say thing dot tostring. - Mm-hmm. - And it gives you a nice way to look at that object as a string. So, you're suggesting that we go and make a public. And this is interesting. If you say tostring, when you're going... Oops! - "Tostrong." - "Tostrong." And this tostrong. (Leslie laughing) Tostring is actually a thing that objects already have. So, we have to go and make a public one, that is an override 'cause objects get a tostring for free and we're doing our own, aren't we? - Yup. We sure are. - Okay. - So, that basically means whatever the default was for that tostring method, we're saying, just ignore that, here's our own version of the tostring method that we're- - Right. We're overriding that one, okay? Now, at this point, I suppose I could go like this and I could type in like ID, plus maker, plus... Like I could use a string builder - But that's kind of redundant a little bit. - Okay. - And then ultimately, what if you wanted to convert all this information back into the original JSON that we want? - That's a good point. I would want a JSON representation of a product. So, let's go and do that. And I can do it two ways. I can go like this, which is interesting, where I have my brackets and I can say, JsonSerializer. And this is another one where they're going to go and say, "Yeah, do you want to use this? - [Leslie] I think I do. - [Scott] It's just in our text with a helpful light bulb. Appreciate that. - [Leslie] Yup. - [Scott] And we're going to serialize. And what is serialize mean? - Yeah, that's a lot. So, serializes, you're taking all this object information, and you are converting it back into the text that will be part of the JSON. - Right. And serial means to do something one after the other. So, to serialize is to go and take product, and product, and product. - Mm-hmm. - And all the properties, and the properties, and one after the other, make a nice string. - Yeah. - And we're going to serialize that, and that wants to know about our type. And that's what this is type is. - What are we serializing? - We talked with Kendra about, if you've seen the little cup, that's a cup of tea. - (laughs) Yeah. - See? Nerd humor! - See?- - Loving it. So, we're going to say that is a type of product. We're going to serialize type of product, and then, what are we going to serialize? - This one. - This one here, the one we got right here. And I can do that, but when you have a method that's just one line, you can do this. This is cool, I just learned about this. You don't even need these, right? You don't even need those. What? - No brackets. - Rocket ship. - Oh, shoot! - Rocket ships. - Oh, shoot! - Look, look, look? Your little rocket ship. So that now, we can do that. Now, why is it mad? Why is it mad? - I don't know. - Well, it's mad because we're actually returning a string. - Yup. - So, tostring. Literally, tostrings. So, we need to make sure we include it as a public, it's now in charge, it overrides everything, and it is returning a string, and then we just happened to be fancy. And we used a little rocket ship here to make that in a single statement, rather than doing it in- - Makes sense. - Calibraces. - [Leslie] I believe that's link syntax, right? - Mm-hmm. - That equal... That greater than or equal type sign here? - [Scott] Yeah, and you'll see that every once in a while. There's, I think they say, it goes to... There's lots of different ways to phrase that, but I think it's fun to call it rocket ship 'cause it looks like one. - [Leslie] Yup. Okay. But it's fun shorthand if you don't want to take up all the space with nothing but brackets. - [Scott] So, here's the funny part. I'm going to go ahead and just hit CTRL + F5 and run my application. And you are going to note controller five, of course, start with that debugging, that it still looks exactly the same. It compiled, it didn't give me any errors, but it does nothing. - [Leslie] Yeah. - So, we're going to need to do another video where we actually take that data and do something with it. - Sounds good. We didn't break it though, so. - We didn't break it. - We did something right. - That's our motto. (Leslie laughing)