Creating Custom View Engine Using ASP.NET MVC | ASP.NET MVC Programmer Guide

we can create our own custom view engine in MVC. To create our own custom view engine we need to follow three steps:

Let’ say we want to create a custom view engine where in the user can type a command like “<DateTime>” and it should display the current date and time.

Step 1: We need to create a class which implements the IView interface. In this class we should write the logic of how the view will be rendered in the render function. Below is a simple code snippet for that.

 

public class MyCustomView : IView
{
    private string _FolderPath; // Define where  our views are stored
    public string FolderPath
    {
        get { return _FolderPath; }
        set { _FolderPath = value; }
    }

    public void Render(ViewContext viewContext, System.IO.TextWriter writer)
    {
       // Parsing logic <dateTime>
        // read the view file
        string strFileData = File.ReadAllText(_FolderPath);
        // we need to and replace <datetime> datetime.now value
        string strFinal = strFileData.Replace("<DateTime>", DateTime.Now.ToString());
        // this replaced data has to sent for display
        writer.Write(strFinal); 
    }
} 

Step 2: We need to create a class which inherits from VirtualPathProviderViewEngine and in this class we need to provide the folder path and the extension of the view name. For instance, for Razor the extension is “cshtml”; for aspx, the view extension is “.aspx”, so in the same way for our custom view, we need to provide an extension. Below is how the code looks like. You can see the ViewLocationFormats is set to the Views folder and the extension is “.myview”.

public class MyViewEngineProvider : VirtualPathProviderViewEngine
{
    // We will create the object of Mycustome view
    public MyViewEngineProvider() // constructor
    {
        // Define the location of the View file
        this.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.myview", 
          "~/Views/Shared/{0}.myview" }; //location and extension of our views
    }
    protected override IView CreateView(
      ControllerContext controllerContext, string viewPath, string masterPath)
    {
        var physicalpath = controllerContext.HttpContext.Server.MapPath(viewPath);
        MyCustomView obj = new MyCustomView(); // Custom view engine class
        obj.FolderPath = physicalpath; // set the path where the views will be stored
        return obj; // returned this view paresing
        // logic so that it can be registered in the view engine collection
    }
    protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
    {
        var physicalpath = controllerContext.HttpContext.Server.MapPath(partialPath);
        MyCustomView obj = new MyCustomView(); // Custom view engine class
        obj.FolderPath = physicalpath; // set the path where the views will be stored
        return obj;
        // returned this view paresing logic
        // so that it can be registered in the view engine collection
    }
} 

Step 3: We need to register the view in the custom view collection. The best place to register the custom view engine in the ViewEngines collection is the global.asax file. Below is the code snippet for that.

protected void Application_Start()
{
    // Step3 :-  register this object in the view engine collection
    ViewEngines.Engines.Add(new MyViewEngineProvider());
    …..
} 

Below is a simple output of the custom view written using the commands defined at the top.

Figure: Custom view engine using MVC

If you invoke this view, you should see the following output: