Views in ASP.NET Core MVC

Introduction

In this article, we’ll discuss Views in the ASP.NET MVC framework. In MVC, the views we refer to your views can be PDF, Html, text, or anything else. But in a web application most of the time it is a team that is redundant and we see its razor engine supports it in a nice way.

here, we added this index action.

asp.net core controller

It is what we have in the first place. the index action uses the View method let’s say read and check it.

It will happen if we tested as it is in the browser.

If we go to index action and press and there we get these error shows.

exception in asp.net core

Let’s go back to our solution explorer and create a view.

Then we can select the Add new folder we need to name it a test because the name of these folders must be the same as the controller.

asp.net core razor view

Now, we can right-click on test for them and select view then we see this dialog box.

asp.net core mvc razor view

Here, we need to change the name in the dialog box which is the name of our action then for the index to do our testing and we see a framework generated in the index.cshtml for us.

It’s something very similar to simple ASP.NET a page to do our test thing.

here, we added these H1 tags.

asp.net core mvc razor view

Now, let’s see the output in the browser.

asp.net core mvc view Output

Layout

so far we have reached the point that we created a simple HTML of views. usually, a view has a header and footer so we added this mock header and footer looking at this code.

Layout in razor view

We can say it’s good for one single page application but for a multi-page application we can’t say the part and the following part is going to be repeated in all pages.

layout in asp.net core mvc
layout in asp.net core mvc

As a programmer, we know that we should not repeat ourselves layouts is something that helps us in the situation if we open the solution explorer and we use Folder. We have a shared folder.

layout file in asp.net core

Let’s create our own Layout to do so we can right-click on the shared folder and select at the views in Add view dialog box.

layout dialog in asp.net core mvc

here we changed the name to _TestLayout and click the Add button.

create new razor view in asp.net mvc

We have and we use similar to other views and nothing more.

razor layout in asp.net core

Let’s go back to the layout and add some code into _TestLayout.cshtml.

layout output in asp.net core mvc

Now, here in our layout heading part is going to get changed page by page so we can replace it with at @RenderBody() but in the views, everything starts with. @ sign is the razor syntax which means we are going to put C-Sharp quotes RenderBody() is the method that placed the result of value inside.

LayoutRenderbody in asp.net core mvc

Now, we need some changes in the index.cshtml and also we can change the layout from all to on the _TestLayout. Layout the name of our day out without the extension.

index layout razor view in asp.net core

Now, we’ll see you take the test out as is the layout and then render a result of this views. which is now a simple Layout where RenderBody code that saves everything and tests it in browser to get Sure it still works.

layout menu on razor view

Define script section

The webpages may need to put some scripts, before the end of the body. For such cases we can use sections, a section can be defined like this here.

script section on layout page

we define a section called scripts a section that can be optional or mandatory here because the value of required is false. It is optional.

Now, let’s add this code to define a section called script.

script section in razor view

By this section, we have defined in view the code inside this section will be placed in RenderScript in the layout. as before the body we define title in viewdata and tested in the browser.

multipl esection layout page

Let’s, we refreshed the page when we get the alert.

alert output on razor view

Leave a Reply

Your email address will not be published. Required fields are marked *