ASP.NET Web App vs ASP.NET MVC – Comparing File size and Html View Source

If you’ve been keeping any attention to my recent posts you’ll see that I’ve been toying with and learning ASP.NET MVC.  MVC is clean and light weight.  It’s everything I wanted .NET to be.

Out of curiosity I did a comparison.

I wrote a simple contacts from the AdventureWorks database.  One version using the default ASP.NET 4.0 Web Application Project and the other using ASP.NET MVC 2 Project.

On both projects I created the same functionality the simplest way I knew.

From default projects I added an Entity Framework Model of the database.

ASP.NET 4.0 Web App ASP.NET MVC 2 Web App
image image

I modified both Master pages to include jQuery and have a button in the footer that told me the page size in kb. Also added an additional menu item called “Contacts”

 

Home Page:

I modified both home pages just to say Adventure Works and Home Page.

 

ASP.NET 4.0 – Home Page – File Size: 2.47kb
 image

ASP.NET MVC 2 – Home Page – File Size: 0.69kb
image

 

Contacts Page:

Created the Contacts page to list the top 50 contacts from the Contact table in Adventure works. From this list you can click on a link to edit the contact. I limited the fields to just the ones shown.

ASP.NET 4.0 – Contacts Page – File Size: 47.50kb
image 2.47

ASP.NET MVC 2 – Contacts Page – File Size: 30.30kb
image

 

Contact Edit Page:

 

On the Contact edit page I added validation for the .NET and extra validation on the MVC side to match the .NET, since MVC has built in validation already. I added required fields to Title, Phone and Email.

ASP.NET 4.0 – Contact Edit Page – File Size: 10.00kb
image

ASP.NET MVC 2 – Contact Edit Page – File Size: 1.82kb
image

 

Contact Edit Page With Errors:

Then I blanked out the required fields and tried to do a save.

ASP.NET 4.0 – Contact Edit Page – File Size: 9.92kb
image

ASP.NET MVC 2 – Contact Edit Page – File Size: 2.27kb
image

 

Contact Edit Page View Source:

Since this page has the most drastic change. I thought I’d show the view source differences. You’ll see what you’re used too in the .NET 4.0 code, such as ViewState.  You won’t find anything like that in the MVC Source.

ASP.NET 4.0 – View Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>

</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
   1:  
   2:     
   3: </head>
   4: <body>
   5:     <form method="post" action="EditContact.aspx?ID=2" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl01">
   6: <div class="aspNetHidden">
   7: <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
   8: <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
   9: <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4NDE5MzY0MjdkZJcZYmtPZoLLOePFV+1ApdqOkLlUkaADsWHG0UuqS9uy" />
  10: </div>
  11:  
  12: <script type="text/javascript"> 
  13: //<![CDATA[
  14: var theForm = document.forms['ctl01'];
  15: if (!theForm) {
  16:     theForm = document.ctl01;
  17: }
  18: function __doPostBack(eventTarget, eventArgument) {
  19:     if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
  20:         theForm.__EVENTTARGET.value = eventTarget;
  21:         theForm.__EVENTARGUMENT.value = eventArgument;
  22:         theForm.submit();
  23:     }
  24: }
  25: //]]>
</script>
   1:  
   2:  
   3:  
   4: <script src="/WebResource.axd?d=rpDV5lYn3IaummS63NE_2Q1Jtwkxg_wWwZ7flTZnPl-_hyeTnekRfJHuo1_m8da4QUiNH84sihf1gBG_zEmQsRKwhMOrcao1Nidsc_FjGJk1&amp;t=634227375085699878" type="text/javascript">
   1: </script>
   2:  
   3:  
   4: <script src="/WebResource.axd?d=yqF50G3amP76dgnuXSDqrR-Z-FE57OP97CzzFR3Q80Z6rPOxPdOsaKweNOtYlKJSSZ0zEtNXrdWv_B8KkZBYjDRHsirjAD67Qki53R4PpCQ1&amp;t=634227375085699878" type="text/javascript">
   1: </script>
   2: <script src="/WebResource.axd?d=HIqme4K1Z_NhNkoBU3rBVY7pfAn1iQRfCSOAtiayjvvAFXmUADu6qR84lzcCQ8RYojG2Derx-p3SM2wPgsCswGcC7lkMavJM-duHIb8DjvI1&amp;t=634227375085699878" type="text/javascript">
   1: </script>
   2: <script type="text/javascript"> 
   3: //<![CDATA[
   4: function WebForm_OnSubmit() {
   5: if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
   6: return true;
   7: }
   8: //]]>
</script>
   1:  
   2:  
   3: <div class="aspNetHidden">
   4:  
   5:     <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCQKB7+KQBQKAqo2fBQKj7diWAgKR7a/UAwL8jLCWCgLJj/62AwKprImqAwLVw96TCQKnk93nCbgxuO2j4LdE3f2GfgnicZRAvfHze6AaPKfca0UC9bdY" />
   6: </div>
   7:     <div class="page">
   8:         <div class="header">
   9:             <div class="title">
  10:                 <h1>
  11:                     My ASP.NET Application
  12:                 </h1>
  13:             </div>
  14:             <div class="loginDisplay">
  15:                 
  16:                         [ <a href="Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In</a> ]
  17:                     
  18:             </div>
  19:             <div class="clear hideSkiplink">
  20:                 <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=TmuB4w3dYhxsh1Xv0ri7S4JYvbwxZdOmpw671tEiWmocv3uzBjwO2JJRTIt9J_tdKcpS52MtKL-8-OBDYWWfBEzCE0ySEuLYR6VnjfTx3ck1&amp;t=634227375085699878" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
  21:     <ul class="level1">
  22:         <li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li><li><a class="level1" href="Contacts.aspx">Contacts</a></li>
  23:     </ul>
  24: </div><a id="NavigationMenu_SkipLink"></a>
  25:             </div>
  26:         </div>
  27:         <div class="main">
  28:             
  29:  
  30:     <h2>
  31:         Edit Contact
  32:     </h2>
  33:     <p>
  34:         <table>
  35:             <tr>
  36:                 <td>Title</td>
  37:                 <td><input name="ctl00$MainContent$tbTitle" type="text" value="Ms." id="MainContent_tbTitle" /></td>
  38:                 <td><span id="MainContent_rfvTitle" style="color:Red;visibility:hidden;">Title is Required</span></td>
  39:             </tr>
  40:             <tr>
  41:                 <td>First Name</td>
  42:                 <td><input name="ctl00$MainContent$tbFirstName" type="text" value="Catherine" id="MainContent_tbFirstName" /></td>
  43:                 <td><span id="MainContent_RequiredFieldValidator1" style="color:Red;visibility:hidden;">First Name is Required</span></td>
  44:             </tr>
  45:             <tr>
  46:                 <td>Middle Name</td>
  47:                 <td><input name="ctl00$MainContent$tbMiddleName" type="text" value="R." id="MainContent_tbMiddleName" /></td>
  48:             </tr>
  49:             <tr>
  50:                 <td>Last Name</td>
  51:                 <td><input name="ctl00$MainContent$tbLastName" type="text" value="Abel" id="MainContent_tbLastName" /></td>
  52:                 <td><span id="MainContent_RequiredFieldValidator2" style="color:Red;visibility:hidden;">Last Name is Required</span></td>
  53:             </tr>
  54:             <tr>
  55:                 <td>Suffix</td>
  56:                 <td><input name="ctl00$MainContent$tbSuffix" type="text" id="MainContent_tbSuffix" /></td>
  57:             </tr>
  58:             <tr>
  59:                 <td>Email Address</td>
  60:                 <td><input name="ctl00$MainContent$tbEmailAddress" type="text" value="catherine0@adventure-works.com" id="MainContent_tbEmailAddress" /></td>
  61:                 <td><span id="MainContent_RequiredFieldValidator3" style="color:Red;display:none;">Email Address is Required</span>
  62:                     <span id="MainContent_revEmail" style="color:Red;display:none;">Email is invalid!</span>
  63:                 </td>
  64:             </tr>
  65:             <tr>
  66:                 <td>Phone</td>
  67:                 <td><input name="ctl00$MainContent$tbPhone" type="text" value="747-555-0171" id="MainContent_tbPhone" /></td>
  68:                 <td><span id="MainContent_RequiredFieldValidator4" style="color:Red;visibility:hidden;">Phone is Required</span></td>
  69:             </tr>
  70:             <tr>
  71:                 <td colspan="2">
  72:                     <input type="submit" name="ctl00$MainContent$btnSave" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$btnSave&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="MainContent_btnSave" />
  73:                 </td>
  74:             </tr>
  75:         </table>
  76:     </p>
  77:     <div>
  78:         <a href="/Contacts.aspx">Back to List</a>
  79:     </div>
  80:  
  81:         </div>
  82:         <div class="clear">
  83:         </div>
  84:     </div>
  85:     <div class="footer">
  86:         <button onclick="alert(($('html').html().length)/1024);">Page Size</button>
  87:     </div>
  88:     
  89: <script type="text/javascript"> 
  90: //<![CDATA[
  91: var Page_Validators =  new Array(document.getElementById("MainContent_rfvTitle"), document.getElementById("MainContent_RequiredFieldValidator1"), document.getElementById("MainContent_RequiredFieldValidator2"), document.getElementById("MainContent_RequiredFieldValidator3"), document.getElementById("MainContent_revEmail"), document.getElementById("MainContent_RequiredFieldValidator4"));
  92: //]]>
</script>
   1:  
   2:  
   3: <script type="text/javascript"> 
   4: //<![CDATA[
   5: var MainContent_rfvTitle = document.all ? document.all["MainContent_rfvTitle"] : document.getElementById("MainContent_rfvTitle");
   6: MainContent_rfvTitle.controltovalidate = "MainContent_tbTitle";
   7: MainContent_rfvTitle.errormessage = "*";
   8: MainContent_rfvTitle.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
   9: MainContent_rfvTitle.initialvalue = "";
  10: var MainContent_RequiredFieldValidator1 = document.all ? document.all["MainContent_RequiredFieldValidator1"] : document.getElementById("MainContent_RequiredFieldValidator1");
  11: MainContent_RequiredFieldValidator1.controltovalidate = "MainContent_tbFirstName";
  12: MainContent_RequiredFieldValidator1.errormessage = "*";
  13: MainContent_RequiredFieldValidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
  14: MainContent_RequiredFieldValidator1.initialvalue = "";
  15: var MainContent_RequiredFieldValidator2 = document.all ? document.all["MainContent_RequiredFieldValidator2"] : document.getElementById("MainContent_RequiredFieldValidator2");
  16: MainContent_RequiredFieldValidator2.controltovalidate = "MainContent_tbLastName";
  17: MainContent_RequiredFieldValidator2.errormessage = "*";
  18: MainContent_RequiredFieldValidator2.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
  19: MainContent_RequiredFieldValidator2.initialvalue = "";
  20: var MainContent_RequiredFieldValidator3 = document.all ? document.all["MainContent_RequiredFieldValidator3"] : document.getElementById("MainContent_RequiredFieldValidator3");
  21: MainContent_RequiredFieldValidator3.controltovalidate = "MainContent_tbEmailAddress";
  22: MainContent_RequiredFieldValidator3.errormessage = "*";
  23: MainContent_RequiredFieldValidator3.display = "Dynamic";
  24: MainContent_RequiredFieldValidator3.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
  25: MainContent_RequiredFieldValidator3.initialvalue = "";
  26: var MainContent_revEmail = document.all ? document.all["MainContent_revEmail"] : document.getElementById("MainContent_revEmail");
  27: MainContent_revEmail.controltovalidate = "MainContent_tbEmailAddress";
  28: MainContent_revEmail.errormessage = "*";
  29: MainContent_revEmail.display = "Dynamic";
  30: MainContent_revEmail.evaluationfunction = "RegularExpressionValidatorEvaluateIsValid";
  31: MainContent_revEmail.validationexpression = "^[a-zA-Z][\\w\\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\\w\\.-]*[a-zA-Z0-9]\\.[a-zA-Z][a-zA-Z\\.]*[a-zA-Z]$";
  32: var MainContent_RequiredFieldValidator4 = document.all ? document.all["MainContent_RequiredFieldValidator4"] : document.getElementById("MainContent_RequiredFieldValidator4");
  33: MainContent_RequiredFieldValidator4.controltovalidate = "MainContent_tbPhone";
  34: MainContent_RequiredFieldValidator4.errormessage = "*";
  35: MainContent_RequiredFieldValidator4.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
  36: MainContent_RequiredFieldValidator4.initialvalue = "";
  37: //]]>
</script>
   1:  
   2:  
   3: <script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });
</script>
   1:  
   2: <script type="text/javascript"> 
   3: //<![CDATA[
   4:  
   5: var Page_ValidationActive = false;
   6: if (typeof(ValidatorOnLoad) == "function") {
   7:     ValidatorOnLoad();
   8: }
   9:  
  10: function ValidatorOnSubmit() {
  11:     if (Page_ValidationActive) {
  12:         return ValidatorCommonOnSubmit();
  13:     }
  14:     else {
  15:         return true;
  16:     }
  17: }
  18:         //]]>
</script>
</form>
</body>
</html>


ASP.NET MVC – View Source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

Edit

</title><link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>

<body>
<div class="page">

<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>

<div id="logindisplay">


[ <a href="/Account/LogOn">Log On</a> ]

</div>

<div id="menucontainer">

<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Contact">Contacts</a></li>
</ul>

</div>
</div>

<div id="main">


<h2>Edit Contact</h2>




<form action="/Contact/Edit/2" method="post">
<fieldset>
<legend>Fields</legend>

<div class="editor-label">
<label for="Title">Title</label>
</div>
<div class="editor-field">
<input id="Title" name="Title" type="text" value="Ms." />

</div>

<div class="editor-label">
First Name
</div>
<div class="editor-field">
<input id="FirstName" name="FirstName" type="text" value="Catherine" />

</div>

<div class="editor-label">
Middle Name
</div>
<div class="editor-field">
<input id="MiddleName" name="MiddleName" type="text" value="R." />

</div>

<div class="editor-label">
Last Name
</div>
<div class="editor-field">
<input id="LastName" name="LastName" type="text" value="Abel" />

</div>

<div class="editor-label">
<label for="Suffix">Suffix</label>
</div>
<div class="editor-field">
<input id="Suffix" name="Suffix" type="text" value="" />

</div>

<div class="editor-label">
Email Address
</div>
<div class="editor-field">
<input id="EmailAddress" name="EmailAddress" type="text" value="catherine0@adventure-works.com" />

</div>

<div class="editor-label">
<label for="Phone">Phone</label>
</div>
<div class="editor-field">
<input id="Phone" name="Phone" type="text" value="747-555-0171" />

</div>

<p>
<input type="submit" value="Save" />
</p>
</fieldset>

</form>

<div>
<a href="/Contact">Back to List</a>
</div>



<div id="footer">
<button onclick="alert(($('html').html().length)/1024);">Page Size</button>
</div>
</div>
</div>
</body>
</html>

About Page:

On the about page I dropped in the same number of controls.

 

ASP.NET 4.0 – About Page – File Size: 4.78kb
image

ASP.NET MVC 2 – About Page – File Size: 3.21kb
image

 

Total ASP.NET 4.0 Size Across Pages: 74.67

Total ASP.NET MVC 2 Size Across Pages: 38.29

 

Now is it all about just page size? No, but you have to admit out of the box. MVC is 50% more light weight then .NET on a whole it seems. Or if you have many editing pages, it’s 9x smaller! from 10kb to 1kb? Take that and start adding real data on a complex application and I think you’ll see some big differences.

There are other benefits to MVC as well. Unit testing is very easy. You have way more control over what goes back to the browser.  No more view state and server state.

Anyway, this wasn’t a real world comparison but it’s good enough to see the drastic changes.

Feel free to download the projects, keep in mind you’ll need a local running instance of SQL Express or Development Server with the AdventureWorks sample database installed. Then update your connection string in web.config.

ASP.NET 4.0 Web App in Visual Basic:

ASP.NET MVC 2 Web App In Visual Basic:

 

Releated Blog Post a friend of mine found. Webforms & Jquery: A Comparison

Comments are closed