Book Image

Instant Razor View Engine How-to

By : Abhimanyu Kumar Vatsa
Book Image

Instant Razor View Engine How-to

By: Abhimanyu Kumar Vatsa

Overview of this book

Razor View Engine is an advanced view engine from Microsoft. Razor View is one of the most popular view engines which doesn't require you to explicitly close the code block. This book will help you understand and configure RazorView in your system to create dynamic web pages. Instant Razor View Engine How-to will help you to make your application more MVC friendly with clean, lightweight code which is quicker and easier to understand compared to other view engines. Instant Razor View Engine How-to introduces you to methods to make your web application more MVC friendly. The book begins by detailing the anatomy of RazorView Syntax and configuring Razor View as well as creating a web application project which will also help you to select an appropriate programming language. The later section of the book goes on to discuss creating view templates and creating View pages using Razor syntax. By the end of the book, you will also be familiar with Razor directives, helper components, and work with Partial views to reuse razor code throughout the application.
Table of Contents (7 chapters)

Partial views (Should know)

In this recipe, we will look at what a partial view is and then we will learn how to render partial views using Partial, RenderPartial, Action, and RenderAction helper methods. I will also show you how to render them using jQuery.

Getting ready

Partial views allow us to put HTML and C# code into a file that we can reuse across multiple other views. It is like a user control in ASP.NET Web Forms that also allows the reusing of code. With the help of partial views we can reduce the duplication of code.

How to do it...

Let's quickly start by learning Partial and RenderPartial and later we will talk about Action and RenderAction helper methods.

The main difference between Partial and RenderPartial is that Partial returns an MvcHtmlString, whereas RenderPartial returns void and renders directly to the view, and because of this, RenderPartial works a bit faster.

Partial helper

This helper is used to render the specified partial view as an HTML-encoded string. Also, it is very easy to use and does not need to create any action.

To explore this, go to the Models in Razor (Should know) recipe in which we created CRUD views, and open the Index.cshtml file.

In this code, you can see that I am looping through each record in the model using the foreach loop. This produces the following output:

In case we need this view somewhere else in the website, the best way to do this is by creating a partial view with the code we selected earlier and then render it in the view using a set of helpers.

To do this, follow these steps:

  1. Right-click on the folder to add a partial view. You can add it inside the controller's own View folder or inside the Shared folder for application-level availability.

    It is a best practice to name the partial view preceded by an underscore character (_), but it is not mandatory. The underscore character (_) before the view name specifies that it is a reusable component. You can create a strongly-typed view by checking it and selecting the Model class name, however, that is also not mandatory, as you can go with a simple name. Don't forget to check Create as a partial view.

  2. Now, in the opened partial view page add the following code. This code snippet is very similar to earlier one that I selected in the rectangle in the first screenshot of this section.

    @model MvcApplication1.Models.ToDo
            @Html.DisplayFor(model => model.Title)
            @Html.DisplayFor(model => model.Description)
            @Html.DisplayFor(model => model.IsDone)
            @Html.ActionLink("Edit", "Edit", new { id=Model.ToDoId }) |
            @Html.ActionLink("Details", "Details", new { id=Model.ToDoId }) |
            @Html.ActionLink("Delete", "Delete", new { id=Model.ToDoId })

In this code, I have made some quick modifications to match the model convention. Now this partial view is ready to be used anywhere in the application, by just using a helper as shown in the next step.

  1. When you are done with the previous steps, replace the Index.cshtml code as shown in the following code:

Here, I'm rendering the partial view using the Partial helper method, and for each item in the model, the Partial helper will return a row.


This helper is used to render the specified partial view by using the specified HTML helper. Also, it is very easy to use and does not need to create any action.

To explore this, let's add a fresh partial view in the Shared folder by the name of _WelcomeNote and write a message. Now, this partial view can be rendered on the view page using either Partial or RenderPartial, as shown in the following screenshot:

On running the application, you will see the following output:

You can see how easy it is to render a partial view using Partial and RenderPartial helper methods.

Action and RenderAction helpers

The Action helper is used to invoke the specified child action method that returns the result as an HTML string, whereas the RenderAction helper is used to invoke the specified child action method using the specified controller name and renders the result inline in the parent view. For these helpers, we need to create a child action for rendering the partial view.

To explore this, let's add a child action and update the view page, as shown in the following screenshot:

On running the application, you will see the following output:

Again, this is also very easy.

You learned various ways (Partial, RenderPartial, Action, and RenderAction) for rendering a partial view. I hope you are now quite confident with partial views and how to render them.

How it works...

By looking at these examples, you will have noticed that it is very easy to bring partial views on view page using Partial and RenderPartial helpers rather than Action and RenderAction helpers, because Action and RenderAction helpers render the partial view with the help of the controller's method (also known as the child action). So, if you just want to render a partial view, use Partial or RenderPartial , and if you want to render a partial view that accepts the model, then you need the child action returning the model.

There's more...

We can also use jQuery to make an Ajax request and load a partial view into a view. For example:


Here, #profile is an HTML element on the view page and account/profile is the controller and action result respectively.