Scott Hanselman

ASP.NET 5 (vNext) Work in Progress - Exploring TagHelpers

November 20, '14 Comments [107] Posted in ASP.NET | ASP.NET MVC
Sponsored By

TagHelpers are a new feature of ASP.NET 5 (formerly and colloquially ASP.NET vNext) but it's taken me (and others) some time to fully digest them and what they mean.

Note that this, and all of ASP.NET 5 is a work in progress. TagHelpers can and will change. There is NO tooling support in Visual Studio for them, as they are changing day to day, so just be aware. That's why this post (and series is called Work in Progress.)

Historically we've used HtmlHelpers within a Razor View, so when you wanted a Label or a TextBox you'd do this. This is from the ASP.NET 5 Starter Web example.

<li>@Html.ActionLink("Home", "Index", "Home")</li>

There you have some HTML, then we start some C# with @ and then switch out. It's inline C#, calling a function that will return HTML.

Here's the same thing, using a TagHelper.

<li><a controller="Home" action="Index">Home</a></li>

The source for TagHelpers is (as with all ASP.NET source) up on GitHub, here. This is an anchor, A, so it'll be in AnchorTagHelper. The code is very simple, in fact, gets a collection of attributes and decides which to act upon.

In this case, "controller" and "action" are not HTML5 attributes, but rather ones that ASP.NET is looking for.

Question for You - Would you rather have these attributes and ones like them (including your own) be prefixed? Perhaps asp:controller or asp-controller? That's an open issue you can comment on! You could do [HtmlAttributeName("asp:whatever")] on a property or [TagName("foo")] for a tag if you liked.

How do these attributes get mapped to a TagHelper? Well, an attribute name is mapped directly to a C# property and automatically injected. See how AnchorTagHelper has public properties Action and Controller?

It's important to note that this isn't the second coming of WebForms controls, while the possible asp:foo syntax may look familiar (even though a prefix is optional.) This is more like syntactic sugar that gives you a compact way to express your intent. It doesn't give you any "control lifecycle" or anything like that.

Personally, I'd love to see them look different in the editor. For example, rather than

Tag Helpers

I'd like to see italics, or maybe a desaturation to show what's server-side and what's not, which will be super important if I'm NOT using a prefix to distinguish my attributes.

Tag Helpers, desaturated

The code below in this Before and After results in the same HTML and the same behavior. A nice aspect of TagHelpers it that you avoid the context switch from markup to C#.

Here is another example, a login partial form, before...

@using System.Security.Principal

@if (User.Identity.IsAuthenticated)
{
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
@Html.AntiForgeryToken()
<ul class="nav navbar-nav navbar-right">
<li>
@Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })
</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
}
}
else
{
<ul class="nav navbar-nav navbar-right">
<li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
<li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
</ul>
}

and after...with the Microsoft.AspNet.Mvc.TagHelpers package added in project.json and then @addtaghelper "MyAssemblyName" in either your ViewStart.cshtml to get this in all views, or separately within a single view page.

@using System.Security.Principal

@if (User.Identity.IsAuthenticated)
{
<form method="post" controller="Account" action="LogOff" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a controller="Account" action="Manage" title="Manage">Hello @User.Identity.GetUserName()!</a>
</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
</form>
}
else
{
<ul class="nav navbar-nav navbar-right">
<li><a id="registerLink" controller="Account" action="Register">Register</a></li>
<li><a id="loginLink" controller="Account" action="Login">Log in</a></li>
</ul>
}

This makes for much cleaner markup-focused Views. Note that this Sample is a spike that Damian Edwards has on his GitHub, but you have TagHelpers in the Beta 1 build included with Visual Studio 2015 preview or OmniSharp. Get involved!

Remember also to check out http://www.asp.net/vnext and subscribe to my YouTube Channel and this playlist of the ASP.NET Weekly Community Standup. In this episode we talked about TagHelpers in depth!

Related Posts

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Announcing .NET 2015 - .NET as Open Source, .NET on Mac and Linux, and Visual Studio Community

November 12, '14 Comments [181] Posted in ASP.NET | ASP.NET MVC | Open Source | VS2015
Sponsored By

It's happening. It's the reason that a lot of us came to work for Microsoft, and I think it's both the end of an era but also the beginning of amazing things to come.

The .NET 2015 wave of releases is upon us. Here's what's happening and we announced it today in New York. There's a lot here, so drink it all in slowly.

Be sure to check out all the blog posts I'm linking to at the end, but here's my personal rollup and take on the situation.

  • We are serious about open source and cross platform.
    • .NET Core 5 is the modern, componentized framework that ships via NuGet. That means you can ship a private version of the .NET Core Framework with your app. Other apps' versions can't change your app's behavior.
    • We are building a .NET Core CLR for Windows, Mac and Linux and it will be both open source and it will be supported by Microsoft. It'll all happen at https://github.com/dotnet.
    • We are open sourcing the RyuJit and the .NET GC and making them both cross-platform.
  • ASP.NET 5 will work everywhere.
    • ASP.NET 5 will be available for Windows, Mac, and Linux. Mac and Linux support will come soon and it's all going to happen in the open on GitHub at https://github.com/aspnet.
    • ASP.NET 5 will include a web server for Mac and Linux called kestrel built on libuv. It's similar to the one that comes with node, and you could front it with Nginx for production, for example.
  • Developers should have a great experience.
    • There is a new FREE SKU for Visual Studio for open source developers and students called Visual Studio Community. It supports extensions and lots more all in one download. This is not Express. This is basically Pro.
    • Visual Studio 2015 and ASP.NET 5 will support gulp, grunt, bower and npm for front end developers.
    • A community team (including myself and Sayed from the ASP.NET and web tools team) have created the OmniSharp organization along with the Kulture build system as a way to bring real Intellisense to Sublime, Atom, Brackets, Vim, and Emacs on Windows, Linux, and Mac. Check out http://www.omnisharp.net as well as blog posts by team members Jonathan Channon
  • Even more open source.
    • Much of the .NET Core Framework 4.6 and its Reference Source source is going on GitHub. It's being relicensed under the MIT license, so Mono (and you!) can use that source code in their .NET implementations.
    • There's a new hub for Microsoft open source that is hosted GitHub at http://microsoft.github.io.

Open sourcing .NET makes good sense. It makes good business sense, good community sense, and today everyone at Microsoft see this like we do.

Open .NET

Related Links


Sponsor: Big thanks to Aspose for sponsoring the feed this week! Working with Files? Aspose.Total for .NET has all the APIs you need to create, manipulate and convert Microsoft Office documents and many other formats in your applications. Start a free trial today.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

NuGet Package of the Week - Courtesy Flush to flush buffers earlier and optimize time to first byte

November 6, '14 Comments [25] Posted in ASP.NET | ASP.NET MVC | NuGet | NuGetPOW
Sponsored By

Yes, really. It's got to be the best name for an open source library out there. It's a great double entendre and a great name for this useful little library. Perhaps English isn't your first language, so I'll just say that a courtesy flush gives the next person a fresh bowl. ;)

However, in the computer world "flushing a buffer" means forcing a buffer to be moved along, usually to a file or the network. Rather than holding data, you flush it, and move it along.

Nik from Glimpse has a small NuGet package called Courtesy Flush. He's got a good write-up on his blog.

image

It's a library to enable easier flushing of your buffer in ASP.NET MVC. From their site:

Why Flush Early?

Flushing early can provide performance improvements in web applications and has been a recomended best practice in the web performance community since 2007.

To find out more, check out Nik's blog where he covered the benefits of flushing early in two posts:

It builds on top of ASP.NET ActionFilters, which you can apply as attributes to your methods, or call within controllers.

Let's say that you have some server-side work that's very slow. That slow operation could hold up the rendering of your page until it completes. With a pre-flush like this you can get bytes onto the network and into the user's browser faster.

Here we render some information and get it out fast before we do something that's unavoidably slow.

public ActionResult About()
{
ViewBag.Title = DateTime.Now.Second;
this.FlushHead();

Thread.Sleep(2000);
ViewBag.Message = "Your application description page.";

return View();
}

Let's think about really specifically. It's important to know WHY you would want to do this and what exactly happens in the browser.

If you have a long running, but important process (we are pretending that Thread.Sleep(2000) is important) that takes 2 seconds, no HTML is sent to the browser. It's just waiting. The timeline looks like this:

Here we didn't flush

See that blue line? We waited almost 5 seconds for the /about page, and while we were waiting, no Javascript and no CSS were being loaded. Why not? How could the browser know if it isn't seen the <head> of your HTML?

For an optimization, we could FLUSH the buffers that we have up to this point, putting the HTML that we have so far onto the network.

The Layout.cshtml we have a call to @Html.FlushHead() to get the the _Head.cshtml out and into the hands of the browser. It might look like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@if (ViewBag.Description != null)
{
<meta name="description" content="@ViewBag.Description">
}
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>

Here's what the SAME page looks like with the <head> flushed out first.

Here we flushed

Look closely at the timeline. Here, I'll do it for you...below shows when we flushed early versus just waiting.

See how when we flushed the head it gave the browser enough information to stat loading some css and javascript we had in the <head?> The whole page took 5 seconds, but when we flush at least we get things going early, while when we don't flush we can't do a thing until the long running task finishes.

See the difference?

See the difference? Now, to be clear, don't blindly go and add optimizations without reading the code and understanding what's going on, but this is a nice tool for our ASP.NET toolbox.

We may see a similar but even more powerful technique in ASP.NET vNext that includes async flushes at multiple points, while updating the model as data is available.


Sponsor: Big thanks to Aspose for sponsoring the feed this week! Working with Files? Aspose.Total for .NET has all the APIs you need to create, manipulate and convert Microsoft Office documents and many other formats in your applications. Start a free trial today.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

September 2, '14 Comments [78] Posted in ASP.NET | Tools | VS2013
Sponsored By

Web Development, specifically front end web development, is fast becoming as complex and sophisticated as traditional back end development. Most projects don't just upload some JS and CSS files via FTP. There's now a front end build process that can include expansion of SASS and LESS, minification of CSS/JS, running JSHint or JSLint, and much more. These build tasks and processes are coordinated with tools like Gulp and Grunt. Additionally, client-side libraries are managed as packages using management systems like npm and bower.

Why client-side package managers for ASP.NET? Why not NuGet? Why not MSBuild?

Some of you may ask, why not use NuGet for JavaScript? Why not extend MSBuild for building CSS/JS? Simple. Because there's already a rich ecosystem for this kind of thing. NuGet is great for server side libraries (and some client-side) but there are so many more CSS and JS libs on npm and bower. MSBuild is great for server-side builds but can be overkill when building a client-side app.

So, use both. These are tools in your toolkit. Adding support for Gulp, Grunt, Bower, npm (and other stuff, in the future if needed) means a more familiar environment for front-end devs doing ASP.NET and it opens the doors for ASP.NET devs to bring in the JS and CSS libraries communities use every day.

Introducing Task Runner Explorer

We’ve received a ton of feature requests regarding Grunt/Gulp support from many of you as well as the community at large. We are building first-class support for both Grunt and Gulp in Visual Studio “14” with full extensibility. Now we’re ready to ship a preview of this support as an extension to VS2013 and would appreciate your help testing and exploring this feature. 

Today we're introducing a preview of the "Task Runner Explorer" as a VSIX extension. We're also recommending two other VSIXs to round out the experience for this feature.

NOTE: Much of the functionality included in these multiple VSIX extensions will be built into Visual Studio so you won't need to install so many things. However, for VS2013 and this preview we needed multiple VSIXs in order to get you the bits sooner than later. Also note that today only Task Runner Explorer will work on Visual Studio Express but for VS14 all  the features will work in the free VS Express version.

Consider these features as a "DevLabs" preview for now, much like the VS Productivity Power Tools. They'll graduate into the final product.

What do you need?

First, you'll need Visual Studio 2013.3 - that 3 means "Update 3" which is a free update.

  1. TRX - Task Runner Explorer Visual Studio Extension
  2. NPM/NBower Package Intellisense - Search for online NPM and Bower packages directly with Intellisense
  3. Optional Grunt Launcher (gives right-click options in Solution Explorer - including "npm install")
    • Without this extension, for now you'll need to run npm install yourself to restore/add packages.
    • If you DO have this extension, right click on packages.json and "npm install" before running a grunt/gulp task.

To open the TRX (Task Runner Explorer), simply right-click any gruntfile.js in your project:

image002 

The TRX sits at the bottom of VS by default and looks like this:

 image001

Here we can see that it found a gruntfile.js in the root of one or more projects in the solution. It also shows the task bindings feature that allows any task or target to be triggered by 4 different Visual Studio events.

To associate a task/target with a VS event, just right-click and setup bindings.

image003

To run any task/target, just double-click it and a console appears:

image004

When you've got the Package Intellisense Extension you'll find it easy to add and update packages when directly editing your package.json for both bower and npm.

completion-name

You'll even get metadata tooltips populated asynchronously.

tooltip-animated

As you go testing it, remember you'll need to run "npm install" before you use the Task Runner Explorer to run Grunt tasks.

Big thanks to Mads Kristensen, Dan Chartier, and Van Kichline for their great work on this feature!


Sponsor: Many thanks to Intersoft for sponsoring the feed this week! Enterprise cross-platform native apps development made painless with Intersoft Crosslight. Sounds too good to be true? See it for yourself and get started today! 

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web

ASP.NET vNext - August 2014 Status Rollup

August 29, '14 Comments [35] Posted in ASP.NET | Open Source
Sponsored By

Work on the next version of ASP.NET continues. It's a world of Alpha software, Git commits, breaking changes, and daily builds. If you're not one for risk, this blog post is for you. Read about all the fun stuff that's going on, and install nothing. If you do like a little spice in your life, jump in and install some early builds and join this active and opinionated community.

Introducing ASP.NET vNext

We announced vNext in May and did some great talks at TechEd.

ASP.NET vNext has number of notable features, including, but not limited to:

  • Open Source from the start and runs on Windows, Mac, and Linux.
  • No "build to disk" step, just refresh and go with runtime in-memory compilation from the Open Source Roslyn compiler.
  • Optional cloud optimized local install the CoreCLR that runs great in Azure.
  • Want to use a Mac and Sublime rather than Windows and VS? Sure.
  • No strong naming, no dependency on System.Web
  • Dependency injection everywhere
  • side-by-side runtimes (one app can't hurt another, get your own versions of everything)
  • NuGet Packages easy to bring in the new project.json system. But, you can also swap in the source for your favorite libraries!

 

David Fowler and Scott Hanselman

Since then we've seen the release of betas of the next version of Visual Studio, like Visual Studio "14" CTP 3. This version of VS includes the ASP.NET vNext alpha 3 packages plus initial tooling. The project system is changing and this VS14 build includes Intellisense for the new Project.json files.

  • ASP.NET and Web Development vNext Updates. This CTP includes all the Visual Studio 2013 Update 3 web tooling improvement and ASP.NET vNext alpha 3 runtime packages. It has improved tooling support for ASP.NET vNext, such as support for build configuration and support for unit tests, and it no longer includes content and compile items inside “.kproj” file. ASP.NET vNext includes an updated version of the RyuJIT JIT compiler. For details, please read the full post on the .NET Web Development Tools blog.

Separate from ASP.NET vNext, this build of VS14 also includes .NET Native, C++ updates, Shared Projects, as well as little things like retina icons for HiDPI displays.

Project.json files

Scaffolding for ASP.NET vNext

ASP.NET vNext is very modular and will include customizable command-line scaffolding . As with all of ASP.NET vNext, it's easy and alpha, but we've got blog posts up showing you how to get started with scaffolding. We've also got details on how to customize (of course) scaffolding for your personal needs.

ASP.NET vNext on a Mac

Sure, why not? We're working on a Sublime Text 3 plugin at https://github.com/ligershark/Kulture that means you'll be able to develop ASP.NET vNext apps in your favorite IDE. There's a quick YouTube video here.

ASP.NET on a Mac

There's also some clever community members with C# Intellisense working! The LEGO pieces are snapping together nicely.

Intellisense on a Mac

This is just a taste, there's more coming that WILL surprise you

What else is possible?

ASP.NET vNext going forward...Alpha 3

David Fowler has some great Alpha 3 details on his blog that cover some architecture changes and explains some choices. ASP.NET vNext apps get their own copy of the CLR/BCL when deployed, but this is a hassle when developing. So, ASP.NET vNext apps can use a Global NuGet repository (this is NOT the GAC, relax.)

Apps can also opt in to new C# 6 features easily with a quick change to project.json.

{
"compilationOptions": {
"languageVersion": "experimental"
}
}

Again, this is all happening in the open on GitHub at https://github.com/aspnet, so check out the last milestone's issues here: https://github.com/aspnet/KRuntime/milestones/1.0.0-alpha4

I'm sure I missed something. Sound off in the comments!


Sponsor: Many thanks to my friends at Raygun for sponsoring the feed this week. I *love* Raygun and use it myself. It's amazing. Get notified of your software’s bugs as they happen! Raygun.io has error tracking solutions for every major programming language and platform - Start a free trial in under a minute!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Page 1 of 163 in the ASP.NET category Next Page

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.