ASP.NET MVC Views

Beginner

2019-04-10

ASP.NET MVC Views

In the previous ASP.NET MVC Controller and ASP.NET MVC Routing we were parsing a string to our controller action and returning a string. The output wasn’t HTML—it was just the string “Hello World”. To produce an HTML
response to a browser request.

ASP.NET MVC Views are the HTML part that gets rendered to the user. All the processing and calculation is done within the controller part then the result is being sent to the view engine, which produces the view back to the browser. This achieves the rule of separation as to split the business logic and processing from views. so that we can create multiple views for the same data to maybe fit multiple screens or multiple kinds of users for example.

asp-net-mvc-view-engine

Razor

.NET framework used a markup programming language called Razor

Razor is an ASP.NET programming syntax used to create dynamic web pages with the C# or Visual Basic .NET programming languages. Razor was in development in June 2010 and was released for Microsoft Visual Studio 2010 in January 2011.

we will dig more into Razor syntax and details later in this series. For now, let’s create our first view to be called from Index action

ASP.NET MVC Create New View

First, Let’s modify the Index action inside HomeController to render a view


We changed the return result of the Index() action to return ActionResult which will be rendered with return View() statement
return View() with no parameters means we will return the default view for this action.


If you run the project now you will get the following message

asp.net-mvc-view-not-found

The error message is clear and descriptive it tells you that the engine couldn’t find a view specified to the Index action and also tells what locations it tried to search into.

Let’s add the view, Right-click anywhere in the definition of the Index
action method in code editor window for the HomeController.cs file and select Add View from the pop-up menu.


asp.net-mvc-create-new-view

Write in the view name to be “Index” ( the name of the action we are creating the view for )

for the template option select Empty as shown in the image below

asp.net-mvc-create-new-view-name

Visual Studio will create a file called Index.cshtml in the Views/Home folder. If this isn’t the effect you achieve,
then delete the file you created and try again. This is another MVC Framework convention: views are placed in the Views
folder, organized in folders that correspond to the name of the controller they are associated with.

The .cshtml file extension denotes a C# view that will be processed by Razor. Early versions of MVC relied on the
ASPX view engine, for which view files have the .aspx extension.

open the newly created file. You can see the code below


let’s modify the code to be like :


and let’s run the project in the browser

asp.net-mvc-view-edit

Pass Parameters to View

So far, we have created a static html view. let’s see how to parse values to the rendered view page to  make a dynamic view.

first, modify the code in the Index() action


we are parsing the id parameter to the action as we did before but now we are returning a view not a string.

you can think of the ViewBag as a container for data that is being parsed from controllers to view. That’s all what you need to know for now. Here we are parsing a parameter called “UsedID” with value “id” ( we are returning back the value that the user gave us )

Edit the view code to be like :


we are accessing the value passed with the “@” notation. that’s how the Razor syntax work ( we will study Razor syntax in details in the coming tutorials )

Let’s run the project

asp.net-mvc-pass-parameters

As you can see we passed the id parameter in the URL with value “33” . The Index() action received this value and parsed it to the view. The view engine accessed this value

Summary

In this tutorials we seen how views work. we created and accessed our first view. we learned where the view files are created by convention. and we could pass parameters to the view to be accessed later.

References

1- https://docs.microsoft.com/en-us/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c