Anatomy of an ASP.NET MVC Control
One of the great things about ASP.NET WebForms was that it was very easy to create reuseable custom controls and components, but with appearance of ASP.NET MVC and lots of developers moving towards it, which is a good thing, what happens to component oriented development? Is is possible to create custom controls in MVC? Can we port our existing controls to MVC? ASP.NET MVC while may not be as good as WebForms when it comes to drag-and-drop style of using components, but it is fairly easy to use and to create custom controls in MVC! Let’s see how. To create a control in WebForms world, you’d extend the existing WebControl class and override Render method which takes a HtmlTextWriter that you can use to output the desired HTML code to the browser. A control rendering Hello World on the screen would be as simple as this:
1 | public class HelloWorldControl : WebControl |
You’d put this on your web page and you’re all set. But what’s the best approach in MVC controls? There’s no WebControl or Control classes inside Mvc assemblies, so can either use any existing class you have as a base class or it from scratch.
1 | public class WebControl |
With this, you have a ready to use base class for your controls. You need to override the Render method and construct the right HTML code. The code would look almost identical:
1 | public class HelloWorldControl : WebControl |
Note: There’s a catch here. We’d use existing methods on HtmlTextWriter in WebForms, which emitted correct HTML code per Browser. If you’re writing the HTML code manually (as I did in this example) you’d be careful in case you need to support different browsers. How do we use this in an MVC application you might ask? The way to do this, as it is already done in the MVC framework with other controls such as TextBox, CheckBox, etc. is to create an extension method on HtmlHelper class:
1 | public static class HelloWorldControlExtensions |
Now you can add this controls to your views, as easy as other controls such as TextBoxes:
1 | <%= Html.HelloWorld() %> |
That’s almost it. The only thing remaining here is to implement control specific logic of your components and that part is left to you.