As promised, we are back.
The foundation laid on the previous post should stick to your mind to avoid being lost when creating files on your project. If you missed it, feel free to check it here.
The intent of this journey will still remain the same and this time, we will build a little application to enhance our understanding of the structure of an MVC application while learning new things.
It all starts with the steps detailed on the first blog. This time, instead of creating a ‘WindowsApp1’, just as Visual Studio decides to name its default projects, we will give our application a meaningful name.
A name which has meaning. If your name has a meaning, why not the application?
This sounds cool.
Our app will be named after Retro. Let’s call it ‘RetroRabbit’.
Once the application has been created, we will have to start writing code. Before rushing to write down the first important 10 lines of code (not literally), we need to know the purpose of the application. What is its purpose?
The purpose of the application is to ensure that you understand the flow of information from the model to the controller and the view. This will encompass people that you are familiar with to help your understanding.
There are different ways of approaching a brand new project and many will argue over that. Some start with the view and go down to the model while others prefer to start with the model and walk up the hill with a specific intention. There is ‘No’ wrong and right way as long as you know what you’re writing. As for us, we will start with the model.
We will create two models: Employee and Food
Right under the model folder, right-click on it and select ‘add’ and choose to create a class.
The class will be named as written above.
You should be able to see it.
This is how your untainted class should look like. You can do the same with the Food class.
Once you have created those two classes, you should be ready to add properties or attributes that define those classes.
We will not be extravagant with our application and will choose to keep it simple as preached by the KISS principle.
/!\ To add an attribute faster, type ‘prop’ and hit tab. This will ensure that the type of the attribute and its name will be available for you to modify it as you wish.
Those are the two models that the controller will be using.
To create the controller responsible for the manipulation of our model, we will need to run to our folders and select the folder named ‘controller’ then right-click on it then click on ‘Add’.
When selecting the ‘Controller’ option, we get to choose the ‘Controller’ option.
Once you have selected the controller option, give your controller a meaningful name after making a choice over the type of controller template you need. Since we have chosen to embrace the KISS principle, we will keep it as simple as possible. Though you have the opportunity to speed up the process with different templates, as newbies, let settle for the first option: ”MVC 5 Controller – Empty’. It’s not as empty as you think, but it removes what might serve as a platform to over confuse your head.
What follows is the name of the controller. We can do the same for the ‘FoodController’.
Looking at the EmployeeController, you can see that it’s not as empty as you thought. But it’s empty 🙂
The controller will have the honour to play with the model and manipulate it as intended.
We will need to instantiate a list of the customer class at runtime with the provided values and pass them to the view.
I don’t understand what you mean Laurent 🙁
Wait a minute. Check this:
The controller is just like a player having the ball. He gets it in a specific state, manipulates it and passes it to the striker for an expected goal.
Just as the player is excited to manipulate the ball, the controller is also excited to manipulate the data. Just ensure that the ball has air. Likewise, ensure that the data is not corrupted 🙂
Create an object(ball) to be passed to the view
We have changed the ‘status’ attribute to ‘isEmployed’ for better understanding.
Add views to both controllers and ensure that they are not partial views. The view name will be an Index or custom name. Feel free to give a meaningful name. I repeat, a meaningful name. That’ll help you understand your code even after being a grandfather(by accident or by plan) 🙂
The type of view chosen makes a difference as that helps you keep consistency across your pages.
This is key for designers as they always aim to defend by all means the importance of consistency.
You should do the same for the Food too.
Keeping the default template that comes with ASP.NET, I’ll ensure that we can access the pages created in order for us to display the content expected though this won’t please designers (Always listen to designers though).
The view of our home page will enable the call of different views due to the presence of the “ActionLink”. In HTML that is similar to ‘href’ but this one is more powerful as it includes the name to be displayed, the method within the controller and the controller name. You should be able to find additional parameters for the ActionLink.
Once the navigation to the view has been set up, you can afford to display them in the view.
The view is pretty a mixture of C# and HTML. As for the HTML part, I assume that you have heard of it. If you haven’t, in simple words it is a markup language. In other words, it is mostly used for the presentation of pages on the web. As for C#, that is the programming language used to carry and display the data.
Breathe a bit.
The view might be confusing but it is not that confusing.
Under the header ‘Employees’, you have what @ sign and curly brackets. This is part of the razor syntax rule and allows the user to render the data from the controller. You can omit the curly braces when working with a code that renders C# data on one line as long you prefix it with the @ symbol.
Each view has access to the Model object. This serves as an opportunity for the view to display the object to the view.
You may ask.
Rabbit: How does the model know exactly the type of object to render?
Well, the namespace defined at the top of the document ensures that the data type is accessible to the Model object.
Rabbit: Oh, I see.
After going through the above steps, this is what we get as a result:
If you don’t get the same result, please, go through it again and ensure that your code mirrors the screenshots provided.
We have seen how the model, the view and the controller can interact.
The truth remains, we haven’t answered Rouan’s question on why we are using MVC 5. Without worries, we promise to answer it in the third part of our journey. Stay connected.