WebForms to MVC

I was recently tasked with updating a form. The form has 6 fields, it has validation and some AJAX.

The original version was written in WebForms.

WebForms

In Web forms when AJAX was needed UpdatePanels were used. GridViews were used to display the results of the form entries. It’s a typical webform page.

Metrics

For the Web forms implementation the html (aspx) was about 1000 lines. The code behind was also just over 1000 lines, in total over 2000 lines.

MVC

In the MVC version when AJAX was needed jQuery was used. Validation is handled in the page with jQuery. The form submission and results are all handled with jQuery. In place of the Gridview, jQuery is used to add data to an html table. The only server code is then initial population of the drop-down values.

Metrics

The UI code is just over 300 lines and server code is about 150 lines, total lines of code for the new solution is 450.

Why such a difference in lines of code? In web forms the data (form data) is packages up and ferried to the server for processing. In MVC the data is processed in the client near the data creation. When an error is found, in MVC it’s simply displaying an error message on the screen. In the Web Forms model the field values are sent back to the server for evaluation. When an error is discovered it’s packaged up sent back to the client when it’s displayed to the user.

The reason MVC’s solution is smaller is because the solution is closer to the creation of data. Web Forms has a higher cost because it is farther away and thus has more complexity due to transportation and communication.