Adding Data to an ASP.NET Core Website | ASP.NET Core 101 [3 of 13]

Intro: Project status and need for data

Hey, we're making an ASP.NET website in this ASP.NET 101 series, and we did a Hello World. Yes. I'm feeling pretty successful already. That's pretty great. Self-esteem. Self-esteem is an all time high. Yes. 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. Where are the crafts? That's cool. We have no crafts, that's a problem. We also have no database. Not good. So data comes in lots of different forms. We could make a database, we could find a website that would give us database.

What is a database and options

Well. What is a database? Database is where you store all that information that you're going to go and retrieve from it. It could be a static database, which doesn't change very often. It could be a SQL Server. You hear things like that, or SQLite. We also can use a file as a database. Yes. I feel like databases you can do a whole new tutorial just on that alone. So maybe we should focus on a file. We should do that. Let's do that will 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. What do you know? So if we go over to our application, we need to find a place to put that. I'm not really sure what the first place to put it is.

Project folders: Models and Data file placement

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 wwwroot, and we've got models. So I've got a folder where I'll put my models, and a model is a C# file, right? Yes. 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. 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 I click and say "New Folder", and I'll just put data here. Make sense. Everyone's system is different. I realize that this might be non-standard or not what you're used to doing but it's a way- Yes.

• that people can do stuff. So this is a file. I'm noticing the extension is different from the usual HTML and CSS that we've been seeing recently. So this is a JSON file. Exactly yes. This is JSON file. So that's JavaScript Object Notation. It's 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.

Mapping JSON to C# objects and creating Product model

Yes. So we can 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#, we talked about lists and collections of objects. With Kendra, I did a bank, and 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 maybe our object will be shaped like this and maybe it won't. Also, I 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 me make. That's a folder. All right. I'm going to right-click and "Add" a new class. What should we call that? We have a bunch of products. Yes. Plural. Why don't we call it "Product" singular. "Product" singular. Notice this is interesting because the folder was called Models, I ended up getting the three name space there. So convenient. That's cool. All right, public class Product. Now, one thing I could do is I could actually right-click on this tab. You see this tabs that show all of our different files? I can right-click it and I could say New Vertical Tab. I could have it next to my thing. So I got my code here, and I got my database over here. So I'm just going to- put that off to the side, just so we can hear what's going on. All right. This is the boring part, right? Yes. Public string Id. Yes. Exactly thank you for looking at your watch. I've heard of something else that exists in Visual Studio called Code Snippets, maybe if you try typing in "Prop". Right, because we're making properties. Yes. You should get a nifty the template. Look at that. Yes. Code Snippet for property. So prop, Tab, Tab, string, Tab, Tab, Maker, Enter, Enter, prop, Tab, Tab. Aren't we having fun? Yes. Enter, Enter, prop, Tab, Tab URL, that's a string. String, Tab, Tab. Yes. Now the pressure is on. You see when he put on your, get to it playlist on Spotify. Well people are like is he really typing or is this real. I don't know. He's talking while he's typing. Right. Do it in your sleep. I don't know we've got some ratings. We're going to talk about ratings a little bit later. I said image though. See, look at that I said image instead of- That's interesting how are we going to make sure that's gets an app correctly?

JSON property mapping, attributes, and ToString override

So this is a JavaScript file, and this is a C# class that represents that data. 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, and then map that way. 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. It's all confused, it's squiggly and maybe I spelled it wrong. What's going on? Well I can use the light bulb and it says, look, I know about that. That's inside System.Text. Remember that we use system.this and system.that, so helpfully, Windows Visual Studio rather says cool, and then adds up for me. Okay. We call those refactoring tools in Visual Studio. So that was a refactoring. Yes. So if you're 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 because it might be of help. Hopefully, the light bulb will have something helpful for you. Yes. So I'm going to say that the JSON property name is img. What we're doing is we're mapping img image. Cool. Yes, because I didn't want to abbreviate the img. Yes. I don't want the shape of my database to affect maybe the shape of my objects. So that's a good call. 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. 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.ToString, 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- This is interesting if you say, ToString, ToString is actually a thing that objects already have. So we have to go and make a public one that is an override, because objects get a ToString for free, and we're doing our own, aren't we? Yes. 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 going to use. Right. We're overriding that one. Okay. Yes. Now at this point, I suppose I could go like this, and I could type in like ID plus, Maker plus, I could use a StringBuilder. But that's redundant a little bit. Okay. 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 could say JsonSerializer. This is another one where they're going to go and say yes do you want to use this. I think I do? Systematics so the helpful light bulb, appreciate that. Yes. We're going to serialize it. What does serialize mean? Yes, that's a lot. So serialize is you're taking all of this object information, and you are converting it back into the text that will be part of the JSON file. Right, and serial means to do something one after the other. So to serialize is to go and take product and product and product and all the properties and the properties, and one after the other make a nice String. Yes. We're going to serialize that, and that wants to know about our type. That's what this type is. What are we serializing? We talked with Kendra about have you've seen the little cup, that's a cup of tea. See. Nerd humor, loving it. So we're going to say that is a type of product. We are 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. I can do that. But when you have a message that's just one line, you can do this. This is cool. I just learned about this. You don't even need these. You don't even those. What? No brackets. Rocket ship. Oh. Look you are on the rocket ship. What. So that now we can do that now. Why is it mad? I don't know. Well, it's mad because we're actually returning a String. Yes. So ToString, literally ToString. 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 curly braces. Make sense. I believe that's linked syntax, that greater than or equal terms down here? Yes. You'll see that every once in a while. 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 the rocket ship because it looks like one. Yes. But it's been shorthand if you don't want to take up all the space with nothing but brackets. So here's the funny part. I'm going to go ahead and just hit Control F5 and run my application and you're going to note, Control F5 of course start with a debugging, that it still looks exactly the same, it compiled, it didn't give me any errors, but it does nothing. Yes. 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. We didn't break it. We did something. Right. That's our motto.