Scott Hanselman

Visual Studio 2013 RC for Web Developers - One ASP.NET, Browser Link, and our Direction

September 10, 2013 Comment on this post [80] Posted in ASP.NET | VS2013
Sponsored By
Browser Link connects the IDE and Browser

ASP.NET and Web Tools for VS2013RC is out today. You can feel free to install it over the top of VS2013 Preview if you like. That's what I did.

Be sure to check out http://www.asp.net/vnext for release notes and docs, as well as updated tutorials. There will be a lot more docs and videos coming, as well as details on how to extend and use everything. Since this is the Release Candidate (rather than the final release) there's still some work to be done.

One of my favorite features, and a feature that I think is the most representative of the direction we are going, is Browser Link and best of all, its extensibility model.

For example, you remember how you can select Browse With, and set multiple browsers as your default browser? (Some folks haven't noticed that feature yet) Here I've made a regular side and selected IE and Chrome as my defaults with the Browse With dialog (hold Ctrl for multi-select within Browse With).

image

Now, Ctrl-F5 to launch both browsers:

image

Notice that Bootstrap is the default template now. We'll have Bootstrap 3.0 for the final release.

I'll change some text in the Index.cshtml. Hover over the Browser Link button in the toolbar:

image

It knows two browsers are talking to VS using SignalR and JavaScript. No magic, just web standards.

Now, you can type code and html and press Ctrl+Alt+Enter to refresh all connected browsers, or you can click Browser Link Dashboard:

image

Here's the dashboard. I've clicked on IE:

image

Even more interesting, is that Browser Link is itself extensible.

That menu in the Browser Link Dashboard where we're talking to a specific browser? You can add things to that. Mads Kristensen has done just that with Web Essentials and added extensions to Browser Link (Make sure to get the VS Web Essentials 2013 RC build, or you can build it from source!)

Here's what the Browser Link Dashboard looks like with a Browser Link Extension installed. See the added menu items?

image

Aside: Note also the Error List, we can add a new class of error in VS and even fix them with a double-click.

image

If I click Design Mode, check out what happens. The "Design Surface" potentially moves to the browser itself, using JavaScript, but with bi-directional communication between VS and the browser.

Remember that Web Essentials is open source, so I can get an idea of what's going on by reading the source. Without getting too deep, I can look at Inspect Mode and see it's using MEF.

[Export(typeof(BrowserLinkExtensionFactory))]
[BrowserLinkFactoryName("InspectMode")] // Not needed in final version of VS2013
public class InspectModeFactory : BrowserLinkExtensionFactory
{
...
}

And that is a list of actions:

public IEnumerable<BrowserLinkAction> Actions
{
get
{
yield return new BrowserLinkAction("Inspect Mode", InitiateInspectMode);
}
}

And that it's using SignalR to talk to injected JavaScript:

private void InitiateInspectMode()
{
Clients.Call(_connection, "setInspectMode", true);
_instance = this;
}

And I can see in the browser's JavaScript that as I hover over elements in the browser, I can select the source in VS and even bring VS to the front:

inspectOverlay.mousemove(function (args) {
inspectOverlay.css("height", "0");

var target = document.elementFromPoint(args.clientX, args.clientY);

inspectOverlay.css("height", "auto");

if (target) {
while (target && !browserLink.sourceMapping.canMapToSource(target)) {
target = target.parentElement;
}

if (target) {
if (current && current !== target) {
$(current).removeClass("__browserLink_selected");
}

current = target;
$(target).addClass("__browserLink_selected");
browserLink.sourceMapping.selectCompleteRange(target);
}
}
});

inspectOverlay.click(function () {
turnOffInspectMode();

browserLink.call("BringVisualStudioToFront");
});

This is just a taste of what's coming. One ASP.NET is a journey, not a destination. We'll have more refinements, more scaffolding, and continued improvements as we head in this directions and in future updates (Update 1, etc).

Browser Link is just one feature, be sure to check out (and subscribe to) the Web Dev Blog where ASP.NET and Web Tools lives on MSDN. Today's post talks about:

  • One ASP.NET
  • Authentication
  • The new HTML5 editor
  • Azure Web Site tooling
  • Scaffolding
  • MVC5, Web Forms, SignalR 2, Web API 2
  • Entity Framework 6
  • OWIN Support and Self-Hosting
  • ASP.NET Identity
  • NuGet 2.7

Remember, even though it feels like a lot, these are almost all additive changes that you can take or leave. You can still make and develop ASP.NET 2 apps in VS 2013. You can use your own View Engine, your own ORM, your own Identity, you own Scaffolding, your own components. You decide.

image

We'll have docs and updates soon for scaffolding, modifying and customizing File New Project to add your own, as well as a list of what's new and released as NuGet packages. Watch http://www.asp.net/vnext and the Release Notes for lots of details and any breaking changes.


Sponsor: Big thanks to Infragistics for sponsoring the feed this week! Download Your Free HTML5/jQuery Grid:  Prepare to launch eye-popping, performance-driven HTML5 applications with Ignite UI. Believe your eyes - you can download the world's fastest, most reliable jQuery Grid now - no strings attached

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
Hosting By
Hosted in an Azure App Service
September 10, 2013 0:46
Will not install on Win 8.1 Preview...
September 10, 2013 0:46
Hey Scott,

Is possible to install the RC over the Preview?

September 10, 2013 1:05
Matteo - Yes, install right over the VS2013 Preview.

Craig - Yes, because it uses Newer APIs. You'll need RTM.
September 10, 2013 1:16
Scott,
Thank you for yet another gem! Played around with VS2013 preview at a workshop on Friday and was very pleased, looking forward to see what can be done with the RC!
Cheers!
September 10, 2013 1:30
Hi Scott,

Another post that underlines the big acceleration in the .net development ecosystem that seems to be taking place right now.

Can we assume this will play nicely with our stable VS2012 installs or would you recommend keeping it separate?
September 10, 2013 2:41
Darren - This will update your .NET 4.5 to 4.5.1 (bug fixes) but something to be aware of. I have installed it on one machine and it side by sided fine, but YMMV.
September 10, 2013 3:21
Web essentials is truly 'essential', so thanks for showing off some of the new features with browser link. Love the design mode...have already used it to make some quick edits in one of my more complicated views. Beats hunting for the text in the chtml when you just need to change a . to a ?

Love the new direction and the vs 2013 experience as a whole. From tfs & git, to the new web tooling and async debug features... i'm just going to hit the ground running with 2013 and not look back. No offence to the upcoming vs 2012 update 4 :)
September 10, 2013 4:18
I did try doing everyday work in VS2013 with Azure Web Project in pair with R#. And VS was far too unstable. I had to force shut-down the application one too many times, so back to VS2012. Downloading 2013RC just now. Will see if that all been fixed.
September 10, 2013 6:07
Sadly, until and unless Mads adds TypeScript support back into Web Essentials I can't use VS 2013. There are just too many essential features that I am using in my workflow for TypeScript development that the TS team has not replicated with their plugin.
Sam
September 10, 2013 8:00
Looks great! I'm seriously liking this new rapid release cycle.

PS: Do you need to "upgrade" your .sln files from 2012 to 2013?

PPS: I'm not sure if would like to comment on this stuff, but do you believe that Elop has a chance to take over when Ballmer retires? He was the guy responsible for Cold Fusion, Dreamweaver, and Flash after all (aka, the competition). What do you angle brackets people think?
September 10, 2013 8:14
Sihan - No, 2012 projects just open in 2013.

I haven't thought about Elop. I'd rather have the Gu!
September 10, 2013 9:58
@Sam, what features are you missing? TS tools supports both compile on save and build
September 10, 2013 10:23
Did you fix the GUI? Did you bring back setup and deployment projects? Did you listen to feedback?
September 10, 2013 11:17
How did you make those animated screenshot gifs?
September 10, 2013 11:25
Will I be able to upgrade this to final version?
September 10, 2013 12:03
Can you please write a blog post on how to upgrade from Windows 8 and Windows 8.1 Preview to Windows 8.1 RTM?

I hope to be able to upgrade my laptop at work to the RTM bits without having to reinstall applications. Not easy to find any information about this yet.
September 10, 2013 12:06
Noticed that in vs2013 preview,some wizards doesn't work like adding ado.net entity framework into a vb website project. Hope this fixes that.
September 10, 2013 14:55
@Mads, to provide a partial answer for Sam, I'm personally missing two features:

1) "Nice to have" is the side-by-side code window. Just makes compiling and inspecting the output that much easier. That being said, I'm doing fine without it.

2) "MUST have" is the drag and drop of reference files. Having to type out the relative path for each reference is tedious and, quite frankly, irritating.

Having complained I will now take the opportunity to say thank you for the work you have done and continue to do in your web essentials plugin. :-)
September 10, 2013 14:58
+1 I am also looking for a blog post on upgrading Windows 8 Pro to Windows 8.1 safely. Do we need to wait for October 18th for final bits for this?

Also, can we upgrade Visual Studio Ult 2012 to 2013?
September 10, 2013 16:58
The first actual feature that looks worthwhile in VS2013 (which was sadly starting to look like a release worth ignoring). Good job to the ASP.Net team!
September 11, 2013 0:24
I am trying to move a VS2013 from the Preview versions to the RC version. Unfortunately SQLEXPRADV_x64_ENU.exe (SQL Server 2012 Express Advanced) refuses to install, say the OS is incompatible.

Is there something I am missing? I have tried a number of compatibility settings, but nothing works. Is there a problem using the .Net framework 4.5.1 rc?
September 11, 2013 1:10
Ignore my last above. I installed the 32-bit version rather than 64-bit Win8.1 RC.

Thanks
September 11, 2013 3:26
"Notice that Bootstrap is the default template now. We'll have Bootstrap 3.0 for the final release."

I'm not seeing that; I started a new web site, and see nothing Bootstrap in it; nothing in \Scripts, \Content referencing Bootstrap or Twitter. I even did a solution-wide search for Bootstrap and came up with nothing. Running the MVC3 web site looks exactly the same as previous versions (AFAICT).

(also, for some reason, VS seems to have placed me in the VB camp, although I never selected such an option, and 99% of the time use C#).
September 11, 2013 4:44
Clay - Web Project or Web Site? Try Web Projects, they are all Bootstrap. Also, close teh VB node and open C# and it will stay that way.
September 11, 2013 13:27
+1 - how to make such nice animated screenshot gifs :)
September 11, 2013 17:07
Could you please explain how you created the gifs? high quality and low size, interesting!
September 11, 2013 17:26
When we will have the templates in ASPX?
September 11, 2013 19:15
Scott, If I select File > New Project > Visual C# > Web, it provides a "Visual Studio 2012" (why the blast from the past? Is it because I'm on Windows 7 here at work?) submenu, which has:

ASP.NET Empty Web Application
ASP.NET Web Forms Application
ASP.NET MVC4 Web Application <-- That must have been what I selected
ASP.NET Dynamic Data Entities Web Application
ASP.NET AJAX Server Control
ASP.NET AJAX Server Control Extender
ASP.NET Server Control

If I select ASP.NET MVC4 Web Application, and then the default "Internet Application", I still see no Boostraperization anywhere in the project; a solution-wide search for "Bootstrap" turns up 0 matching lines...

BTW, I love the look of the editor in VS 2013 (I'm using the dark theme); it rocks like a sharknado or so.
September 11, 2013 19:17
Awesome. Just freakin' awesome. I LOVE new tools that make my job easier, and this new feature set will have a DIRECT and IMMEDIATE impact on my ability to roll out new apps (and maintain them as we'll!) more quickly!

Seriously, Scott, a huge kudos to your common sense approach, and high fives all around to the ASP.NET team!
Dan
September 11, 2013 19:33
I was trying to think of what the appearance of the dark theme editor reminds me of, and I realized that it looks like a smooth and pristine slate (the old-fashioned slate, not the electronic device). As the song says, "I don't wanna work; I wanna code on my slate all day..."
September 12, 2013 0:18
I haven't tried it yet but I am pleased to learn that Internet authentication (a.k.a. Individual User Accounts) has received more than a facelift!
September 12, 2013 1:13
Clay - Yes, Bootstrap is for new project templates. We didn't go back and change all the old ones.
September 12, 2013 1:33
"Bootstrap is for new project templates. We didn't go back and change all the old ones."

I would expect to have new templates in the new version, though. I don't see any...
September 12, 2013 1:40
I'll assume it's because I'm accessing the project types from Windows 7, not 8
September 12, 2013 1:48
Clay - No, not at all. It's that we added Bootstrap in the new templates (WebForms and MVC5) and that the old ones remain as they were. It is irrespective of OS.

Go File | New Project | New ASP.NET Application.
September 12, 2013 1:56
MVC5 does not seem to be available to me.

Templates > Visual C# > Web shows ASP.NET Web Application

and Templates > Visual C# > Web > Visual Studio 2012 shows those enumerated earlier - no MVC5 in sight.

But MVC5 makes me think of the MC5, and now I've got "Kick out the Jams, Brothers and Sisters" stuck in my ear[s].
September 12, 2013 1:58
Ah, this isn't under VS2012. This is under > Web.
September 12, 2013 2:01
...well, now I see...I had to look under "Online" rather than "Installed". The presentation of the available templates change (from "Details" to "Large Icon" so to speak), and now I do see "Bootstrap" - both in Visual C# > ASP.NET (but it's MVC4, still no MVC5) and in Templates...created by Hans Wolf.
September 12, 2013 2:13
Hate to be obtuse, but selecting File > New Project invokes the New Project dialog. Under Visual C#, there is an "ASP.NET Web Application", but it says nothing about MVC5 or Bootstrap.
September 12, 2013 2:16
The only thing I have under Web is the aforementioned "ASP.NET Web Application", and selecting it gives me the options:

Empty
Web Forms
MVC
Web API
SPA
Facebook

If I select "MVC," it gives me no further options/granularity - it opens a "generic" Web Application.
September 12, 2013 2:59
I'm confused by the timing and logic of this release: seems quite illogical to make Visual Studio 2013 RC generally available now, yet make the needed OS version to run it unavailable generally for another month+ (those without an MSDN subscription, have to wait until late October for generally availability of Windows 8.1 RTM.)

Any idea what is/was the intended course of action and/or usage scenario for those without an MSDN subscription to benefit from all the new capabilities and improvements in Visual Studio 2013 RC and the latest ASP.NET/Web Tools just made available, but without the needed OS to even install it?

September 12, 2013 3:01
Clay - We are disconnecting here some how in a fundamental way. Here's screenshots of this. It's installed, not online, and it's official, not Hans anyone.

This is assuming, as we said, VS2013 RC.

See here: http://imgur.com/a/KOHX
September 12, 2013 3:03
Scott Wade - VS2013RC runs fine on Windows 7, 8 and 8.1. You don't need 8.1 to use it.
September 12, 2013 3:34
Scott...

Thanks! That's the information I needed for clearing up some confusion within our team, so it's only Windows 8.1 Preview that isn't supported (it refuses to even install on 8.1 Preview and presents a not supported message).

The Readme known issues states (and where their misreading came about): "Note Windows Store app development requires Windows 8.1 RTM, which is available to MSDN and TechNet subscribers. Visual Studio 2013 RC does not support Windows 8.1 Preview or Windows Server 2012 R2 Preview."
September 12, 2013 3:37
Scott Wade - Yes, they are saying (perhaps with dodgy English) that you can't do Windows Store development with Preview OS's. Everything else works though.
September 12, 2013 3:47
Okay, I got that - I see the Bootstraperization of the WebForms project type; still no MVC5, though; but no worries - we are so far away from the cutting edge that we can walk on our razor blades around here; and my personal projects are not complex enough to warrant the use of MVC.
September 12, 2013 3:59
Clay - MVC5 is the MVC option in this img: http://imgur.com/oO4EvB7,kjP1txG,sRpp0Wl,bmd67xz#1
September 12, 2013 4:42
Okay, got it, thanks; I guess I was expecting it to specify the version.
September 12, 2013 5:03
This is one of the best updates to web tools I have ever seen. I can't say how much I love the idea of seeing live changes.

Good work VS/ASP.NET Team !
September 12, 2013 5:30
Luiz - I didn't find the mvc 5 aspx either, just razor template.

Scott - is it temporary?
September 12, 2013 5:38
Fernando - When you say File | New Project | ASP.NET application, MVC is one of the choices, and it's MVC5.

However there is no more MVC-specific project type, nor a Web Forms project type. There's just ASP.NET, add you use whatever you want, mixing and matching as you like (MVC, Web Forms, Web API, SignalR, etc)
September 12, 2013 6:06
I think I didn't express well, I didn't find a place to choose between razor and aspx, there is just the razor template, is it just temporary?
September 12, 2013 7:31
Great post....
September 12, 2013 21:23
Add view option is missing in vs2013 RC
September 13, 2013 2:20
the gifs are recorded with camtasia studio
September 13, 2013 3:21
Babula - Right Click, Add Scaffold, and Add View is in there.
September 13, 2013 4:32
Scott, How can I create the mvc template using aspx instead of razor?
September 13, 2013 13:12
Thanks, but it is not that comfortable as the Vs2012, because there we can directly right click on any action method and visual studio use to create all the template.

Do not you think that option was really good?
September 13, 2013 17:59
I do not have the list of Connected Browsers in my Browser Link Dashboard. It shows open your project in a browser to connect, but when i open my project by debug it does not show browsers in it. Please help.
September 13, 2013 18:45
Babula - that feature didn't make it into the RC, but it will for RTM
September 13, 2013 20:08
Can't believe the "Apply server settings to all users (store in project file)" option is gone from the Project Properties > Web tab.
This makes using VS2013 problematic when working on web projects with different people.
IIS Express can't be used for everything (virtual folders, security, etc).
Someone already filed this on Connect to vote on.
September 14, 2013 0:02
Fernando - ASPX Views have been removed from ASP.NET MVC 5. Razor Views are the primary choice now. The existing code for MVC4 is on CodePlex, so you could bring the ViewEngine over yourself if you wanted.

David - I will look into this.
September 14, 2013 2:19
Any plans for out of the box Google+ sign-in?

I know I can either code this myself of use the Nuget Package DotNetOpenAuth.GoogleOAuth2, but it would be great to see enabled right in the Startup.Auth.cs file.

Pat
September 14, 2013 4:23
In the page of asp.net mvc roadmap http://aspnetwebstack.codeplex.com/wikipage?title=Roadmap , there are first two items : Attribute Based Routing(not web api) and HTML Helpers. It seems they are not implemented in the RC ? will it appear in RTM? thanks!
September 15, 2013 4:15
Why did they change the Comment/Uncomment icons in this release? The Visual Studio 2013 beta comment icons with the green and red were more visually appealing an less boring.
September 15, 2013 21:47
These features show that Visual Studio is best IDE. Still exploring new features in VS 2013. Multiple browser is fantastic !!!

@Scott -- Really wonderful way of writing article !!
September 16, 2013 20:09
I am loving what I've been playing with in the RC so far, but I've run into something that I'm not particularly sure I understand.

I'm rewriting a series of applications that share a UI. In previous VS, instead of using Areas (which I found to be a bit unwieldy once you have more than a couple, not to mention redeploying an entire codebase rather than a specific app), I housed the UI in one project (MVC 3 or 4) and then the Controllers and Models layers in their own class library. With MVC 5 and the scaffolding. it seems like this is no longer possible and my controllers will have to live in the same project as the views (obviously the models and any repository classes/interfaces can be abstracted out just the same as before)?

I'm the only one currently poking around with 2013 at work, and any insight would be helpful to us as to whether we're going to make a purchase or continue with 2012
September 16, 2013 23:44
Why ASPX was removed from MVC5?
September 17, 2013 0:41
Super awesome features. Thanks Scott.
September 17, 2013 13:57
There are awesome things as you demonstrated earlier.But it looks odd to see 4.5.1
My thinking is that these things should be sort of update 4 for VS2012 and we should have VS2014 or VS2015 with .net 5.0
September 17, 2013 23:10
Hi Scott,
When I tried to install VS 2013 RC I got this message
http://clip2net.com/s/5LV74o

Pls. help

Thanks,
John
September 19, 2013 11:10
I'm hoping this version overcomes my frustrations with Visual Studio.
It's such a powerful product, but problems with the basics for me are close to pushing me to use other platforms.
September 20, 2013 1:05
Scott,

Does browserlink+web essentials design view require IIS Express? I'm not able to use it, and constantly getting 404 errors when browserlink tries to talk back to localhost:

GET http://localhost/__browserLink/requestData/bfbd0f86b46b40a487b3288c23ccdece 404 (Not Found)

September 20, 2013 19:14
Warren,

Browser Link requires ASP.NET, so it will work with any compatible server (IIS or IISExpress). For static files (.html) you will need to route the request through the ASP.NET runtime by adding this to the web.config: <modules runAllManagedModulesForAllRequests="true" />
September 20, 2013 19:42
John, what are your frustrations with VS? Let's fix it!
September 25, 2013 19:58
Hi, why just simply things issued by microsoft do not work?
I am spending all days searching for workarounds to find how dll redirectionworks in spite of it does not work and finding nothing only including additional versions of dlls.
It is stupid. Instead of improving in programming I am losing time with things microsoft should have solvedl a century ago.
September 30, 2013 5:44
I love to disseminate knowledge that will I've accrued with the calendar year to assist
enhance team performance.
October 09, 2013 23:31
The default MVC project looks great, but it still does not include email validation for user registration. How can this be done with MVC 5 an the new ASP.NET Identity ?
October 28, 2013 8:20
I'm getting these 404 and sometimes 500 errors too:

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost:46838/__browserLink/requestData/16ba74fa3a3743888f868e768298fdf2
November 25, 2013 19:59
javascript project is not shown on from New Project dialog :( I installed vs2013 ultimate on Win 7, 64 bit.

Comments are closed.

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