ASP.NET MVC Translated for the Web Forms Programmer (4 in a series)

 

Ok, so, do you remember learning about HTTP Get and HTTP Post in school? Ok, do you remember when you started building Web Forms and you just chalked that up to another thing that you learned in school that's not applicable in the real world? Well, guess what. MVC is 100% get and post. Never fear, it's an easy concept. Once you get it you will realize it's truly awesome to be working with the web at its root. 

 

Now, for those of you who's memory is a bit fuzzy http stands for Hyper Text Transfer Protocol. It's the way things are sent from your computer to the server and then back. It's an integral part of what we do, and I appreciate that MVC brings us closer to the action.

Today we shall create one page that does both things, a Get AND a Post. We're going to create a new project for a restaurant named TGIW (this place seriously loves Wednesdays, weird). We've already learned about Views so I went ahead and built that myself. Today we're going to learn about two big things: Rest and populating our views with data.

 

REST stands for Representational State Transfer and it was actually created by one of the inventors of HTTP. In REST calls individual requests are made using URIs like hypertext links. You can make GET or POST requests by using URLs. This is how MVC performs its actions.

 

Now, what we want to do is have our daily specials loaded as the form comes up, and then send back our order. Our application is using LINQ to SQL and we have two tables, “Specials” that contain our daily specials, and “Orders.” which is where our orders go.

 

What we're going to do first is create a ViewModel. MVC is very good at simple CRUD behavior with data objects, however, when our application requires data that is more complex the best way to pass this data into our View is through a ViewModel. Since our view needs to be able to manipulate multiple classes we're going to aggregate them in a ViewModel.

Our ViewModel is called OrdersViewModel, and it includes a constructor that gets our special of the day via by creating a special and passing the day of the week.

 

Now we come to the “Get,” we're going to build an action that returns an ActionResult that populates our page. Inside our action we're calling a method called that accepts a string “day” and returns our special. When we return our View, we're going to pass in that special. We reference the special on our page.

In our view we're going to make sure that the type passed into “System.Web.Mvc.ViewPage” is our “OrderOnlineViewModel” class, because that's what we're binding our page to. This allows us to reference any of the values in that class. We will display today's special, I'm going to throw it in a div. We use Model.PropertyRefrenced as the syntax.

 

So, next we're going to do our Post. We have our text boxes, where we can input how many meals we want to order (this place has a very limited selection). We're going to create our Post action the same way we did our Get, except this time we will be passing IN a our Order to be saved. Within our post we put all the data we grab all the data collected in our form. There are a few ways to do this. The first step, however, is to make sure all our html controls are named in a way that we can reference in our controller.

 

This brings us to an excellent point that we need to go over, the concept of “Convention Over Configuration.” I don't know if you've noticed but this has been floating around a lot recently. It basically means that it's better to agree on a way that things should be set up and make that the way you do things, than it is to manually configure each time. This concept is exhibited in ASP.NET MVC in the way that controllers have to be named after the folder where the views are contained, and how the values on the view are referenced why whatever the controls are named.

For this project we're going to use simple text boxes right now, we'll move onto more involved controls. All we need to do is create a textbox to enter our data, then on our controller we're going to name our action the same thing as our “get,” this time however we're going to specify that it is a post. We did this in our last edition, and now we're doing it the same way. Don't forget to specify that your form has a default action of “Post” and you'll be set, your most method will automatically submit after your click event.

Next up: the HTML Helper, and ways you can use it.

 

I apologize for the code images, will embedd code in the future. For now you can download the source here.