So you want to be a .net developer? Web, Backend, Middle Tier? You’re asking yourself where do I start?

So occasionally I get asked from friends and friends of friends and friends of friends of friends, I want to be a <insert, programmer, web developer, build websites, etc>.  How do I get started?

This is a loaded question. There so many directions to go and languages to choose from and then there is the college route, certification route or both. Then you have the Unix side of the house, the Microsoft side, now the all popular apple and android sides. Web platform, OS platform or mobile platform. Then you have to figure out where you like to work the most; on the front-end UI, back-end logic or maybe the database layer.

So for this article I’m going to with a bunch of assumptions.

  • You want to build web applications (You can apply this to OS applications, website and mobile later)
  • I’m assuming college doesn’t matter and is not needed (though a Computer Science degree would be awesome)
  • You aren’t doing it for the money (more on this later)
  • You’re following the Microsoft track using .NET (though the same techniques can be applied to other languages and application types, got to start somewhere)

 

You are not in it for the money:

This is my biggest pet peeve. If you are trying to be a programmer because you think they get paid a lot. Stop right now and go find something else to do.  Do what you like not because it pays a lot. Those type of programmers are the worst I ever meet. You go to work and do your job and try to get all your learning from on the job training. You go home and don’t give a crap about your job or try and don’t try to learn and enhance your skill sets at home.  You drain the life out of all the other programmers at work. I’ve seen this time and time again.

If you want to be a good programmer, or awesome, programming needs to be your hobby. You need to go home after work and continue learning.  You have to have a desire to be on the computer; programming your own projects for fun to learn new techniques after work. At home at night on the weekends. In life you should do what makes you happy and what you enjoy. Not because you think you can make a lot of money. If you don’t enjoy programming, don’t do it. I can go on about this so I’ll stop here.

 

What to Learn:

  • The Presentation Layer (or what we can the “Front-End” work): This is the visual aspects of your application and interactions. What it looks like how it functions.
    • HTML – Must Learn
    • CSS – You can get away with it if you don’t like front-end work but you should learn the basics
    • Javascript – You can get away with it if you don’t like front-end but you should learn the basics
    • jQuery – This heavenly needed for good interactions on your web application but you could get away with this if you don’t like the front-end. However, you should have a basic understanding.

Training Suggestions: On the web. Start with W3Schools. Great site, simple and straight forward. Soak in all the information you need. Always a good resource.

  1. W3Schools – For each section complete the “Basic” section. HTML, HTML5, CSS, CSS3, HTML DOM, JavasScript, jQuery,
  • The Business or Middle Tier Layer (or what we call the “Back-End”): This is the logic and heart of your application. Taking the information provided in the Presentation Layer and doing something with it. Calculations, data manipulation, saving it to the database etc..
    • .NET C# (or VB.NET but C# is more popular now a days and usually pays more (being that you are doing this even as a hobby, then yes pay is important and a side-benefit.))
    • ASP.NET MVC3 (this is newer then ASP.NET WebForms which is just as popular, but MVC is the future)

Training Suggestions: On the web and study books for certifications. Some people knock certifications, usually the ones that don’t have one. Certifications won’t make you great, only experience will do that. However, Certifications will teach you everything you should know and aspects that others don’t know because they don’t study for the certs. Small things here and there that add up. As well as showing to an employer that you might not have experience but you definitely can program and know the basics if you have your certs. More about certs in an updated post. Old post here.

  1. ASP.NET is a great place to get started. Specifically ASP.NET / MV3 site. Go through Chapters 1 through 12.
  2. C# Station – I’d stay maybe go to chapter 8 or 10.
  • The Database Tier (Also, part of the “Back-End”): This is storing data. Manipulating data. How to retrieve the data and run reports or searches.
    • First learn some SQL basics from W3Schools. Go through all the SQL Basic chapters.
    • Optional: Then you can learn say T-SQL which is Microsoft language of SQL built off of basic SQL. However, you don’t need this yet and learn as you go after W3Schools.

This is enough to get you started. Learn all the basics then figure out where you like to play the most.

  • Advanced Items: Other things you should know.

Free MVC3 Training via Virtual Conference

Awesome find by my friend Pasha.

http://www.mvcconf.com/

Free/Donation virtual conference on ASP.NET MVC3.

Some of the speakers:

Scott Guthrie – Microsoft
Scott Hanselman – Microsoft
Phil Haack – Microsoft

and more…

 

Some of the Sessions:

Intro to Building Twilio Apps with ASP.NET MVC
To the Next Level of Customizability with ASP.NET MVC Dynamic Filters
MVC Q&A
Introduction to MVC 3
The Big Comparison of ASP.NET MVC View Engines
Real World Application Development with Mvc3 NHibernate, FluentNHibernate and Castle Windsor
Mvc3 Extensibility

and more…

From the site:

MvcConf is a virtual conference focused on one thing: writing awesome applications on top of the ASP.Net MVC framework. Your brain will explode from taking in so much hard core technical sessions. Sounds fun eh?

This is a community event and we want the best and brightest sharing what they know.

We intend to record each session and make them available online for viewing. We intend to make the videos available free of charge, depending on conference sponsorships.

Authorize.NET SDK for ASP.NET MVC

 

Rob Conery has worked with the new Authorize.Net SDK and shows it how is easily used for ASP.NET MVC

Authorize.NET SDK Download

Works with nice HTML Helpers

  • Html.CreditCardInput() - creates a properly sized box for inputting a card, named with a purpose. If you set a boolean switch "forTest" it will set a test card number for you.
  • Html.CCVInput() - a textbox for the card code
  • Html.CreditCardExpirationInput() - a textbox for the expiration
  • Html.CheckoutFormInputs(true) - all 3 of the above, formatted for you, with a "test" switch that indicates whether to show a test warning.

ASP.NET MVC Self-Training in 15 Days–Free Online Material

This is still a work in progress, in regards to timing, and removing redundant material. However, I think it’s pretty close, as I’ve done a couple of these tutorials already.

Some of the tutorials are in C# and VB.NET so I’ve linked to the VB.NET versions, being a VB.NET lover myself.  On those tutorials you can click on the C# version.

image

Tutorial 1 and 2 are in C# only, so you can use the converter I’ve linked too.

 

 

Tools to use:

C# to VB Converter: http://converter.telerik.com

Adventure Works Sample DB: http://msftdbprodsamples.codeplex.com/

Visual Studio Express: http://www.microsoft.com/express/Web/

Day 1

Complete Tutorial Set 1: Getting Started

http://www.asp.net/mvc/tutorials/getting-started-with-mvc-part1

Read Material Set A: Overview / Execution Process

http://www.asp.net/mvc/tutorials/asp-net-mvc-overview-vb

http://www.asp.net/mvc/tutorials/understanding-the-asp-net-mvc-execution-process-vb

Day 2, 3, 4

Complete Tutorial Set 2: MVC Music Store (Use Converter to VB)

http://www.asp.net/mvc/tutorials/mvc-music-store-part-1

Day 5:

Read Material Set B: Models and Controllers / MVC Routing

http://www.asp.net/mvc/tutorials/understanding-models-views-and-controllers-vb

Complete Tutorial Set 3: Routing / Custom Routing

http://www.asp.net/mvc/tutorials/asp-net-mvc-routing-overview-vb

http://www.asp.net/mvc/tutorials/creating-custom-routes-vb

http://www.asp.net/mvc/tutorials/creating-a-custom-route-constraint-vb

http://www.asp.net/mvc/tutorials/creating-a-route-constraint-vb

Complete Tutorial Set 4: MVC 3 with Razor View Engine

http://www.asp.net/mvc/tutorials/creating-a-mvc-3-application-with-razor-and-unobtrusive-javascript

Day 6:

Complete Tutorial Set 5: Creating Custom HTML Helpers

http://www.asp.net/mvc/tutorials/creating-custom-html-helpers-vb

Complete Tutorial Set 6: Using Tagbuilder for HTML Helpers

http://www.asp.net/mvc/tutorials/using-the-tagbuilder-class-to-build-html-helpers-vb

Day 7:

Complete Tutorial Set 7: Validation Methods. Simple / iDataError / Service / Data Annotation

http://www.asp.net/mvc/tutorials/performing-simple-validation-vb

http://www.asp.net/mvc/tutorials/validating-with-the-idataerrorinfo-interface-vb

http://www.asp.net/mvc/tutorials/validating-with-a-service-layer-vb

Day 8:

Read Material Set C: Passing Data to View Master Pages

http://www.asp.net/mvc/tutorials/passing-data-to-view-master-pages-vb

Complete Tutorial Set 8: Caching Output / Dynamic Content

http://www.asp.net/mvc/tutorials/improving-performance-with-output-caching-vb

http://www.asp.net/mvc/tutorials/adding-dynamic-content-to-a-cached-page-vb

Read Material Set D: JavaScript Injection Attacks

http://www.asp.net/mvc/tutorials/preventing-javascript-injection-attacks-vb

Complete Tutorial Set 9: Unit Testing

http://www.asp.net/mvc/tutorials/creating-unit-tests-for-asp-net-mvc-applications-vb

Day 9, 10, 11, 12

Complete Tutorial Set 10: Content Management

http://www.asp.net/mvc/tutorials/iteration-1-create-the-application-vb

Day 12, 13, 14, 15

Optional Complete Tutorial Set 11: Nerd Dinner Tutorial

http://www.asp.net/mvc/tutorials/introducing-the-nerddinner-tutorial

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

Great Tutorials for Learning ASP.NET MVC and my Thoughts

I’ve been digging into ASP.NET MVC more and more and the more I use it the more I love it. Never thought I’d say that.  At first glance I didn’t like the idea of MVC because it looks like ASP Classic when you first look at it.  Server side code nuggets <% Inside the Html %> like asp classic.  Though I was hesitant giving up classic when .net came out. 

MVC I realize after using it, is much more powerful.  You’re not really doing server side code on the client, it’s an html template, you only do logic that relates to the UI.  Real code and business logic is for the controllers and classes.  There’s no code-behind anymore, no viewstate, no more .net controls with ID and runat server tags.  It’s so light weight, I’m baffled. 

Good Starting Tutorials.

Intro To ASP.NET MVC Tutorial 1 – Using VS2010 – Some Basic MVC stuff

Once you complete that.. move on to the next one which is a more realistic world app.

MVC Music Store MVC Tutorial 2 – Using VS2010

After that you’ll understand it very well and have a good grasp.

More MVC stuff over at asp.net/mvc

Extending the ASP.NET MVC HtmlHelper in VB.NET Specifically

 

I’ve been reading up on MVC and understanding it’s framework. Of course everything out there is in C#, which is fine, however I prefer to write in VB.Net.  This causes some of the examples of lambda expressions and other things to alter, and can be a pain if you are unsure has how.  

This post is specific to the HtmlHelper, and extending it on MVC.

In mvc, you have access to an html. namespace, for links and other html controls.

  • Html.ActionLink()
  • Html.BeginForm()
  • Html.CheckBox()
  • Html.DropDownList()
  • Html.EndForm()
  • Html.Hidden()
  • Html.ListBox()
  • Html.Password()
  • Html.RadioButton()
  • Html.TextArea()
  • Html.TextBox()

 

If you want to know more about it you can read up on it on various posts, such as this here or here, or use it in the mvc music store tutorial. That will give you an good understanding of it.

This post will just show you the difference from the c# examples.   

In C#

Code Snippet
  1. using System.Web.Mvc;
  2. namespace MvcMusicStore.Helpers
  3. {
  4.     public static class HtmlHelpers
  5.     {
  6.         public static string Truncate(this HtmlHelper helper, string input, int length)
  7.         {
  8.             if (input.Length <= length)
  9.             {
  10.                 return input;
  11.             }
  12.             else
  13.             {
  14.                 return input.Substring(0, length) + "...";
  15.             }
  16.         }
  17.     }
  18. }

 

And then in VB.Net

Code Snippet
  1. Imports System.Web.Mvc
  2. Public Module HtmlHelpers
  3.     <System.Runtime.CompilerServices.Extension>    
  4.     Public Function Truncate(Helper As HtmlHelper, Input As String, Length As Integer) As String
  5.         If Input.Length <= Length Then
  6.             Return Input
  7.         Else
  8.             Return Input.Substring(0, Length) & "..."
  9.         End If
  10.     End Function
  11. End Module

You’ll notice that in the C# version it uses a “Static” keyword on the Class. In VB that equivalent keyword is “Shared”.  However, in VB you can’t use the “Shared” keyword on a Class. VB only supports “Shared” on Methods. So you should use a Module instead of a Class which is the same thing actually. It’s from the old VB days.

For your function you have to add the attribute

<System.Runtime.CompilerServices.Extension> 

Notice I don’t have the underscore _ line extending, because I’m in VB.Net 10. Previous versions or .Net 3.5 and earlier you’ll need an underscore to connect those two lines.

Other then that it’s about the same. Still have to add it to the web.config the same. 

Code Snippet
  1. <pages>
  2.   <namespaces>
  3.     <add namespace="System.Web.Mvc" />
  4.     <add namespace="System.Web.Mvc.Ajax" />
  5.     <add namespace="System.Web.Mvc.Html" />
  6.     <add namespace="System.Web.Routing" />
  7.     <add namespace="MvcMusicStore.HtmlHelpers"/>  
  8.   </namespaces>
  9. </pages>

 

So just remember, use a module instead of class, and add your attribute.