.Net, Programming

Create custom view engine in MVC application

There are various third-party view engines available like Nhaml (pronounced enamel), spark, Brail, nVelocity but the most famous one is Razor used .cshtml and .vbhtml files to recognize views to render as simple HTML.

You can create your own view engine and even use that with other view engines in one application. To use your custom view engine, you have to register your view engine in global.aspx file.

To create a view engine you have to do the following steps in your application.

Step 1:

Create new folder name CustomViewEngine and add a class with name CustomView.cs and inherit IView interface to this class and also add code as below:

public class CustomView: System.Web.Mvc.IView
{
public void Render(System.Web.Mvc.ViewContext viewContext, System.IO.TextWriter writer)
{
// Parsing logic
// read the view file
string strFileData = File.ReadAllText(_FolderPath);
// we need to and replace datetime.now value
string strFinal = strFileData.Replace("","Today's Date/Time: " + DateTime.Now.ToString());
// this replaced data has to sent for display
writer.Write(strFinal);
}

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

Here we can see is our custom tag which is used to provide the custom string or HTML string which has been rendered by MVC application.

Step 2:

Create one more class as CustomViewEngineProvider.cs which inherits VirtualPathProviderViewEngine and that helps to provide the folder path of custom view and extension. In Razor, it is like .cshtml but in our custom view it is as .customview or you can set your own name. You can see ViewLocationFormats used to locate new custom views to render.

public class CustomViewEngineProvider : System.Web.Mvc.VirtualPathProviderViewEngine
{
public CustomViewEngineProvider()
{
// Define the location of the View file
this.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.customview",
"~/Views/Shared/{0}.customview" }; //location and extension of our views
}
protected override System.Web.Mvc.IView CreatePartialView(System.Web.Mvc.ControllerContext controllerContext, string partialPath)
{
var physicalpath = controllerContext.HttpContext.Server.MapPath(partialPath);
CustomView obj = new CustomView(); // Custom view engine class
obj.FolderPath = physicalpath; // set the path where the views will be stored
return obj;
}

protected override System.Web.Mvc.IView CreateView(System.Web.Mvc.ControllerContext controllerContext, string viewPath, string masterPath)
{
var physicalpath = controllerContext.HttpContext.Server.MapPath(viewPath);
CustomView obj = new CustomView(); // Custom view engine class
obj.FolderPath = physicalpath; // set the path where the views will be stored
return obj; // returned this view
}
}

Step3:

To use that view we have to register in global.asax file by add custom view into ViewEngines collection.

protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
ViewEngines.Engines.Add(new CustomViewEngineProvider());
}

Now we can use this custom view engine by adding new view file as Testcustom.customview in Views folder and you need to add in the controller like below:

public ActionResult Testcustom()
{
return View();
}

Add the tag in Testcustom.customview and we can see below output with a string that we mentioned in CustomView class to render in view.

CreateCustomViewEngine_Output-326x169

 

Tagged

Leave a Reply

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