View injection using inject in ASP.NET Core Mvc

View injection is most useful feature introduced in ASP.NET Core. Using ASP.NET Core inbuilt dependency injection container, we can easily inject dependencies in controllers, filters and views. In this post I am going to show how to inject dependencies using inject keyword in view.

Previously, to retrieve data in view we must pass it from the controller using controller properties (like ViewBag, ViewData) or model properties. In ASP.NET Core Mvc things are quite smooth by the usage of Inject directive. Inject will helps to inject dependencies directly to view and retrieve the data.



If you're beginner in ASP.Web Core MVC,  talk over with my earlier article quick start to configure ASP.Net Core MVC on the way to aid to configure MVC in ASP.Web Core project.

Setup project

In Visual Studio, create a new project (File > New > Project), and select ASP.NET Core Web Application (.NET Core).



Enter a name of the application and click OK.

Select Web Application to generate default ASP.NET Core Mvc project.(learn quick configure MVC in ASP.NET Core)



Visual Studio will automatically generate ASP.NET Core Mvc project structure and displays a welcome screen.


Add Services

Add new folder "Models" and add FruitServices class in it. Now, add method GetFruits() which returns List<string>().
public class FruitServices
{
    public List<string> GetFruits()
    {
        return new List<string>() { "Mango", "Apple", "Apricot", "Banana", "Grapes" };
    }
}

Inject in View

We can inject a service into a view using the @inject directive. You can think of @inject as adding a property to your view, and populating the property using DI.

The basic syntax for View Injection is
@inject <service> <name>
  • @inject is directive used to inject dependencies 
  • <service> is service class
  • <name> is service injection name by which we can access service methods.

In our example, we are going to inject FruitServices and giving service injection name fruitList.

@inject MVCCoreExample.Models.FruitServices fruitList

<h3>Fruit List</h3>
<ul>
    @foreach (var name in fruitList.GetFruits())
    {
        <li>@name</li>
    }
</ul>

This view displays a list of fruits which is populated from the injected FruitServices. Using GetFruit() method we can retrieve a list of fruits.

Let's run it without registering FruitServices in DI container.



When we the run app, it will throw an exception "No service for type 'MVCCoreExample.Modes.FruitServices' has been registered". This error occurred because of we didn't registered FruitServices in a dependency injection container.

Let's register it first and try again!

Register Service

Open startup.cs class and register service for dependency injection in ConfigureServices method. You can registered you own application services using AddTransient method. FruitServices will be instantiated by the container and used to fulfill such requests.

public void ConfigureServices(IServiceCollection services)
{
    // Add framework services.
    services.AddMvc();
    services.AddTransient<FruitServices>();
}

Run it!

Here it is! The sample displays data from service injected in view. 

Summary

Injecting dependencies directly into MVC view can make thing bit easier. In this post I have shown a simple View Injection sample to understand the use of Inject directive. View injection can be useful for populating UI elements like selection list, radio buttons etc. This will increase code re-usability and keep your controller clean by minimizing the amount of code required on controllers.

Reference 
http://aspnetmvc.readthedocs.io/projects/mvc/en/latest/views/dependency-injection.html
Image credit: https://learnnutritionwithme.com/tag/diet/