Introduction to ASP.NET MVC in C#: Basics, Advanced Topics, Tips, Tricks, Best Practices, and More

my name is Tim quarry and today I'm going to walk you through the basics of asp.net MVC we're going to start off by identifying what we get ran in a box after examining all the parts of MVC along with how they fit together I'll demo how to create a site and pages manipulate data and more by the time you're done this video you should be able to create an asp.net MVC website on your own before we get started I want to mention a couple of things first of all if you haven't already click the subscribe button on this channel but also in the description you're going to find a link to my mailing list that's kind of important if you want to hear my exclusive opportunities discounts my courses and a lot more stuff and don't worry I don't send out a ton of emails that's not housekeeping for now let's jump right into MVC here I've got Visual Studio 2017 open now I'm using the Enterprise Edition which has a few more bells and whistles but the Community Edition is free so you don't already have 2017 I recommend downloading it just goes visual studio comm for those of you who can't use the latest version of visuals view because of business restrictions or other reasons don't worry what you have access to in Visual Studio 2015 should be about the same for MVC you'll find a few differences but don't worry about it if you're on an earlier version of Visual Studio you'll pricey more differences but the core concepts should probably be the same so let's start a new project and this is the first kind of hurdle with 2017 I want to talk about now talk about a4 but the idea that I don't really like this search templates it seems convenient but really it's not and the reason I say that is because these descriptions down here don't really give a full story of which template you're choosing and with a dotnet core and dotnet standard templates also having the same name seems as some of the ones are currently used to using Dennis makes things complicated for example of IRS search for asp.net MVC I get four options and they look the same if you look to the right - or C sharp to our VB if you mouse over they actually look the same - just don't mess with this is my recommendation it's just too easy cause problems instead good create new project find it here in this case I'm in web so templates visual C sharp web and then you'll see asp.net web application dotnet framework and let's expand that there dotnet framework not the dotnet core and not dotnet core he knows dotnet framework this person right here asp.net web application dotnet framework that's the one you want now let's call this something we can understand let's start with MVC demo no spaces and for our solution we'll call this our ASP demo application so that the project name is MVC demo the solution name is ASP demo application now it's the first thing you get now because my fonts are all there for display purposes for this video this is a bit of a mess now Microsoft has said I submitted ticket for this and they have said that in an upcoming patch this was fixed but for right now this is awful but if you expand us out you'll see that it actually fills in nicely so except for the okay and cancel so we have a few options here now by default we've selected the MVC we could do web forms we could do empty web api and all the rest if you notice down below there's some check boxes here and depending on what I select it changes those checkboxes so what this is doing is it's a series of templates and depending on which options you select it kind of puts things in or takes things out to create a template that's specific to what you want in this case we're looking for the MVC templates and we'll go over with MVC is in a minute but for now note that the web forms that's kind of old way of doing things it's kind of way that it's similar to wind forms in the desktop application side as opposed to APF so this will be that like the wind forms era websites I recommend if you're starting a new application do you not go that direction they're having a lot of strides that have been made with web forms but still they're kind of the old technology I'd recommend against it so we're going to the MVC instead that's kind of the the new way of doing a server-side web site with c-sharp and we'll talk about server side versus client side in a little bit but for now this is where we're going to go now if you notice this next thing Web API I love Web API in fact when I come into a company that the first thing I look for is can we use web api because what web api allows you to do is kind of disconnect your user interface from your business logic and your data and so I love that and we'll cover that in a future video but for now we'll just note that it's here and it's really a partner with MVC notice how these two are both checked when you select Web API these other ones down here we're not going to cover but we'll get into those possibly in a future video but for now MVC now we could still select Web API when web forms were even ad unit tests now I had a couple of questions about the fact I don't do unit tests in certain videos and that's true I don't I'm going to cover you know test ads on their own in a video upcoming but I try and keep my videos very very lean and clean I try to fill them up with a whole bunch of different technologies all at once where you have to learn four and five and six different things in order to get this one thing working instead I try to teach you a piece at a time now I find that's the best way release that I've seen to learn is to learn a piece at a time instead of trying getting overwhelmed with all this stuff so we're not going to add unit tests now but in a future video we'll definitely come back and add unit tests to an MVC application to see how that work because it really is the same whether it's an MVC application or it's a desktop application or even just a class library the other you're going to note is this change authentication button this is pretty cool it allows us to do different types of authentication including Twitter authentication Google authentication Microsoft authentication or Facebook or our own our own authentication so there's a lot of different options you can do with individual user accounts it can also hook up through a Azure Active Directory an Active Directory on site or even office 365 it could login via your Windows credentials so it's some fun things you can do there similarly powerful things and really they make life easy as far as hooking these things up for example it in individual user accounts if you were to select this the code is practically all there for hooking up to Facebook Twitter Google or Microsoft all you need to do is uncomment that section put in your keys and you can tell where I get those API keys for it and then you're good to go and it it's great for authentication so you can have your application and you can say only if you're authenticated only if you're in a certain group when all that fun stuff but for today we're going to say no authentication so we're all set to go but before I hit okay I want you to keep your eye on this lower left-hand corner I'm not trying to be on it but when I hit okay there's going to be some activity down here I see if you can kind of look at that and watch that we'll talk about what it's doing so he okay and right down here there you go adding bootstrap adding jQuery and a whole bunch of different stuff and so if you look at just the the progress bar which is up here right now if you look at that it seems like this loads slowly but if you look in the lower left hand corner you see a lot of stuff happening now some people kind of skip over there or missed that but what that's doing it is loading a whole bunch of different NuGet packages if you're not submitted nougat nougat is Microsoft's package manager and what allows us to do is take a bit of code and wrap it in a package and say this code does this one thing it may you know convert data to JSON that's great if they have one package that does that and for example in this application we have a nougat package for jQuery well jQuery is a JavaScript library and what Microsoft has said is instead of us reinventing the wheel and saying we're going to create our own JavaScript library for doing what jQuery does we recognize that jQuery does things really well and so we're going to bring them in as a package instead us doing ourselves and so what this makes our MVC application be is a modular application it's no longer Microsoft saying here's all your stuff use our stuff don't use anything else of stuff and be separate from the world instead what it's saying is this is what every else is doing so we're going to bring this in as well for example a popular front-end HTML and CSS framework is called bootstrap and bootstrap was actually created by Twitter and was originally called Twitter bootstrap but now it's just called bootstrap and if you go to get bootstrap comm you can see bootstrap in its current form and then the newer versions are coming out and that's a great framework well MVC says you know what that's a great framework so we're going to pull it in as a nugget package and so when you start up your MVC application if pulling all those new packages in to build this completed template so let's see the new get packages they're brought in for this template that's been created so I right click on references and say manage NuGet packages in my installed section notice I have all of these different nougat packages there's a lot for example you look there is jQuery now one thing you gotta note is right off the bat I have 17 updates to do in fact jQuery the version brought in my template is one point ten point two but the latest stable version is three point one point one now you may be like me and when you see updates may be done you want to just hit that update button and in some cases that's not a problem but whenever you see a major version number change met for example that one has changed to a three now that's something to look into there's been two major versions of jQuery since this one dot 10.2 since that's the case there's probably breaking changes in their diet aware of and so I would not recommend you do is I would not recommend that you come to updates select all packages and just say updates if you do that you will create some problems in your MVC template right at the back now with that being said I do think that you should update these packages it's just you're going to figure out can I do an update to the latest version or for example when it comes to coming to jQuery maybe I should go and move to the 1.12 4 which is in the same major version so it's live to you now if you're starting off with a blank template like this or a blank MVC application you could try just updating everything and depending on when you do the download when you do the the template you'll have a different number of updates you'll have different places to update them to and so it may work for you it may not work for me it all depends on timing but if you're starting out from scratch hey it's a great time to try it the other thing to note is sometimes we'll have this box checked now with this box checked notice bootstrap install this 3.0 the version the latest pre-release is 4.0 0.0 alpha 6 well that's an alpha release that's not really something you want to have in a production application but maybe if you're trying things out or learning what the new 4.0 bootstrap has in store for you maybe you want to do that demo application in which case you could check this box include pre-release but I would recommend for any application we're going to be using this in a business environment or where it's going to go into production in some way uncheck this box don't include pre-release notice now that bootstrap said the latest version is three point three point seven that delay is stable you can still do is drop down here look at all the different versions and change versions so if you have this pre-release checked you could say yes I see alpha 6 but I realize do is three point three point seven so you could do that but with this checked and if you said just update all over here it would update to the latest pre-release version that's not necessary good thing so by default I would recommend unchecking match and then going from there all right so that's enough about nougat and about the packages that are installed it's quit quite a few let's look at our template and let's 10-man just talk about what is asp.net and what is MVC asp.net is the umbrella under which Microsoft puts all their web focused tools and applications it uses stand for active server pages which was that web forms thing I showed you earlier but now it's just kind of umbrella under which everything lives and so MVC is one of those things that lives under the umbrella MVC stands for model view controller so three different things models views and controllers and we'll look at all three of those soon notice the controller's folder the models folder and the views folder so look at those in a minute but one of the benefits of MVC is that all of our code which is written in C sharp is compiled and run on the server meaning when the end user views a website that has been built with MVC all they get is HTML CSS and JavaScript they don't get the c-sharp code so all of our business logic we put in c-sharp the end user never has access to that even though they use the end result now one thing a lot of people get confused on or miss entirely is the fact that MVC is a UI centric pattern a user interface it doesn't really talk about or worry about or cover the business logic or the data access or other things that kind of behind scenes now if you've watched AMA other videos you will have seen how I try and push you to put as much logic into your class library as possible and the reason for that is because you can take that same class library and attach it here to this MVC application and connect it up and so you could take an application that used to be a wind form application a desktop application take away the wind form add in asp.net MVC and as long as the logic was in the class library the business logic and data access there's very little work to be done in MVC to get the same result or a similar result but now on the web in fact in my c-sharp application course where we built the tournament tracker application we pushed everything possible into our class library with the intent of changing the user interface which is a win form application be intended to change that into something else later down the road in fact I'll be creating an add-on course to change that win form application to a WPF application they'll also be doing another and course that changes the win form application over to be an asp.net MVC application and so we can do both of those things by just replacing the user interface not the entire application so let's start with an overview of what MVC really does the end of Vienna see now the heart of MVC is the controllers this is kind of backbone of MVC what the controllers do is they link the views with the data so the controller is controlling the application now in our case we start off with a blank template we actually have one controller already built the home controller now if you note there's not a lot of code in here and it's a couple of reasons for that the first reason is because this really is just a sample to get you started but the other reason is because the MVC framework uses some naming conventions to link things up and make things linked together so in this case we have the index action result the about method which returns an action result and the contact method which returns an action results now an action result is usually a view now remember models views and controllers so this controller is saying return this view now isn't say which of you to return it just says return view well where is that view come from well if you have a home controller then it's going to look for the view in the views folder under the home folder in here it's going to say ok this is the index action well there's the index view so--that's will get into view a minute but that's the convention that it uses is it looks at home controller means under views home folder and that takes the method name and says that the page name that's called the action and the result of the action the action result is the display the view in this case it says just display the index dot CSS HTML page so for the about method it's going to say let's say return view it's going to return the about CSS HTML page so this is what the home controller does is it says here's which view to display when you call this method now that's very very simplistic and yet it does have some power behind it and we'll see that in a minute but don't worry if you say that looks really too simple because your your methods here will probably have a little bit more code to them maybe not a lot but a little bit more so we see this index action we very kind of open this page up but let's open up the index dot CSS HTML page the view to see what's in this view and we'll close out the that suggestion for now now if you're familiar you probably should be if you're going to do asp.net MVC if you're familiar the HTML that's all this is for the most part right here is HTML we'll ignore this part we're up here for just a minute but this HTML it's just HTML I mean if you want to change this to an h2 tag you just type to instead and there's an h2 instead of h1 you change it back now familiar to have pages laid out you'll notice something here we're missing HTML normally a complete HTML page has a head and a body and in the head we have things like our CSS and some settings like the page title and other things in the body we have HTML like this we also have our JavaScript references and other things well we don't have that here in the reason why is because of view is just a part of your overall page I read cover where the rest of that stuff is on just a minute but for now just note that where this is just a part of our page so that's a view now unfortunately if you notice over here the models folder is empty now I really wish that the defaults when a template gets created I wish it had at least one method that uses a model unfortunately we don't have that that demo but don't worry I'll walk you through create a new controler new views and using models to connect those views so we'll get there but for right now just note that there are no models here but a model is simply a class with properties that's all it really is in fact let's create our model now just so you can see what it looks like add class where I call this the person model now let's follow the same convention that we're using here home controller well person model so a public class person model and I'll type prop string first named prop string last name prop int age now normally I wouldn't have a property called age that's an integer because age is a changing thing so instead probably has only a date time with me birthday in that way I could always know what the age is based upon where we are in the year but in this case I want to have an integer so it's called age and be good to go with that now let's add one more prop bool is alive so this right here this class is a model as for properties in it it's all really does we could do some default setting so for example you could say equals true default to true for is alive and it can even default the age to something if you wanted to but will default up to 0 which is the default for an integer but now it's at least set and it's only the first and last name but we'll leave those alone so that is a model and we'll use that a little bit to create we create a new controller but for now once we look it is and close it out now I had send that the view is missing stuff there's stuff missing here now I'll show you where that is so if you go into views folder and you look in the shared folder here there is an underscore layout dot CSS HTML if we don't like that this looks like an actual HTML page we have our head up here we have our body here we have some interesting things but it says scripts so at least we know that there's jQuery and bootstrap scripts but is different and I'll cover us in a minute but for now just not--that's list scripts to other JavaScript scripts so this is more like our page well if you notice right down here inside of the body inside of a div called container body content or the class container in body content we have this at render body now what this does and I'll explain the ads in a minute but for right now what this does right here is it takes our view so index dot CSS HTML it takes that HTML code and sticks it here so who want to go to the about page it takes out the code for index from here and it takes the code for about and puts it here and that's how it changes from page to page and so when we're creating a new controller with new views all we really doing is just saying replace this code right here this little bit with this bit of HTML that I wrote with little or big for example the about page very little whereas the index page it's a bit more doesn't matter we have to stick it here now why is that helpful well notice up here and you don't have to understand all the HTML was doing and we'll see what's doing but for right now is note this up here is navigation well all of our navigation is rendered once so it's always it always looks the same no matter what page were on and that's kind of helpful down here we have our footer with a copyright notice and it says copyright date time now year so 2017 is the turn here 2017 my asp.net application that's a copyright because I'm every single page the scripts are on every single page up here we have styles on every single page and so all that stuff doesn't have to repeat it from page to page the page or from view to view to view instead each view just takes its code and puts it into this right here and so takes it as a part and puts it into the whole now lastly I want to talk about before we actually hit play and see how this website renders the last thing I want to talk about is what's called the razor syntax or a cor razor the razor syntax is Microsoft's creation that allows us to mix C sharp and HTML and it's really quite brilliant notice ever receive this @ symbol right here that @ symbol says I am going to bring in some C sharp code but notice how it's mixed right inside of our HTML it's not a problem the rendering engine is smart enough to know when C sharp stuff starts and when it ends so for example down here we have at HTML action link and that passed in three parameters what this does is it creates a link on a page but that link is based upon a path a route so it's the home controller the index action and it says we're going to have the actual text be home now why is it important to have this method right here well normally a link has the full path so HTTP colon slash slash localhost colon 13 297 whatever it is slash all that stuff we don't have any of that here this method takes care of everything including finding out what the link is what the URL path should be all the way to the home controller the index action it's kind of nice little tool to have well that's a c-sharp method but notice right here we have our list item tag and so it says list item and then it has c-sharp code right away so it's HTML code or a CL markup and then c-sharp code and then right back to HTML markup to close out the list item and so the rendering engine says no problem I know how to do this and so it knows based upon the brackets or the spaces wherever else we do it says okay I know this is a transition from c-sharp back to HTML every once in a while this gets a little confused don't worry the way to get around that to tell the rendering engine this is where c-sharp starts and ends and that's what curly braces but the most parts this right in line works really well and so down here we have the copyright symbol and then we say grab the c-sharp date time now year and then it puts that value which is 2017 for this current year they put that right in this spot and keeps going remember that the client never has access to this not even in the code behind in the browser instead all they see is 2017 so big parts of the MVC framework is using this razor engine now notice on the index page we've skipped over this right here there's a curly braces and here was doing it is saying viewbag dot title equals this so it's actually saying here's this property assignment this value that's all c-sharp it knows a semicolon even and so we have as at curly brace and then close curly brace so the razor engine knows that everything between these two curly braces is c-sharp code only now the viewbag itself this is a pet peeve of mine the view value I would recommend that you not use that often use it sparingly once people learn about the view bag they tend to think that it's for everything and it really isn't the view bag should be used as little as possible but what is is this grab bag you can use it for anything you want this dot title property doesn't technically exist until we create it so for example I could say view bag dots notice the dot does not recover any intellisense dot superhero equals Tim which is a little thing to much myself but that's okay so that works it would compile it work because I've now add a new property to the view bag we can put any kind of object in this property you want because it's dynamic now in this case Microsoft has said we want to use the view bag title we go back to layout dot CSS HTML and scroll a top notice here in the head we have a title tag and that's a title for the web page and it says at viewbag dot title - my asp net application so this page can change that title and if we look the about page also changes that title so depending on which view you are going to the title of the webpage will change even though we're not actually changing this right here the actual layout dot CSS HTML because we are changing a bit of it with this viewbag dot title so if you want you to put a little stuff like that and that's great just don't stuff it full of tons of data that makes your application blooood and it slows any web server and it causes some problems so just try and limit that to just little stuff okay so the quick overview we've learned about what razor is we've learned that this right here is just a web part a piece and that piece gets put into this at render body which is razor by the way just call any render body method inside of c-sharp and so our actual web page is rendered off of layout dot CSS HTML and then which view we're looking at index contacts about or a different when we create so let's actually run this right now and just see how this web page looks now right now it says Google Chrome next to the play button it may be different for you in fact if I do the drop down here notice Chrome Internet Explorer Microsoft edge or even Windows Phone I don't have Firefox installed currently so I don't have Firefox news list but if I did that browser would show up as well and so since google chrome is my default browser it gets chosen here which I love chrome so we'll use that the reason this choice is significant is because we can actually open different browsers to test out if they all look similar and this is more of an issue going back a couple years that is now but they're using major problems with rendering from Internet Explorer to Chrome - you know Safari and so the idea of having the ability to display your application on one or more browsers and try it out and switch very very easily was a big deal now it's still an issue but it's not merely the issue that it was you can also say if you say browse with and wait for it there we go we can actually select multiple and say browse and if you do that it will open let's actually close that one that one or not select that one so I could say open Chrome Internet Explorer and edge and will actually open three different windows at the same time and show you the same exact website for now though we're just going to run Google Chrome so I'll run this you get this page right here we're saying okay your application is starting what it starts here is our application now again remember this is bootstrap if you're not familiar bootstrap is a responsive framework meaning when I maximize this page it layout in three different columns down here but if I were to shrink it down notice those three columns are now one stacked column if I shrink it down even further notice as many of our up here that changes to this little drop down here that's just stuff that bootstrap does and it's really cool and it does a lot of fun stuff but for now let's look at our page notice it says up here in the upper left home page because we are on the index page remember index set the view bag we come back over here the view bag that tiled to Paige so now let's go to the about page also note the URL before you continue the URL here is localhost colon 63 564 this right here is the port number and that will change depending on your build because it will change where it's hosted and so don't let that that's just the is Express on your machine running a background a copy or a slimmed-down copy of is which is Microsoft's internet information server which is how they host web pages and they have to have that running in order to actually view a web page now I look at the code behind for this to f12 alright so here is our code behind if I look at this 2017 so if I select that notice it says copyright 2017 not date time now dot year I can't see that I told you that but I wanted to show you that okay so you seem that a URL right now is just localhost but watch what happens when I click the about link it now says slash home slash about and this is the about page also notice up here it says about in my title bar if I say contact it says slash home slash contact go back to home there's no slash anything and this is all about routing so if I wanted a contact page and I knew that it was the home controller it's a slash home controller slash contact page and I hit enter it takes me to the contact page so this is the route to go to to go to contact we can avoid having people have to type those things in by creating these links those that link is one of those action links created by the razor engine based upon the controller and the action now we'll get into how those routes are set up in just a minute but for now I'll go back and look at this page right here now let's make this half the size of the screen and we'll select the visual studio is the other half let's take us out now if I come over here to my index dot CSS HTML page which is the view I can start making some modifications even though I'm currently running I can make modifications to my HTML not my c-sharp but my HTML so for example this asp.net and right up here I want to change that to say demo on YouTube I say that nothing happens the wait there's this little refresh link here if I click that notice it's already refreshing the Chrome browser as a demo on YouTube now I could have come over here and hit refresh over here so why is it important to have this little blink here well right now we only have one browser linked knows a little tooltip there but what if I open this in Chrome Firefox Internet Explorer and edge do you think a lot hit refresh on four different browsers instead I hit the floor refresh right here and will refresh every linked browser you can also the drop down here and see which warehouses there are by going to the browser link dashboard or you can see the actual command ctrl + Alt + Enter to refresh the link browsers next let's look at close us out and see where these routes take us so the routing happens in this app underscores start folder we have bundle config filter config and route config let's go to route config we'll come back to bundle config in a bit so the route config is where the MVC application figures out how it navigates between controllers and actions and so right here we see we can ignore this this is a default to ignore this route don't worry about it but down here we have routes dot map route and this is a default route and so it says controller slash action slash ID so that's saying is after that localhost colon and the port number the next thing it's going to look for the next thing it's going to be the controller the next thing is there the action one thing after that is the ID so remember that the about page was slash home that's a controller slash about that's the action it didn't have a slash ID and the the home page the the starting page didn't have anything well if you look down here we have defaults it says the controller this right here the default is home for the the default is index then or that the home page is in the home controller and the index action and the ID is URL parameter dot optional meaning we don't have to have it so if we don't specify an action it's going to assume the index action if we don't specify a controller it's going to assume the home controller now we can't say localhost / about because it wouldn't know what the controller is so we set the specified controller if we're on specify the action but if we say localhost / home it's going to say okay no problem I will go to the index action and please say just local hosts and I am assuming you put the port number on there or say look just local host then it's going to go to slash home slash index as its assumption it's not going to change the URL it's just going to assume those two values home and index you'll also assume there is no ID since that's optional so the question that comes why you care and the answer is simple for the most part you shouldn't okay again my piece of advice my best practice would be that you just leave this register routes method entirely alone however there are times when you may want to add a route add a new way of doing routing for example web api which memory cities for i love web api they have the same idea of controllers in web api but and actions too but they don't want to get confused with MVC because remember those two live kind together wherever you get Web API you get MVC as well and so what they do is they add new mapping and they put above this mapping and the reason because above is because these routes get looked at in this order so does does it match this if yes do it if it doesn't does it match this if yes then do it and so for a web api they say API slash now I don't they have the ID here but so what they do is they say if you see API in what would be the controller spot it's not a controller called API it goes then to the web api processor and then the next thing is you look for controller action and ID when your name so there's something else called me of API that's Web API row and so when we get a URL if I come in here and say okay what are the routes we have the first route is the web api route does after localhost does it say API if so this is the route handler however if it doesn't say API then it goes down here int as well whatever's after localhost must be the controller and so that's how we can have multiple routes to do different things again I wouldn't typically think that you would need this I've used a couple times for very very specific circumstances but the most part I don't even touch this file I leave it alone I do think however it's important to at least know how its routing works because NVC if you're not careful can feel an awful lot like magic happens the problem I really really hate magic when it comes to programming and you've probably heard it before but whenever you have magic and programming where you say it just works the problem is when it stops working you don't know why and that's why I try and cover these things that may be a little off the beaten path but I really think you should know because if something breaks in the routing you know where to go app underscore starts route config dot CS now is one more thing I want to cover before we start modifying a site in earnest and that is the bundling so let's close all of this so we have the layout CSS HTML which that's under the shared folder under views to view share folder underscore layout dot CSS HTML and this is our our standard page this is the full page remember this is where our our part goes our view now remember I said before that I want to go over what this scripts dot render is but for now just think about it as that's where our scripts are well let's cover what this is this is called bundling and so instead of having a script tag here and a script tag would look something like this we'd say script SRC equals you have path so maybe scripts slash bootstrap dot J s something like that hopes lysed left there yeah I mean an end tag sorry there we go so that would be with a standard script tag would look like so we'd have our path to slash script / bootstrap jas that's by the way right here notice this tilde here the tilde means from the root of our web application in this case our root is that localhost colon the port so from there it's slash scripts slash bootstrap j/s so that's a typical script but we don't have those here instead we have this at which indicates the razor framework scripts dot render which is a c-sharp method that has that same Tildy so it means from the root of our website so localhost colon the port slash bundles slash jQuery well if you look let's kind of collapse it all down I don't see a bundles folder again root where is the bundles folder it's looking for it and somehow it works so where is it well it's actually part of our app on our source Start folder we have bundle config let's open that up now I'm going to give you a little bit of a caveat here this is Microsoft's original way of doing bundling and what bundling is is grouping together scripts into one group essentially that's every done it but there are better ways out there in the open source community that that work better for example web pack is one way of doing it and so there's other ways of doing this but Microsoft has kind of kept with us bundling for now my guess is that bundling is on the way out and that at some point we'll see them use again some industry standard ways of grouping these scripts together so I wouldn't go head over heels of bundling but at the same time you don't have to avoid them either so what bundling is is in this registers bundle register bundles method we can add one or more bundles and name them so for example this personally here bundles dot add it's a method new script bundle now as a script bundle and there's style bundle and come a style in it that's just CSS so script bundle said okay here is the name in this case a name is from the root localhost colon port number slash bundle slash jQuery which sounds familiar because over here render bundles slash jQuery so that's the bundle name is it include and here's the scripts we're output in this bundle in this case this one script and that script is starting from the root slash scripts let this folder right here slash jQuery - and then these curly braces version will notice jQuery - 1.0 I'm sorry 110 - Jas so it's saying include the jQuery whichever version we have included here now you can probably see the benefits of doing this right now because this version here allows us to say we don't really care which version of jQuery we have whatever version it is we're now in it so if we change to jQuery - 3.2.1 I believe it was the latest jQuery it will replace this one dot 10.2 with a 3.2.1 version and we wouldn't have to do anything else with our application because it's still bringing that same bundle and that one would have a newest version of jQuery so that's kind of nice but this bundle is a little bit lame in the fact that it only brings in one script that's it whereas down here the bootstrap bundle brings in bootstrap j/s and responds yes that's a little better now the reason we have multiple bundles is because ordering is important when it comes to JavaScript and so you have to for example load jQuery before you load jQuery dot validates because jQuery validate relies on jQuery so the short version of this is that Microsoft has created some bundles and they've put in the right spot so jQuery and then bootstrap they put in the right spots for when they're needed there's moderniser and if you wanted to add your own bundle just basically copy what they're doing and then put your own values in here is the name and then here is what to include as you want include moya one thing just say comma and the next thing and if you want the same thing happens with CSS they only have one style bundle but they call it content slash CSS and so they have the bootstrap CSS which is pretty important but then also your site dot CSS the thing I like here is under content that site dot CSS there's not much in here what that's meant for though is meant for you to put your own custom CSS and say alright put a placeholder there and said ok put your own CSS there that's great and they'll go ahead and render that for you now I kind of wish they had the same thing for JavaScript and I don't and so if you want to add that email I put in this bootstrap bundle here or you might want create your own bundle and then just add it afterwards here so it's real to you now I saw that's the final thing that I want to cover one more thing real quick just briefly then we'll come back to it because I wanted it on the screen and I don't want you to say hey I'm skipping over something at render section this is a fun one and so what this at render section does is says sometimes you might want to put stuff in more than one location no worries we'll create this at render section and you can create as many as you want input in different places in this layout dot CSS HTML page and what allows you to do is later put stuff here or if you had one of these up here put stuff in the menu if you wanted to you create lots of little widgets and have them all over the place and have each different page or each different view update what's in that little widget but in this case Microsoft includes one by default and it's not required so requires false but what is is at render section called scripts cuz up said ok I will put code right here and notice it's right before the close of the body tag now this is where you put any custom JavaScript so let's say ferment that your index page let's go back over there to index so interviews the home index page so this page whined to have some to mess with JavaScript a it wants to do something where it changes the color of this h1 tag let's just say and it wanted to use jQuery to do it because jQuery is a nice easy way of accessing itis well if we put our script right down here said script type equals text JavaScript and then put our our access to jQuery whatever I do and you know let's just pretend that's JavaScript so if we put that here where does this script tag end up well it ends up right here why is that a problem well remember that javascript is order dependent guess where jQuery is down here so we're calling we're having a script up here that calls jQuery but jQuery is not loaded yet down here that's a problem instead what we do is we actually cut this out here let's start over we actually do a render section so we'd say at section all lowercase and then we'd say this section is the script section and here I could paste my JavaScript my script tag and so now since it says section scripts which we defined over here scripts render section and so it says okay on the index page I have this little bit of code right here it's not going to go here that code goes in the render section called scripts right down here well guess what this is below jQuery now this script has access to the dollar sign and all the rest the jQuery provides fun stuff so that render section pretty powerful stuff mostly I use it for just that those scripts but even that's a pretty limited operation because and I haven't really covered this because I don't I haven't recovered HTML CSS and JavaScript yet on this channel but you really shouldn't have JavaScript right on your HTML page it's it's just not a great idea the most part you should have JavaScript in their own files and you should access them as needed but you kind of want to separate those two a bit now there's a little bit debate there but the most part that's the case it used to be we put JavaScript right on its pages put a whole bunch of JavaScript there the problem is is no code reuse and it gets kind of messy and this and other things come along with that and so I recommend you create your own J's file and access it from here if you need to and so there might be a few calls here of the most part all your javascript is located in its own file so there probably a ton of JavaScript here maybe it's a few calls or a few calls out to a few methods you create but there may be a little bit JavaScript here and so this is kind of important to know so that's the render section all right so does enough explaining going over and covering enough theory essentially let's go ahead and actually create a new controller and use our model we created and create some views so do that let's shrink these down from it let's go to our controllers and say you know what I want to have a person controller so I right click in controllers say add no at the top option is controller well that's what we want now really controller if we open up home controller it really is just a a class but inherits from controller so there is a little bit there it also has this public action result and and all the rest so there's a little structure that we create so usually I use this and controller instead of added class just it makes it a little bit easier so let's just do add controller and I'm going to say leave it alone the MVC 5 controller empty now there's a whole bunch of fun little templates here that you could use where maybe you want to have a control with read/write actions if you want to play that or play around that you can it creates some quit that stuff so create action to read action the update action delete action and the list action that's a lot of stuff alright and if you want to use any framework which again not a big fan of but you could do it too if that stuff the most part stick with your empty controller now I can add it brings up this dialog box here notice I haven't touched anything notice how default is highlighted and controller is not and this is just a help for you is try and tell you hey you you name a controller something with controller at the end in this case let's call it the people controller I add and it's going to scaffold out a controller for me which really means it just creates the class name inherit some controller and creates my index method which is nice because remember the default for a route is to call the index action so if I say localhost call the porch slash people if those are the people controller and since I have not specified an action it will go to the index action now what happens if the index action isn't there bad things so it kind of nice to have this index method already here so you already have as action now notice down in my views folder I now have a people folder it's empty let the people folder there that's part of what NBC does when you use that controller now I have this index action which returns of you kind of cool but now that create the matching CS HTML file for my view well don't worry there's actually a shortcut to doing that if I right click on my method name notice that the first two options are go to view well there isn't one or add view and that's the one you want add view now this is okay what's the view name well it's the index view because it's the index action so it puts that there you could change it don't change it now the next thing it says is what template do you want to use this template is the empty template meaning without a model or do you why use why other templates to create the lead the details the add the empty the lists look over a couple of these in a minute but for now let's create the empty without model template create a partial view at unchecked we're not going to cover partial views in this video getting long enough as it is but that's an option leave that blank for now until you know what you're doing now you use a layout page by default this is checked which is good where I use that underscore layout CSS HTML file because that's where all the other stuff is as far as the head goes in the body the script tags and the CSS and all the rest as as leave empty is set as a razor underscore view start file which is the this file here so yeah leave it empty but that does mean you can change your layout to a different layout maybe you have two or three different layouts for example you might have a layout for employees and different layout for guests so you have the same views but maybe they have different menu options or menus or maybe they have different color schemes whatever you want to have it would be a different layout page would work for that sorry I add now notice under people we now have index es HTML by default it adds that view bag title and says index let's go ahead and change that to be people so for the index page we'll say the view bag let's say people and then this is the default people view just so you know what it's going to look like now if we hit run once we fist the load your application starting one to start whereas see how to access this page I noticed since us on this index CSS HTML page when I ran it guess is you know what you probably go to that page therefore I'll take you there see slash people slash index let's come back here for a minute and now we're at the home page because that's default route and if we were to do slash home it's still here because remember if we don't specify a controller then the controller default is home if we don't specify an action the action default is indexed therefore since we're not specifying the action it's saying the action is index well that's still this page because this page is home slash index but if we instead say slash people there's our default people view even though we have not specified slash index because the default page or default action is index action also notice up here it says people and there's our h2 tag we specified they're pretty basic stuff right now we've created a one method which is already kind of there we created a view for it and we said load that view just by navigating to it manually well let's create a new action so public action results and let's call this list people now let's start with just returned view but you know what let's actually create a list of people let's the person plane type I'll do control dot to find that person it's not finding it let's flat why if person model that's why person model now I do control dot and add the using statement for MBC demo dot models and we'll call this people equals new list of person and we'll say people dot add new person model I'll say first name equals Tim last name equals Cory age equals 38 and is alive equals true we need to specify that because that's the false true all right so there's one person add to our list let's copy this a couple more times we'll say Joe Smith whose age is 56 and we'll add Sarah Sarah Connor and we're never quite sure what her age is because always changes so those are the three people we're going to add to our list now this is our model that's people person model and now this is actually our data say it again it's from a database may be asked our class library give me all the people in the people table on a sequel database that's what this is simulating something like that now obviously wouldn't have this dummy data like this but let's pretend like we're doing that so now how I give this list to the view well it's actually pretty simple like that so return the view and pass in any object and kind of a string if you want a model or a list of model it doesn't really matter now I recommend only a model or a list of model now don't forget we're not done yet we need to create the view so I right click on list people say add view the view name list people the template I want this to be a list what's the model class that would be the person model so the individual model is a person model but see a list of them now the really cool thing is that built right in and understands how to deal with this data the model class it just looks for any kind of class that's not a controller looks for any kind class is it okay that could be a model in this case the person model now just as a quick note in older versions of Visual Studio it used to be that your model might not show up in this list if you had not yet compiled now I believe it's been changed since then I haven't had a problem recently with it but if your model is not in a list what you to do is exit out of here go to the build menu and say build the project or just hit the red arm to the green play button and then close it out once it opens up either way in a compiler application but I believe in 2017 is taken care of for you but just so you know in case you're using an older version of Visual Studio or in case that doesn't show up for you for some reason so we've got the mile selected it's a list template and I wouldn't have to use this template I don't want I could use an empty template but I kind of like to use the list template because it gives me a structure to work from a starting point I can then edit how I want everything else do the same we hit add now is a lot more stuff going on here then in our other our index so index that was it now we have this so let's look at what this is really doing the first change is this at model at the very top and it says ienumerable MVC demo dot models dot person model and that's our list of model but until list is ienumerable and that's okay to have ienumerable instead of list next we have this h2 it says list of people that has a paragraph tag with an action link for creating a new person now notice this has two values instead of three like before previous on action links we had both the controller and the action but in this overload is the name and it's the actual action but no controller is it assumes the person controller or the people controller now that's gonna create a link going nowhere we don't have a create action yet but we'll leave it alone for now then it creates a table and this is the reason why I like doing it this way with the template because it shows us kind of how to do this this whole layout with lists so it starts off with display name for model and then this arrow that's kind of the link arrow model dot first name so what this display name for says is give me the display name for first name which in our case it says first name and last name and age and is alive and then we have an at for each now again you gotta catch this this is c-sharp code let's raise ur so it's c-sharp a for each so same for each item in model so that's going to say for each person essentially and it has open curly braces but we're mixing in HTML so notice even though we got four each which really take is a c-sharp constructs and has the open closing curly braces we can still mix in our HTML which is cool because we're now allowed to do things like this where we're saying for each person create a new row in the table and then do display for their first name last name age and is alive you know it's different here for display for display name for and display for depending on this is for the name of this column this is for the value in depending on the type if going to change how we render the HTML for this particular item in this case age vs. is alive and we'll see that in a minute then finally have this down here three action links again three locations you'll have yet three actions don't have yet the Edit action the details action and the delete action we'll come back to that in a minute but just note that this template kind of thinks that we're going to create a full application a full crud application create read update and delete and so it's okay I'm going to show you all the people but now you should probably have a ability to create a new person and you should probably be able to edit an existing person and you should probably bill see details basically an existing person probably will delete that person so that's kind of their concept of how this is working so it's really built that full crud operation if you don't want to do full crud no problem just take this out but for now let's actually run this so I'll say run I'll wait for it to build it's loading it takes a bit for NVC get started the first time but in this cool this is since again we're in the CS HTML file it said ok you probably go right there and so it takes me to this page right here notice and it's what I created a bool especially is alive those are check boxes it's not like this is a text box it says true or false it says boolean it's only two values true or false that's what check box is true or false therefore when we say display four is alive it's going to render that as a check box so we have Tim Cory H 38 and is alive is true in fact all these are is alive so this shows us how to use a model and a list of model now we could wire up these other ones we won't but for now just note that this is a pretty powerful templating engine it gives you all the examples you need because you probably remember display four versus display name for no problem just use a template and say okay from here I want to do something different we would have to use a table we strip this down so you know what forget the titles forget all this instead where it's going to list out to a forage and list out each person's first name we can do that and that would work and so there's a lot of things you can do here from this point it's a whole lot easier to start from here then it is to start from that blank page and go how do I loop through again how do I display the value for a way that creates the right type of input element all those kind of things this just makes a whole lot easier to start from this and then modify going forward all right now if I were to actually click on these links here I get this it's a 404 now 404 is an error that's kind of big bad it's one of those things where if you run this air it means that you've kind of wandered off a path and it's a problem you definitely don't want to have 404 errors in your application so make sure that you either change those to like take them out or actually add those actions in now I'll show you something else as well and that's the idea of creating errors or having errors in your application so let's go back over the people controller so I'm going to create intentionally an error so let's say person model T equals new person model now I'm going to say int I equals P age let's actually flip this around so say five divided by H now what's the age right now well age is defaulting to 0 so 5 divided by 0 well that's a divided by zero error what's going to happen let's run find out so we have run chrome we're going to show you what an error looks like wait for it to load all right so now let's go to the people controller remember the index action is a default so I'm going to specify index I get this error now I'm debugging so let's simulate the idea that we're not actually debugging and so we wouldn't have caught this in our code before you that I shall point out that the new exception box is a whole lot more intuitive now it kind of trimmed out all that stuff you probably didn't need anyways and it really comes down to attempted to divide by zero you still have the details so you open that up you can you can still copy details you can look at the exception settings all of fun stuff but let's instead hit continue this is the yellow screen of death it's what you'll see on your website if you have an exception now here's the problem you don't want to show this to your customer your end user and the reason why not is because look at this source error line 16 int I equals 5 divided by pH and by the way here is the stack trace so you have all the information you need to understand how this application works including the controller it's in the line it is here's the code surrounding that line and here is the complete stack trace so that's that sense of information remember I three for that the end user only gets HTML CSS and JavaScript well we've now I elated that we've shown them c-sharp code well there's a way to solve this if we go to the web.config now if you're familiar with the wind forms or DPS there's the app config these two are functionally equivalent it's just that on the web we have web config on for applications like desktop applications we have app document fig so web config it's got a little more stuff in it than we're used to probably but right here under system dot web we need to add a new tag so in here we say custom notice the intellisense so we can just use that errors mode equals we have three options off on and remote only and so as i saying is we're turning custom errors either on or off or only for most what our custom errors well whenever we would normally have that yellow screen of death where we have the the c-sharp code instead if custom errors are on will display a a friendly error message page or if custom errors all remotes only if anyone not on the webserver itself gets the error will go to the friendly page but if you're on the web server you'll get the yellow screen of death or again off would be we're not using custom errors show that yellow screen of death this is what i use typically remote only and the reason why is because for my end users i don't want them to see the error but i want to the error which I want that valuable debugging information now we're currently on the server so instead let's just show it as on for custom error because that way we'll only ever get custom errors so let's run it again remember that exact same problem by doing a slash people and we'll see why our error page looks like now okay so we had a same error we continued and now we have this nice generic very very simple web page that says error an error is a crude oil processing your request it's ugly but it's a whole lot prettier for the end user then the showing of source code is or a stack trace and also it protects our our site where is this page come from well if we come back over here to the shared folder err dot CSS HTML error an error is a career well processing your request so there you go you can change this page to be you have something fun you can change this page to be something light-hearted or more informative or you can actually have multiple of these error pages depending on what type of air you got a four oh four or 500 or a 401 or a 403 does only matter you can send different pages based on that but for now the simplest thing to do is just add this custom errors mode equals on or remote only and then modify this error dot CSS HTML file and now you're not showing users that ugly error screen okay there's a couple things they have not yet shared the lonk over before we're done the first one is this global dot a si X file this is where your application really starts the application on its course starts now we had only covered areas but we really won't in this video but those are our registering areas there we don't have any areas right now but now here we have filter config and maybe we skip the filters we don't reuse filters either but then you have routes register routes and there's our routes register bundles and there's our bundles so that's where the the bundles and the routes are registered so if you were to do this well now you don't hate bundles and so that would be a problem and that's where you come to fix it is in global de si X again you probably shouldn't change this file but that's where this is if you want to register something else for example a global logging system probably here at the right spot so that's this file right here and then also we have the view underscore view start so we have as a views folder and inside views let's collapse the other ones inside views we have as view start dot CSS HTML inside here it specifies the default layout which in our case is underscore layout so again not really magic this is where we specify that this underscore layout CSS HTML is our default layout we could change that you wanted to you could change it to underscore your company name default layout dot C S HTML that's fine and then just change this file here as well so those two things I thought were important to at least show you so you have idea that are there but it's probably not something you need to modify other files are the packages that config this is where all of our new get packages are specified you don't touch this really usually use the editor under references right click config mesh NuGet packages so leave it all alone now when it comes to actually deploying an MVC web site it's a little more complicated than deploying an actual web site an MVC web site is actually compiled the nice thing is if you right-click on the project and say publish it has some options there as far as a sure is or FTP you're pushing to a folder and you can set all that up so just note that also and this is just a dotnet thing in general but if you were a check within a source source code control so for example get would probably the source control you'd use one of things you make sure again this is a dotnet thing in general but I'll specify here this packages folder does not get checked in the source control okay this is this hidden dot vs file or folder you'd only check in the SLN and everything in here or most everything in this MVC demo folder the reason you not do not check in packages as a ton of them here these are all of our new get packages we get those when we build the application or when we ask for them instead a check in is this packages config file this specifies the packages we need so it does not find them when it goes to build they will say okay go and nougat and get these so that's just kind of a little tip there when it comes to get I'll have a video series on get kind of shortly but but that's kind of important a note if you're checking that in the source control okay so that's MVC we create a new controller called people controller we add two actions to it we created those two matching views we actually used our model and it really covered everything in here as far as the base demo goes from here you can really create very impressive websites by just putting different pieces together now it haven't covered what hTML is what CSS is what JavaScript is and that's not really in the purview of this video so if you're not really comfortable with those yet I'd say probably hold off on trying to build web applications because even though a lot of this is CSS I'm sorry a c-sharp there is still an awful lot that's HTML CSS and JavaScript so it'd be important to learn those or get a pretty good foundation though before you move on now upcoming on this channel you will see some content on HTML CSS and JavaScript so you'll get some of that content in the near future but for now if you're not comfortable with those three you might want to learn those before trying to tackle a web project like this so I hope you've enjoyed that I love to know what your questions are or what things you struggle with what things you like and don't like about MVC so make sure to let me know in the comments down below I try and respond to every one if possible also don't forget to jump on the mailing list so you get alerted about new events and new discounts that I provide as well as new content and if you like this video I really appreciate it if you would give me a thumbs up down below as well

Channel: IAmTimCorey

Views: 576,434

Rating: 4.9344196 out of 5

Keywords: .net, C#, Visual Studio, code, programming, tutorial, course, training, how to, tim corey, C# course, C# training, C# tutorial, asp.net, asp.net mvc, mvc, html, javascript, css, vs2017, Visual Studio 2017, best practices, tips, tricks, advanced, razor, routing, scaffolding, rendersection, nuget, beginner, C# for beginners, complete, customerrors, web.config, mvc routing, razor syntax, microsoft, webforms, for beginners, for dummies, mvc for dummies, mvc for beginners

Id: phyV-OQNeRM

Length: 101min 28sec (6088 seconds)

Published: Tue Jun 27 2017