1 of 41

ASP.NET Core Razor

Deep Dive

2 of 41

About Me

Joseph Woodward

.NET Software Engineer at Just Eat

​

​

Blog: josephwoodward.co.uk

Twitter: @joe_mighty

GitHub: https://github.com/JosephWoodward

​

3 of 41

Available online

Slides and code can be found:

https://github.com/JosephWoodward/RazorPlayground

4 of 41

Agenda

  • View Engines
  • HTML Helpers
  • Tag Helpers
  • View Components
  • Dependency Injection
  • .NET Core 2.0 Features
    • Tag helper injection
    • Razor Pages

5 of 41

View Engines

6 of 41

Spark View Engine (C#)

7 of 41

Bellevue

8 of 41

Razor View Engine

9 of 41

HTML Helpers

10 of 41

HTML Helpers

11 of 41

HTML Helpers

  • Using statements to render blocks

12 of 41

HTML Helpers

  • Anonymous objects
  • @ to denote class attributes

13 of 41

HTML Helpers

  • Obfuscated HTML (what does this generate?)

14 of 41

HTML Helpers

  • Unintuitive names

15 of 41

...awkward

16 of 41

What’s changed in

ASP.NET Core?

17 of 41

Tag Helpers

18 of 41

What are Tag Helpers?

  • New HTML like server-side rendered syntax
    • Feel more natural
  • Super powerful and versatile
    • View caching helpers
    • Custom HTML behaviour
  • Eliminate clutter generated by HTML Helpers

19 of 41

What are Tag Helpers?

20 of 41

Existing Tag Helpers

Before:

After:

21 of 41

Let’s dive in

22 of 41

23 of 41

With great power comes great responsibility...

Ben “Uncle Ben” Parker

“

24 of 41

Potential pitfalls

25 of 41

Pitfall #1 - Lack of transparency

This seems very tough to get on-board with. My biggest concern is how do we easily discern between which more obscure attributes are "TagHelper" related vs which ones are part of the HTML spec?

​

​

“

26 of 41

Pitfall #1 - Lack of transparency

What’s this doing?

<img src="/profile.jpg" alt="Profile Picture" />

​

<img src="http://cdn.com/profile.mobile.jpg" alt="Profile Picture" />

​

?

27 of 41

Potential Solutions

// Force prefix

@tagHelperPrefix helper:

<helper:img src="/profile.jpg" alt="Profile Picture" />

​

// Opt-out of helper

<!helper:img src="/profile.jpg" alt="Profile Picture" />

​

// Remove tag helpers

@removeTagHelper *, RazorDeepDive

<img src="/profile.jpg" alt="Profile Picture" />

​

28 of 41

Pitfall #2 - Tag Helper Collisions

29 of 41

View Components

30 of 41

Breaking up your view

31 of 41

Reusable views in Razor pre .NET Core

Partial Views:

@Html.RenderPartial("Contacts", Model.Contacts)

Child Actions:

@Html.Action("Home", "Contacts")

[ChildActionOnly]�public ActionResult Contacts() {� return PartialView("_Contacts", _service.Contacts);�}

​

32 of 41

What are View Components?

33 of 41

Dependency Injection

34 of 41

Dependency Injection

@using RazorDeepDive.Services

@inject IUserConfiguration Configuration

<p>Hello @Configuration.Name</p>

35 of 41

When would you want dependency injection in views?

I don’t know

36 of 41

New in ASP.NET Core 2.0

37 of 41

Tag Helper Components

(Tag Helpers via dependency injection)

38 of 41

Tag Helper Components

39 of 41

Razor Pages

40 of 41

Return of WebForms?

41 of 41

Questions?