MVC 6 / ASP.NET 5 represent a fundamental shift for the ASP.NET framework. More than simply the next version, this is a complete rewrite and a break from the old System.Web that was central to all previous versions of ASP.NET. The result is a lighter-weight framework that supports cross platform development and deployment. In this session we explore some of the new building blocks in MVC 6 including Tag Helpers and View Components.

1. MVC 6 Building Blocks
@Dave_Paquette
Microsoft MVP (ASP.NET/IIS)
contactme@davepaquette.com
http://www.davepaquette.com

2. Prizes!!!

3. Expectations
You folks
• Are experienced .NET devs
• Have worked with MVC in the past
We will Cover
• Quick Overview
• Tag Helpers
• View Components

4. ASP.NET 5 –The Big Rewrite
• HugeArchitectural Changes
• Open Source and Cross Platform
• 100% Nuget, 100% of the time

5. MVC 6
• Familiar Concepts (Models –Views – Controllers )
• Unifies Web API and MVC
• Improved Identity
• New UI Building Blocks
• Tag Helpers
• View Components

6. Tag Helpers
• A new Razor syntax for generating HTML
• An alternative to Html Helpers + more
• Full ofAwesome

7. Tag Helpers
• Target existing HTML Elements or create new ones
• Modify the attributes or contents of a tag
• Simple to use and create

8. Tag Helpers vs. HTML Helpers
@Html.TextBoxFor(m => m.Email, new { @class = "form-
control" })
<input asp-for="Email" class="form-control" />
<input class="form-control" data-val="true" data-val-email="The Email field is
not a valid e-mail address." data-val-required="The Email field is required."
id="Email" name="Email" type="text" value="">

9. Tag Helpers are NOTWeb Server Controls
• No Component / Event Model
• No crazy lifecycle and no “ViewState”
• No side effects on the rest of the page
• Simply modify the HTML for the targeted element
<input runat="server" type="text" id="user" />
<asp:DropDownList ID="project" runat="server"
AutoPostBack="True"> </asp:DropDownList>

10. Tag Helper Demo
Building Forms

11. CustomTag Helpers
• Simple C# class
public class MyCustomTagHelper : TagHelper
{
public override void Process(TagHelperContext context,
TagHelperOutput output)
{
//Do tag helper things
}
}

12. <demo>CustomTag Helpers</demo>

13. Tag Helper - Conventions
• Prefix attributes when targeting existing HTML elements
• <input asp-for=“Email” />
• No prefix when targeting new elements
• <modal title=“Uh Oh…”>…</modal>

14. View Components
• A PartialView with it’s own mini-controller (sort of)
• Replaces the need forChild controller actions
• Super easy yet extremely powerful

15. View Components
ViewComponent Class
public class MyFancyViewComponent
: ViewComponent
{
public IViewComponentResult
Invoke()
{
return View();
}
}
RazorView
<h4>My Fancy Component</h4>
@DateTime.UtcNow.ToShortDateString()

16. @Component.Invoke(“Demo”,
DateTime.Now)
View Component Demo

17. Learn More
• https://github.com/aspnet - Official Repo
• https://github.com/dpaquette/TagHelperSamples
• http://bit.ly/taghelpers - A Complete Guide toTag Helper
• http://docs.asp.net/ - Official Docs – WIP
• http://live.asp.net –Weekly Community Stand-up

18. www.davepaquette.comBlog
Twitter @Dave_Paquette
www.westerndevs.com
@westerndevs
Email contactme@davepaquette.com
ThankYou