Ten good practices for

ASP.NET MVC applications

Dino Esposito

JetBrains

dino.esposito@jetbrains.com

@despos

facebook.com/naa4e

Options for Web development

Fully

server-

side

Fully

client-

side

Hybrid

SPA

And the winner is …

ASP.NET MVC

10 Good Practices

1. Mix with Web Forms

2. Distinct models

3. Thin controllers

4. Project folders

5. Bundling

1. Localization

2. Responsiveness

3. Image handling

4. Smart Ajax

5. SignalR

Mixing Web Forms and ASP.NET MVC1

Keep on writing Web Forms apps in VS 2015 by

targeting the .NET 4.6 framework

Current apps will run on ASP.NET5 unchangedWeb Forms, MVC 5, Web API 2, SignalR 2, Entity Framework 6

Use the full .NET CLR to run legacy apps because only this CLR provides full

backward compatibility.

Full .NET CLR Core CLR X-platform

ASP.NET next

Mixing Web Forms and ASP.NET MVC1

MVC and Web API unified

One controller class

Forget about Web API

ASP.NET MVC 6

The M in Model-View-Controller2

public ActionResult Add(int courtId, int length, int hour, string name)

public ActionResult Add(BookingInputModel input)

Input model

public ActionResult Index(){

var model = _homeService.GetIndexViewModel();return View(model);

}

View model

The M in Model-View-Controller2

Input

USER

INTERFACE

APPLICATION

LAYER

View

DOMAIN LAYER

Persistence model

Domain model

Very Thin Controllers3

Controllers belong to the presentation layer

Bound to HTTP context

No need of unit tests (most of the time)

Very Thin Controllers3

Controllers belong to the presentation layer

public class HomeController{

public HomeController(IHomeService service){

_service = service;}

public ActionResult Index(){

var model = _service.GetIndexViewModel();return View(model);

}}

Project Folders4

Application layerPresentation layer

Project Folders4

Backend

(CQRS)

ASP.NET

Resource Bundling5

On production sites there are no reasons

not to bundle and minify all CSS and

JavaScript files.

Bundling is grouping multiple files in a single download.

Minifying is reducing the size of CSS/Script files

Resource Bundling5

var bundle = new Bundle("~/mycss"); bundle.Include("~/content/styles/*.css"); bundles.Add(bundle);

Localization6

1. Let users choose – but remember choice

2. Look at browser settings

3. Look at geolocation

There’s more than just text to localize• CSS and scripts

• Views

• Outputcache

Responsiveness7

<div class="container"><div class="row">

<div class="col-xs-6 col-md-4"> Column #1 </div><div class="col-xs-6 col-md-4"> Column #2 </div><div class="col-xs-6 col-md-4"> Column #3 </div>

</div></div>

Bootstrap

<div class="hidden-xs col-md-4"> Column #3 </div>

Responsiveness7

<script type="text/javascript">if (screen.width <= 640) {

window.location = "http://m.yoursite.com";}

</script>

<script src="http://wurfl.io/wurfl.js"><script type="text/javascript">

if (WURFL.form_factor == "smartphone") {window.location = "http://m.yoursite.com";

}</script>

Image Handling8

Responsive images is using different images for

different situations• Browsers to select the most appropriate image from a range of choices

• Via a new HTML element

<picture alt=""><source media="(min-width: 992px)" srcset="large-1.jpg 1x, large-2.jpg 2x"><source media="(min-width: 640px)" srcset="med-1.jpg 1x, med-2.jpg 2x"><source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg">

</picture>

Pixel density for

high resolution displays

Image Handling8

WURFL Image Taylor

• Detect device and resize image appropriately

• Can crop and resize to given dimensions

• WIT is available today: http://web.wurfl.io

<img src="//wit.wurfl.io/http://www.yoursite.com/images/img.jpg">

/m_cropbox/w_100/h_100/

Smart Partial Rendering9

MVC native partial rendering

Ajax.BeginForm

Handmade Ajax via jQuery/JSON endpoints

AngularJS – KnockoutJS – template binding

Smart Partial Rendering9

MultipleActionResult

DEMO

SignalR10

Dynamically refreshed

HTML

JSON

SignalR10

Pages receive notification when a relevant

state change occurred on the server.

Plain notification Plain JSON data

FOLLOW

Thank You!

facebook.com/naa4e

software2cents.wordpress.com

dino.esposito@jetbrains.com

@despos

http://naa4e.codeplex.com/ Project MERP