ASP.NET MVC part2

The C of ASP.NET MVC

The Controller, after creating your project you would see a folder named Controller. This folder will contain your controller classes which are responsible for user input and responses. Within this folder you will notice that you already have two controllers named AccountController and Home Controller. We will be taking a look at the HomeController.

Once opened you may see some code similar to the following:

namespace myProject.Controllers
{
public class HomeController: Controller
{
public ActionResult Index()
{
return View();
}

public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}

public ActionResult Contact()
{
ViewBag.Message = "Your Contact page.";
return View();
}
}

Each of the methods in this class relates to the HTML files within the Views folder. The ViewBag will be discussed when taking a look at the Views folder.

The V of ASP.NET MVC

The Views, this folder contains files that is related to the user interface such as HTML files. More accurately, this folder contains folder for each controller which then contains the HTML files.

Within the Views folder there would be three folders which are named Account, Home, and Shared. As mentioned earlier the Views folder contains a folder for each controller and the Shared folder contains pages and layouts that is shared between controllers.

Within the Shared folder there is a file names _Layout. Once selected it may contain some code similar to the following:

<div class="navbar navbar-inverse navbar-fixed-top">
....some more tags
      <li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
....end of some tags
</div>
<div class="container body-content">
    @RenderBody()
....maybe some footer too
</div>

You might have noticed the syntax for a different language. Which in the code above looks like this:

@Html.ActionLink("About", "About", "Home")

This a markup language used in the file extension cshtml called Razor. Once the application is run the code above would output the following HTML:

<a href="Home/About">About</a>

In the Razor sample code provided the first parameter what the link would be as, the second parameter is the file, and the third parameter is the folder.

Razor however is not limited to only being used as hyperlinks. To learn more about Razor visit w3schools which contains other examples of how to use the Razor syntax.

On the second div tag you might have also noticed the @RenderBody() this is basically where the contents of the view selected would be rendered too. As if you select one of the csthml files within the Home folder (Index, Contact, About) you would notice that they do not have any body tag.

In order for the view to know which layout its going to use it would need the code below:

@{    
Layout = "your layout";
}

But in the cshtml files (Index, Contact, etc.) it is not there, this is because it is included in the file _ViewStart.cshtml which sets the default layout to use. If you want to change the layout of the cshtml files (Index, Contact, etc) you would need to create another layout then add the previous code to your selected cshtml files (Index, Contact, etc) and change the value to your desired layout.

The (you know) of ASP.NET MVC

The Model, this folder contains files that holds and manipulate the data. So before we discuss the Model folder, first we need to create our database which would contain our data.

Here are the steps in creating a database in Visual Studio.

  1. Right-click App_data (the folder) in the Solution Explorer.
  2. Select Add, then New Item.
  3. Select SQL Server Database.
  4. Name the database whatever is appropriate for what you are trying to accomplish, for this example I named mine Employee.
  5. Press Enter or Click the Add Button.

Once the database is created you can add tables to it by.

  1. Double-clicking the Employee.sdf (or whatever you named you database). This will open the Server Explorer Window.
  2. Double-click your database to see the Tables folder.
  3. Right-click the Tables folder and select Add New Table, this will then open a window to add your columns.

Now to add the Database Model, here are the steps to follow.

  1. Right-click the Models folder, then select Add and Class.
  2. Name your class approriately, for the database created earlier I have named my class EmployeeDB.
  3. Edit the class to contain a DbContext class. (Example below)
public class EmployeeDBContext : DbContext
{
public DbSet<EmployeeDB> Employee {get; set;}
}

By doing the steps above, you should end up with a Model class. This class is still empty so you would still need to add the attributes and other things you want to add.

Now to complete the MVC the final staircase of steps is adding the controller to the database. In order to do so, here are the steps in adding a database controller.

  1. Right-Click the Controllers folder, then select Add and Controller.
  2. Select the template: Controller with views, using Entity Framework.
  3. Set the Controller name
  4. Select the Model class
  5. Select Data context class.
  6. Select Views
  7. Then click Add.

When the steps above is complete you should end up with a new Controller and new Folder in your Views folder. Now, this just needs to be added to the Web.config

The Connections

When taking a look at the Login.cshtml located in the Account folder within the Views folder you’ll notice more Razor syntax. One of them could be as follows:

@using (Html.BeginForm("Login", "Account", new{ReturnURL = ViewBag.ReturnUrl}, FormMethod.Post, new {@class = "form-horizontal",role="form"}))
{
@Html.LabelFor(m => m.UserName)
//Other code.....
}

The code above is an example of a form. The code above includes a line @Html.LaberFor(m =>m.UserName), m =>m.UserName is a lambda expression which is basically an anonymous function m is the parameter passed and m.UserName is the property to be returned, this allows the the LabelFor() to view the attributes of the property in order to find what it needs to build itself, in this case the Display attribute. This is passed on to the LoginViewModel located in AccountViewModels within the Models folder but in order to know which model is to be created the model needs to be defined within the View itself which can be seen at the very top of the View and looks something like this:

@model MyProject.Models.LoginViewModel 

This is then handled by the AccountController located in the Controllers to validate the user and provide a proper response. In order to know where to submit the form the controller name and action name needs to be defined as well which in the example above can be seen in the line:

//Login = action name, Account = controller name
Html.BeginForm("Login","Account",...)

This means that the form will be submitted to the AccountController and the action is Login.

Like what you read? Give Michael San Juan a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.