MVC For Beginners: Day 2 (View)

In this article we will learn about MVC step by step.

Hello Geeks!

I am back with the next part of this series and this time it's a "View". This article contains a classy explanation of MVC Views for beginners with all the goodies in it, that a MVC beginner needs to understand. So let's see what I have.

Quick View

Agenda

  • Quick Reference
  • A Brief Introduction
  • The View's Role
  • Mind Twisters | View
  • View's Hierarchy
  • Specifying a View
       - View Data
       - View Bag
  • Creating a Simple View
  • Interview Questions | View
  • Pin Points
  • Summary

Quick Reference

From my perspective, I think it would be better to start this series with Contollers with a very basic definition and quick introduction. As I said earlier, this series is purely for beginners. So based on my knowledge and hands-on experience with MVC, I tried my best to represent this in a very easy fashion.

So let's begin.

A Brief Introduction

Based on my experience and based on several facts I got, one very funny but interesting, measures web development. In the development environment developers spend much time writing well-versed and neat code with proper coding guidelines and coding views. (I am not saying it's not important, it is.)

What  am trying to say is, whenever a user goes through your application, the very first thing he observes is the look and crafting of your web application. And as we all know, “The first impression is the last impression”.



A user doesn't care how you code it, what guidelines you have used (these are important from the code reusability aspect). So, think twice before you present your web application to the world.

But in the MVC Pattern, you really don't need to care too much about the View. After reading this article you will get to understand why I was saying that.

So let's explore it.

The View's Role

I guess that after reading that brief introduction you have a feel and some thoughts in your mind about roles, the importance and purpose of Views in your web application. Further I'll try to explain it's importance in MVC.

On the basis of the preceding description we can conclude that "In MVC, the View is responsible for providing the User-Interface (UI)". The View deals with both the Model and the Controller to create that View for the users.



(This image shows how the data is actually transformed from one state to another inside a MVC and responds to a user's request.)

Some Common Mind Twisters

In this article I have also listed some very useful and important Mind Twisters with respect to MVC Views that a beginner needs to understand in my opinion if he/she is just starting with MVC.

So let's explore these twisters one by one.

MT1: What if there was no View?

There are two ways of answering this specific question. In a MVC pattern either you can have a View or you can neglect it. Let's go through it with an example.

Suppose for a certain requirement you want a controller action without a View. Then you can always do that. What you need to do is just check in your application and don't let your Action method return an ActionResult.

MT2: Why to use a View?



You can answer this twister as in the previous. It's totally on the developer whether he wants a View in the application or not. So for presenting or showing your development work in the web browser to the user one needs a View in the application.

MT3: How the View works with both a Controller and a Model

A View forwards a request to the Controller based on the requirements and then the Controller updates the Model with the corresponding changes. This results in a change of the Model's current state.



MT4: Alternatives for Views

There is no alternative for Views. If you want to present something to the end user then you will always need a View, but there are approaches available to that in various ways in the MVC pattern.

You can either use a simple approach, a Razor Engine View, or a traditional one, a Web forms (ASPX) in your application.

MT5: Scope of the View in the MVC Pattern

(If you guys have any other mind twisters in your mind then let me know and I'll add that twister here.)

Specifying a View

For specifying a View we can use:



ViewData

Data travels from a controller to the View via a ViewDataDictionary. This ViewDataDictionary is a dictionary class; we call this class "ViewData".

For example:

  1. ViewData["Message"] = “Say Hello to C# Corner”;  

ViewBag

A ViewBag is just a dynamic wrapper around ViewData. With it you don't need to write the dynamic keyword, it takes the dynamic keyword internally.

We often call a ViewBag "a dynamic data library".

For example:

  1. ViewBag.Message = “Say Hello to C# Corner”;  
(For a detailed study of ViewData and ViewBag please go through this article.)

Creating a Sample View

I tried to keep this as simple as I can. It's just an overview, or I can say a teaser, of creating a sample MVC View. Here we go.

  • Click on the Solution Explorer
    (by default in the right hand side, upper-most corner)



  • Click the Views folder
    (You will get a View Hierarchy, like the following)



  • Now right-click on View
  • Click Add a View
  • Name the View MyView



  • Finally, click Add and you will get this:

That's it.
#Cheese.



Interview Questions | View

So, if you guys are into MVC then try to memorize these sets of questions based on MVC View, because in a parallel world you can encounter these questions during an interview or discussion with other Geeks and colleagues.

  1. What is the purpose of a View in ASP.NET MVC?
  2. What is the difference between a ViewBag and ViewData?
  3. What do you understand by TempData?
  4. What are various views available in ASP.NET MVC 3.0?
  5. How is the Razor Engine View different from the traditional .aspx?
  6. What is the Partial View?
  7. What is a strongly-typed View in MVC?
  8. What are the various types of Scaffold templates available in ASP.NET MVC?
  9. What is the ViewStart in MVC?
  10. What is the use of ViewStart in MVC?
  11. How will the data be passed between a Controller and View?
  12. How do you return a PartialView from a controller?

(These are very few questions. If anyone has more questions then let me know and I'll update all those here. One more thing I didn't mention answers to in order to keep this article as brief as possible. If any of you have query regarding any question, then his/her queries are warmly welcomed.)

Pin Points

Here's an image of this article:

  • The first impression of your web application
  • Provides a User Interface (UI)
  • Either a Razor Engine or Web Form can be used
  • It forwards requests to the controller
  • It's a bridge between a Controller and a Model
  • It generally handles the Presentation Layer (3-tier Architecture)

Summary

I used some complex terms in this article, like Razor Engine, Web Forms, ViewBag, ViewData, TempData and so on. I'll explain all these terms in the next article of this series because all these are as important as learning OOP concepts before going through any object oriented language.

A few tips from my side is that, if you guys really want to become familiar with MVC:

  • Take your time
  • Do as much practise you can (Implementation)
  • Try to "Learn" things, don't just "study" (I mean it)
  • Try to discuss these things with friends, colleagues or in forums (such as C# Corner)
  • If you encounter any problem, then your queries are welcome.

I hope you guys enjoyed it.

#HappyCoding