Post
Ask Question

Revolutionize Your Umbraco Development with View Components

Umbraco is an open-source content management system(CMS). Umbraco has the ability to use view components to build dynamic and reusable user interface (UI) elements. The latest version of Umbraco is built on top of the .Net core and offers many exciting new features and improvements. One of the key improvements is the introduction of view components.

View components are a powerful tool that allows developers to create reusable components that can be used across different pages and templates. They are similar to partial views but with more advanced functionality.

In this article, we’ll take a closer look at view components in Umbraco v10+.

What are View Components?

View components are self-contained, reusable components that can be used across different pages and templates in a Umbraco website. They are similar to partial views in that they allow developers to create reusable components that can be inserted into different pages and templates.

However, view components are more advanced than partial views. They are more flexible and can be used to perform more complex tasks. For example, view components can be used to create complex forms, display dynamic content, or perform calculations.

View components consist of two parts: the C# code and the Razor view. The C# code performs the logic, while the Razor view defines the HTML markup that is rendered to the page. The code and the view are kept separate, which makes it easier to maintain and update the components.

How to create and invoke a view component
 

Creating View Components

Creating view components in Umbraco is straightforward. The first step is to create a new folder in the project called “ViewComponents.” Inside this folder, create a new class file with the name of the component.

For example, if we are creating a component to display a list of products from the database, we could call the file “ProductListComponent.cs”.

Inside the class file, we need to define the component. The component should inherit from the “ViewComponent” class and override the “InvokeAsync” method. This method is responsible for performing the logic and returning the view that should be rendered.

Here’s an example of a simple view component class:

[ViewComponent(Name = "ProductList")]
public class ProductListComponent : ViewComponent
{
     private readonly IDbContext _context;

  public ProductListComponent(IDbContext context)
  {
     _context = context;
  }

  public async Task<IViewComponentResult> InvokeAsync()
  {
     var products = await _context.Products.ToListAsync();
     return View(products);
  }
}

In this example, the component retrieves a list of products from a database and returns it to the view. The next thing we need to do is create the view for this ViewComponent.

Create the view for this ViewComponent

Once we have created the view component class, let’s create a view file for the view component.

Views/Components/ProductList/Default.cshtml

@using Umbraco.Cms.Web.Common.PublishedModels;
@model IEnumerable<Product>
  
<ul>
     @foreach(var product in Model){
        <li>@product.Name</li>
        <li>@product.OtherProperties</li>
      }
</ul>

Let’s use it in the templates and pages. To do this, we need to add a tag to the Razor code that specifies the name of the component. Here’s an example:

@await Component.InvokeAsync("ProductList")

In this example, the “ProductListComponent” is being invoked. The component will perform its logic and render the view, which will be inserted into the page at this location.

Why the View component?

Why would we need to use the view component when there is already a partial view available?

Key differences & advantages

  • More Advanced: Offer more advanced functionality and flexibility than partial views, they are self-contained components that can be used to perform complex tasks, such as displaying dynamic content or processing form submissions.
  • Separation of concerns: View components consist of both C# code and Razor views, which allows developers to separate the logic and presentation of the component.
  • Dependency Injection: Supports constructor dependency injection.

Say goodbye to the traditional partial view?

No, sometimes a plain partial view is sufficient and preferable over a ViewComponent. Here are some situations where one option may be more suitable than the other:

  • Simple: When the functionality of the component is relatively simple and does not require any additional logic beyond rendering the view.
  • Render: When we need to render a small piece of content that does not require additional data or database queries.
  • Reuse: When we have a simple reusable piece of markup that can be included in multiple views without any additional functionality.
  • Splitting: When we need to render content inside a layout or another view, we do not need to pass any additional data to the view.

View components and partial views are both useful tools for creating reusable components in a web application. The choice between the two depends on the complexity and functionality of the component you need to create. Partial views are best for simple HTML markup, while view components are better suited for more complex functionality.

Conclusion

View components are a powerful tool that allows developers to create reusable components that can be used across different pages and templates in a Umbraco website. They are easy to create and use and provide a lot of flexibility for creating complex functionality. Both ViewComponents and Partial Views have their own unique use cases and advantages.

When deciding between these two options, it’s important to consider the specific requirements of the project and choose the option that best meets the needs. With a good understanding of the strengths and weaknesses of both ViewComponents and Partial Views.

We can definitely consider using view components to improve the code’s maintainability and flexibility and create efficient and effective components for a better Umbraco web application.

Gist : https://gist.github.com/dKumarmj/cc26066bad302c9413e106df90f5c38d

Thank you for reading!

Hope you found this article helpful. Should you have any questions, you are always welcome to reach out to me.


Similar Articles