 Hello, this is Christian. In this video, we'll take a look at base page in ASP.net. Now in order to understand how base page works, why it works, you have to understand two very important concepts. First one is the object-oriented programming concept of inheritance. So here is an example of that. So we have four classes here. The home page is the actual page that loads the content to your web page. This class here inherits the page class, and then this page class inherits the template control and up the chain here. So this is inheritance. So the lower class here is the child class. The upper class is the parent. So that's how it works. Now the base page is a page that is inserted between your home page and the page class. So the purpose of the base page is to collect a series of functions that you can use on the home page and also other pages. So these are the common features or content that you want to render on the page. So the other pages can also share those functions. So that's the whole idea. The other thing you want to understand is that the ASP.net web page has a series of functions or events behind the scene. So ASP.net web page has these kind of phases. If you look at the left column, there are about seven phases. So when a user comes to the web page, the first phase runs and then these are the sequence of events occur. We'll look at the middle column here, the page events here. All these orange boxes here represents a particular event handler or function that executes when the page runs. So if you go down here to like the middle bottom here, there's a function called prerender and then it says prerender complete. So let's say that you want to check to make sure that every page that we create in ASP.net has a page title. Other things that you want to check are maybe does it have a theme, does it have a JavaScript file loaded or other things on the page. If you want to do that, then that is where you want to put that right here in this function called prerender. And then once you check that and you can update the pages with the render content before it renders to the page and so on. All right, so let's go and create a base page for our application. Okay, so this is a project that I've been working on. If you haven't built the project yet, you can watch the video. The link is in the upper right corner or also included in the description below. So I want to run this program first and see what it looks like. So here is the page that we decide. It has the title page for the home page. The title is in the tab over here. If I go to the about, notice that it doesn't have a title page. It just used the file name. Same thing with the contact. Okay, so I'm going to go and write a function to detect the title page. If it doesn't have one, then I'm going to provide a default title page for that. Okay, so in the code here, I'm going to go into the about page over here. So notice my about page has the title with the empty string inside here. For some reason, when I try to detect this title, it does read that has a zero length, but if I try to replace it, it wouldn't work. I'll show you what that means. So we go to the about cs file. Right in here, I'm going to create a function called page underscore prerender. And then the signature would be the same as above. Okay, now inside this prerender function, I'm going to check the title. So before I do that, for example, if I do a, you know, this.title, is the title page is equal to about me. If I do that, okay, because for whatever reason, I don't know why yet, because I already provided the title, even though it's empty here, if I try to override that with the title about me, it would not let me do it. So let me run this as you can see. Okay, you can see that doesn't change the title page here. But if I go back and if I change it, if I remove the title page completely, or if I put it something else like just a and go back to the browser and refresh it, you will see that now it works. Okay, so if you figure out why that's not working, let me know. But we're going to detect in the code so that if I don't have the title page like this, if it's empty like that, I'm going to render a default title page. So that means I'm going to say something like if this I can do just use a string function string if it's no empty of this title, if that is true, then and only then I'm going to replace this title with the title of this file, which is it's going to be this that get type function that name. Okay, that will give you the like ASP X, I mean that about and then instead of the dot, it's going to use the underscore ASP X. Okay, that's going to be the title for this page. You can do some fancy stuff like extract only the word about and then replace that. But for now, this is sufficient. Okay, I'm under the same thing for the other pages. So I'm going to copy this and then add it to the contact page as well, right in here and then one more for the default. So you can see that we done and see already here, right? It's the same function, but I have to do that for every file I use. So now in my contact page, I'm going to remove the title and then the default page, I'll leave it as is. So we know that it's working, right? Now if I go and then rerun this again, because I made some changes to the source code. So the whole page has the title already. So it doesn't do anything about that. The about page, you will see that it changes to the about score ASP X and same thing with the contact. Okay, so that is how you change page title. And because you can see that we didn't see my code, imagine I have to have 100 files, right? You have to do that every time. So instead of doing that, that is where the base page come into the picture, because all of these files have the same function. I would just put that into another file and then just, you know, link to that page. To do that, you need to create a folder here. And it's ASP.net folder called app code. Okay, so let me close this down here. And the app code folder, I'm going to create a class. It needs to be inside the app code here. And a class called the C sharp class, I'll just call it base and call it base page or whatever you want to call it as a matter. Okay, so this is going to be the parent class of the other classes. So therefore I don't need the name space to be app code. If I don't, if I, if you do this with that app code, because it's different from this, this name space, you will have to import it, right? What I mean is like, if I go and change that to the base class like this, it's not found. So I have to change it. I have to import the base class. It doesn't have me here, but you have to import it. So I mean the ease of fix is just don't use the same, a different name space. I'm going to remove it. So it's a same name space so that it's visible. Okay, so now my default and other classes is still not visible because one thing you need to change, right? So over here in the C, the base class here, right click and open the property. And you want to make sure that this should be down here at the bottom. You want to make sure that the build action is not content and it should be compile. It's part of the compilation bundle. Okay, otherwise it's not going to be recognized. So now, because this should have named space and it's part of the compile bundle, now my cs file here now recognizes that. Okay, so now then all I have to do is move this function. Okay, copy that or cut that out and put it into the base class right in here. So now I need to then change the base class here to inherit the super and the system web UI, that page class. So basically, I'm replacing this with what was before, right? The page here, I moved that over to the base class and then this will inherit the base class instead. So one below the page class, same for the about. And because I already had this function, I don't need this in here anymore. Okay, save that the default, I don't need that either. So save that and then the contact also don't need that. So you can see the efficiency already, right? So save that. And then if you run it, it should still work just like before. Okay, so here's the homepage about the title here and the contact and so on. Okay, just to make sure that it really does work, right? Let's go to the contact page. I mean the front page here, add a title. We'll call it contact me page. All right, so the contact should have the title and not the the file name. And because I'm just changing the view page, I don't have to render. So here we go about and then contact change to contact me. Okay, so that is basically the idea of a base page. Thank you and have a great day.