Web Programming – Getting Started with MVC for Web Forms Programmers

Web Programming – Getting Started with MVC for Web Forms Programmers


Hello, I’m Dr. Ron Eaglin, and today’s lecture is really going to be on demystifying MVC. Model View
Controller Model, or Model View Controller Pattern, has
been a pattern that has become very popular in web programming, and there’s a lot of reasons why it’s popular, but for those people who have been working in Visual Studio and .NET and have been very familiar with the concept of Web Forms Applications, when they’ve been building web applications. You can get into the MVC model and say: Whoa, what happened to everything? Where is my code? Where’s my code-behind? Where are my forms? All that disappears. However, i’m going to show you here. This is – what I’ve done is I’ve created the default Microsoft Web Project from Visual Studio
2012, and I’ve created it in both MVC and I’ve created it with web forms, and it looks essentially exactly the same. Now i’m going to do some URL stuff here, click on About, and you can see up here at the top that this has got Home/About, so it’s got a very logical sounding URL to get to this, but let’s go to the code here. Or to whats behind-the-scenes in
MVC, and let’s decipher how this whole thing
works, and really to do this you’ve gotta start
with the Controller. So let’s go to
Controllers, and under the Controllers directory, and MVC will have a Controllers, Models,
and a Views directory because they all work together. Let’s first look at Controllers, and I
have this Controller called HomeController, and it’s a C# file. Well, to understand what a Controller is you’re essentially looking at – well, when
somebody puts a request to a webpage, they put that request to
the web page with the URL, and something has to decipher that you
are a means and display the appropriate information. Well we got this controller here that’s got
quite good doing this it’s what it does it’s
the controller. Now in this controller, I’ve actually got 3 thing that are going on here, I have an ActionResult, an ActionResult, and an ActionResult, so that’s what’s returned, but I got three methods; Index, About,
and Contact. Let’s come back over here and see what
that actually kind of means, if you notice, this is Home/About, this is Home/Contact, and what you can’t see is this is Home/Index, it’s a hidden URL. Well, interesting here, what happens here? You’ve got this object that looks like a global object called ViewBag that you put .Message=”Modify this template to jump-start your ASP.NET app” location and you can see, guess what?
There it is right there on that index. If I click on
About it says ‘Your app description page’, If i click on Contact, it says ‘Your contact page’ and if you look over here at this ViewBag.Message, you can see it’s obvious that that ViewBag.Message is actually going over there, and all three of these methods return a
View. Well at this point you should be saying: ‘Where’s my code? Where’s all that stuff
that makes all this stuff appear?’ Well, we’ve looked at Controllers and from what we’ve seen with the Controllers, you can take a look a it and say well, I can see, that the HomeController seems
to be managing that URL that starting at home, and there’s
three options; Index, About, and Contact, and each of those option seems to do
something different. Well that’s getting to the next step of the MVC as you’re deciphering this, which is the Views. So let’s go over here to
the Views. Ok now, where as the Controller was in
the Controllers directory, the Views are in the Views
directory, and we’ll look specifically at the HomeController. So now I’ve got Views, I’ve got Home, and if you notice, I’ve got
three files here About.cshtml, Contact.cshtml, and Index.cshtml. Well let’s look at the at About one. If you look at the About one you can see that the About view, you can see that, what guess? Look, it’s quite logical, here’s the code that I have in my About here. “Use this area to
provide additional information.” Aside Title, this looks like, just nice, pure HTML. Well, not exactly pure HTML, you got this @ symbol here, but even that’s
relatively straightforward to see what’s happening here. I’ve got this thing called a ViewBag, and I’m actually in the view, and it seems to me that the ViewBag is
displaying information very easily right here in the Title; right here in this h1 you can see that the Title shows up
there. So this ViewBag actually seems to have properties, and these property seem to be able to display on different parts of the page. Well one of the beauties of this model, this pattern, MVC is a pattern, just like Web Forms is a pattern, it looks to be very HTML-centric. This looks very much like HTML. Now, there are some things that you’ve got
here like you’ve got this within a list item, you’ve got an
HTML.ActionLink(“Home”, “Index”, “Home”) Well if you were doing this in West Forms,
you would normally think what you are expecting to see button there or maybe a navigate – a navigate link or something like
that but in here I’m actually dynamically
putting something in here from this HTML.ActionLink, which would be these links here, so what is that HTML? I can hover over and I can say: Well you what that is? That an HtmlHelper. Thats a global object that I’ve got access to and what it does is it can
render HTML elements, and now you’ve got this really
nice easy ability to render these HTML
elements there. Well we’re not get into all that in the first lecture, I really would just like to demystify it, but that question that you had if your Web
Forms Programmer which is ‘Where is my code?’ Well there is
my code. Now it seems to me a lot of the information that you’ve got a lot of the code that you’ve got seems to be
encapsulated with common functionality. In other words, were using a lot of code here. For example, this ActionLink seems like
everything that you need to know about that ActionLink is actually included right here: (“Home”, “Index”, “Home”) It’s got Home as the title, it goes to Index, Home. Ok, and if I were to click on the About, it would go to About, Home and Contact, Home. Let’s look over here do this again. If I click on Contact here, it goes to Home/Contact, Home, Contact with the text Contact. Well it’s kind of easy to start
saying how this stuff is put together, however, this is great if the page are
really static, and in this case, they’re not really
completely static because you are dynamically creating some things and you
got this Viewbag that seems to be putting stuff on the page dynamically, but the reality of this is that it looks like this is HTML that you’ve got here, and this HTML isn’t really pulling data from an underlying
data model, it isn’t pulling anything from class files. Well let’s go one step a little further
here, I’ve got this page, I can click the Login and hopefully it’ll work just fine because I
actually don’t have the debugger starter kit, works here, when now I’ve got a textbox right here, and a textbox right
here, and I’ve got a Login button. Ok, what we know about the default web application, if you build the
default web application with Web Forms or MVC, is that that data
goes to a database behind the scenes which uses the membership model. Well it works very well on Web Forms, I’m pretty much going to have to guess that if I’m doing it in MVC it’s doing the same thing, and somewhere you’ve got to have some code that is handling all that, what’s going on
on behind the scenes, and how the stuff is
getting into an out of the database. Well so far we’ve looked at two parts of the MVC, we’ve got the Controller, and were looking
at it backwards if you’ve noticed, MVC we’re looking at it from Controller View Model. Well that is the answer to that question. So what we’ll do is, in this case, let’s go back over here to the AccountController, the AccountController is now a
little bit different, in that its controlling some things that have to deal with those pages which
deal with registering account or logging in to an account. ok, but they still have the same basic pattern. So the controller, in this case, will be a little bit more complex than the
controller we had with the Home, and the About, and the Contact, and I’m actually scrolling through this and you can see that there seems to be some code that is managing how you’re gonna deal with the user
accounts. Ok, well there is some of my code in the controller. In the end, each of these ActionResults such as
Manage, you’re still gonna have return View(). Meaning that with that AccountControl such as the manage page or any of the pages you have to deal with this like ExternalLogin, or these other things, you gotta have to have something that shows what is going to show up on the page, and sure enough, over here in Account, we’ve got what looks like some pages like we had before, but let’s look at one of those pages. So in other words, in the Account side, I have an Account Controller, and if you look over here, if we go to the URL again, we see this Account is up in the URL and Login is in
the URL, well at about this point you should be
pretty much realizing that that first word, the Account, is the controller, and over here I can
see I have an AccountController, and I have a HomeController. If I come over here and I click on Register, I click on Login, I have Account/Register. There is an underlying logic to how all
this is working together now, and because I have – I now understand that the controller is controlling what – it controls
how it manages and deciphers the URL, well
guess what? I’ve got to figure out how I’m going to display stuff on the screen, but I’ve got 3 views; Login, Manage, and Register, and if you look at
those individual view you will notice that looks like nice,
straightforward HTML, notice that it has a Model attached to
it, up here at the very top, I’ve actually – I’m declaring a Model. Ok, well let’s talk
about that Model in just a second, but right now I can talk about, ok here’s my view. This is the basic guts of what
gets displayed onto the screen, even though there seemed to be some logic that was occurring in that controller. Well how do you determine what logic is
displayed on the control from what is done in the controller, well look at your
default project and read through the code to see what’s going on there, but now we can look through this and say: ‘This is actually quite straightforward
to me’ I have, I’ve got this @html.AntiForgeryToken,
that seems like I would want to have a an AntiForgeryToken and a ValidationSummary, so I’m actually – I’m putting something
there that I’ve got this LabelFor, TexBoxFor, well if I come back over here I can see LabelFor, TextBoxFor, and the TextBoxFor seems to be – well that “m” might be a clue that
that has something to do with the Model. Well the Model that we’re using here’s RegisterModel,
that tells me, okay let’s go one step deeper, let’s look at – it is MVC
right? Model View Controller, we’ve looked at Controllers, we’ve looked at Views, lets look at Models. So now let’s go up and if the logical
pattern of how MVC is put together makes any sense, if the Controllers were
in the Controllers directory, and the Views were in the Views directory, the Models must be in the Models
directory, and sure enough, if I go to the Models directory, I’ve got AccountModels, and it actually
tells the right here there is an Account Model that I can look at; RegisterModel. Well let’s go up to Models,
lets look in AccountModel and see if I have a RegisterModel, and sure enough as I look through here I’ve LoginModel,
here’s my regular model, I’m sorry RegisterModel, and I can see a few things here. One is I’ve
got a string, public string, a property. This is
good old C# as I know it, a property, but look
what else I’ve got here. I’ve got some attributes that I can – look this string has got two attributes,
one being the attribute ‘Required’ and one being
‘Display’, and then I’ve got a (Name=User name”) and I got the string itself. Well it seems now that unless I’m looking at
this logic pattern of how MVC is put together, and I’m kind of working my way through how this whole thing works, I’ve got a property. Whenever you’ve got property, that’s going to be something that you
work with on an interface, you can display it, you can retrieve it, you can
delete it, you can other things with it, and there are three properties; ‘Username’, ‘Password’, and ‘ConfirmPassword’, which seemed to go right well with
this Register page, and those three properties are just like three properties in here, and those
properties have specific attributes that go with them. Such as this is required, and this is
required, this is a data type of DataType.Password, notice that DataType, the password,
is a – that data type is a – it looks like its an enumeration, within the data types, or a property
within the data types. So, but I’ve got attributes ‘Required’ and
‘Display’, ‘Required’ and ‘Display’, ‘Required’ well not ‘Required’ here but ‘Display’, I’ve got to compare, well knowing the
logical of how these work is that you got a comparison us between these two. So I’ve got an attribute that says I need to
compare with this and there’s an Error message. Well this is pretty clean
code if you’re looking at how this whole thing works, the code looks relatively clean to me, and the model for the data that specifically
is the model that goes with the page, that’s right
here, which is actually, in this case, on a page
it’s a View. Well this defines a lot of how that View is going to operate. So what we’ve done here is we’ve separated the Controller, is that piece that says: Oh, I’ve got a URL, I know what I’m gonna do
with that URL, I’ve got come over here and bring up a
specific View, and may need is some logic before
the View but in the end I’m gonna put a View up. I’ve got the definitions of the Views over
here, and I’m not going to get into – you know, this is the primary, and here we’ve got these
things that look kind of like to me, very much like user controls
but don’t look like full pages, and actually if you look at the name probably kind of says, wow they’re not really full because the name is partial. So they got some way
that they work with it, probably within a page itself. Ok, well thats kind of good to know or maybe its a piece of a page, and the page
contains other things. Well that would be extremely handy if I can have a View that says: ‘Ok, throw
this piece over here, and this piece over here, and now I can
mix and match those pieces because now I’ve got good re-usability of code. So there seems to be a nice logic, an
inherent logic to the way MVC is done. Still a little bit more complex than what
you’re probably used to in Web Forms, which is Ok, but at this point I think you’ve got enough information to kind of get past that demystification here. I’ve got a Controller, that seems to control what the
application is doing when it receives a request from a user, which is essentially a URL. It’s got a
View, which controls what goes up onto the page, and then it’s got an underlined Model, which accounts for how we’re gonna organize, manage, display, and all the attributes that go with what goes onto that page, and there are classes that are very useful for handling all
this. So I know the video you had is a little bit long,
but there’s a lot more complexity to MVC. this should get you started. If you can build the default application, Ok, the default web project within Visual Studio, which is simply doing File, New Project, and if you do the New Project, you pick ASP MVC 4 and if you pick that one, its gonna give
you the option to select a template, and if you choose the internet template, is gonna create this with the View Engine Razor, we’re not going to use the ASPX, View Engine Razor is kind of the – actually I’d recommend going with Razor because that is the basic standard View Engine 4 in MVC. Notice you do have a lot of different ones there, you can build this, and actually get up and running, and started with this. Good programming, I’m hoping that this has kind of gotten you
passed a little bit of the leap frog of how to get this all up and
operational using MVC, but this is designed for people that have
done Web Forms Applications before, just get you up and running. Thanks you very much, good programming!

2 thoughts to “Web Programming – Getting Started with MVC for Web Forms Programmers”

Leave a Reply

Your email address will not be published. Required fields are marked *