Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

ASP.NET and Web Tools 2012.2

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[♪ music ♪] [Microsoft] [] [John Galloway] Hi this is John Galloway from Microsoft with an overview of the ASP.NETand Web Tools 2012.2 release. It's an ASP.NET release meaning that it has features for the entire ASP.NET family including Web Forms, MVC, Web API, et cetera. But it's also a Web Tools release. Meaning that it includes new tooling for Visual Studio that will improve web development experience in a lot of ways. And finally, it's a 2012.2 release meaning that it's an incremental release on top of the big release we ship with Visual Studio 2012. So first of all, the installation is pretty quick. They've done a lot of work to optimize and speed up installation. I've done this install several times, and in my experience it's taken about 5 minutes and I haven't ever had to reboot. And I've also been able to uninstall and reinstall several times. So it's a pretty lightweight install. So this gets the "Works on my machine" guarantee. First let's talk about what doesn't change. There is no change at all in the underlying run time. So that means that you can create a new project with this new release, and you can send it to your friend who has ASP.NET 4.5 Visual Studio 2012 installed and they can open it up and work with it. They can deploy it to their server. There is no change. You can go back and forth between machines that have this installed. So that means it's safe to start using this immediately. You can start using this without worries that it's going to affect your existing projects. So what does change? Well, there are new project templates. File new project does new things. And also your Visual Studio web tooling gets better. So here's a pretty diagram that explains that a little more. In the new templates department we have new templates for ASP.NET Web Forms; for a new addition to the ASP.NET family, SignalR; for ASP.NET Web API; and a few new things for MVC. And then on the web tooling side we've got updates across Page Inspector, IntelliSense, Publishing, and just general editor features that make it a lot easier to work with both the new templates I've got shown on the left here and also just web development in general. So let's walk through these. First of all, ASP.NET Web Forms. The big change here is support for Friendly URLs. And Friendly URLs has been available as a NuGet package for a while. But now, when you do File, New Project with the Web Forms application the NuGet package for Friendly URLs is installed and it's also automatically preconfigured for you. What this allows you to do is create really nice looking semantic URLs like /album/edit/1, which is going to map to an edit page and it's going to pass that 1 ID to the controls. And there is also support for this Friendly URL Segments attribute, and that allows you to bind this to controls or to access it in your methods inside a web form. So there is no additional work for you to start using this, and it really helps your projects right away. So here I have an example of an ASP.NET Web Forms application. And I can click through, this is a bound control—a list view. And all my IDs here I've got going to things like /album/edit/1, /2, /3. So when I click on /1, you'll see the URL /album/edit/1 When I click on edit I'm able to edit this, and this is also going correctly to the ID— this is all tracking that ID across. So let's take a look at the code behind that makes this work. On the default page I just have a link in my list view to /album/edit/Id. So I'm just linking to that page and expecting it to work. When I go to the edit code this is a form view, and there is nothing special done here to set up that URL. I am linking in here to the select method. I have a "GetItem" so my select method just calls "GetItem." And when I go and look at that "GetItem" we'll see that we have this Friendly URL Segments and it's expecting an optional integer ID, and if it finds it, it binds that and returns. So this makes it really easy to take advantage of some of the new features we shipped with ASP.NET 4.5 Web Forms including model binding and strongly typed data controls. Finally that RouteConfig. This is in our App_Start, RouteConfig file. And this just calls "EnableFriendlyURLs." So by doing that we are able to link to /album/edit/ID. So that means it's going to look in the album folder for an "editaspx" file, and it's going to pass the ID so that all of the wiring is all just hooked up for it. Next we'll look at SignalR. SignalR is a new addition to ASP.NET, but it's already had an interesting life. It started life as an open source project by some members of the ASP.NET team. And people liked it so much that it's been incorporated into ASP.NET. So now it's officially shipped by Microsoft and it goes through all the testing and everything else that you'd expect from ASP.NET. SignalR enables you to do real-time communications between your browser and your server, and that means you can push down real-time updates to browsers, and it does this in a really smart way. It uses the best technology that each browser and server can support. So that means if you've got a bunch of different browsers connected and some of them are older browsers like IE6, for those browsers it will fall back to older technologies like long pulling. And for newer browsers it will use things like WebSockets or other technologies that it will automatically figure out. And it's also really, really easy to use. So if we look at the old way that we used to handle these long connections— these long-running connections from browsers and servers we would just keep asking the server if there is more information. And eventually the server would say, "Why, yes, there is some new information." And then we would keep pulling them again. So in the worst case scenario SignalR can fall back to this method, but with newer browsers and servers we can say, "Do you do real-time communication?" the web server says, "Yes," and then we just establish that real-time communication. So you can think of it as if SignalR is magically handling that communication for you between client and server. Now we've been talking about browsers communicating with web servers, but SignalR does quite a bit more. It's capable of communicating with mobile and desktop clients, it supports both ASP.NET and OWEN—the open web interface for .net, and it can work with several different backplanes. In using backplanes, you can have multiple web servers that are all keeping in synch with each other and all keeping real-time communications with a lot of different clients. So one of your users on a Windows phone application can push an update to one of your web servers and that web server communicates over the backplane to another web server, which pushes information down to a client over jQuery in a web browser, and that's all set up for you. So let's look at some code. Here I've got an empty ASP.NET web application. And I've added in the SignalR libraries via NuGet. So now I'm going to right click, and I'm going to say, "Add, New Item," and in this dialogue I can search by SignalR and we're going to add a Hub Class. There's 2 types available, there's a persistent connection, which is more of a low-level connection, and then a Hub Class, which is a more high-level abstraction that's a little easier to work with. So I'm going to create a new Hub called, Hit Counter. And this creates just a very simple class that inherits from Hub. Now in this application I want to track the number of currently connected clients. So I'm going to do a few things. First I'm going to create a static integer hit count. We'll change this to, "RecordHit." So when "RecordHit" is called first we're going to increment that number. And next we're going to broadcast a message to our clients. So we're going to call a method on all our clients called, "onHitRecorded." You'll see that's a dynamic expression. And we're going to pass them that hit count. One other thing we want to do is we want to track whenever someone disconnects. So I'm going to add in an "onDisconnected" method. And whenever someone disconnects we're going to remove somebody— remove them from the hit counter. And again we're going to broadcast this out to all our connected clients. [typing] And then we'll call the base method. So that's all that's required for a simple Hub. So how I like to think about SignalR working conceptually at a very basic level is SignalR allows 2 things: For the server to call methods on the client, and then for the client to call methods on the server. So here's an example of, "Clients.All.onHitRecorded" that's calling a method on the client in the browser. And then we have a server method, "RecordHit," and we're going to allow clients to call that method. So now I've got an HTML page I want to add this to. And this is HTML; this isn't even ASPX or MVC or anything. So first I'm going to want to drag in a few scripts. I want to get jQuery, so I'm going to add a reference to jQuery. And I'm also going to add a reference to the SignalR library. And then I have a div that's going to show the number of connected clients. So now I'm going to add in a very simple script log. And this script log does just a few things. First it creates a connection back to the server, and it's using this hit counter, so that's how it's connecting with that hit counter Hub. So now we have this "Hub.on" for "onHitRecorded." So that means whenever the server calls "onHitRecorded," it's going to proxy that over to this script and it's going to call the following function. So this function just says, "update this div to show that text." And then finally, we're going to do 1 more thing, which is we're going to start this, and we're going to invoke on the server. So we're going to call server code, and we're going to call, "RecordHit." So whenever a client connects to this, we're going to wire up what happens when the server calls "onHitRecorded," and then we're going to call this method on the server called "RecordHit." And that's it. So now let's run this. So we're going to see—we've got 1 hit recorded. Now I'm going to copy this and open up another client and a third. So now all 3 of these are going to be showing 3 clients are connected. Now when I close this tab, it's not—it's going to call into these other tabs and it's going to update those. So here we have real-time communication, the clients are calling methods on the server, and the server is calling methods on the client. And I did this with very few lines of code, and this is going to work across browser, across server, and it's going to use the best methods that it can in each type. Next we'll look at new features for ASP.NET Web API. So ASP.NET Web API shipped along with MVC 4, and conceptually, the way I like to think about it, is that you've got ASP.NET running underneath the core. And several ways to deliver HTML. And Web API allows you to deliver other formats things like JSON, XML, or other formats that machines love. So you use web forms, web pages in MVC to deliver HTML to people looking at their browsers, and then for those friendly robots that want to read JSON, XML, binary—whatever else— we'll use Web API to talk to them. So in Web API in this new release we get 3 new big features. One is help generation, secondly we get tracing, and third we get OData. So we'll look at each of these in turn. First of all help generation. So here I'm creating a new MVC 4 application. And when I create this I'm going to use the Web API template. So along with what it would normally have generated for me in Web API previously, this also includes a new area. This is a standard MVC 4 area called help page. And this has all this code in here that will look at my Web API, and it will figure out what API calls I have, and it will document them for me. So when I run this, I'm going to see a new thing in the header, API. And here, if I shrink this down, this is what it would look like in full-screen mode. When I click on API it's actually looking at my API controller, and it's looking at what all the different controller methods that are there, and it's generating help for them. So this will say this is what I should expect to return up from the get method. And if I go back and I look at what I expect to get from a Get ID, this is going to show me what I'll get back from one specific call. What's great about this is if somebody wants to use your API, you don't have to type up a document and maybe get some things wrong and it gets out of date. You can actually expose this API help page, and they can just look at it and see down to the second exactly what your API supports. And, of course, you can protect this through authentication if you only want to allow certain people to see this. And—as I said before—this is completely extensible. So you can go in here and you can say, "Well, I would like to change my display templates," for instance. And, "I would like all my texts to show up with a different class," or something like that. So this is a really easy way for you to expose your API in a way that humans can look at it and write applications that can use it. So next we'll go on to tracing. Tracing allows you to find out exactly what's going on under the hood in your application. So if we look back at this and we say, "Okay this tells me that I have an API values ID." So I'm going to browse to /api/Values/5. This is going to return me some JASN data. I don't need to see it right now; I'm just doing this for an example— and also just browse to api/Values. So now let's pop back over into our application, and we can see in the trace output window here that we've got all this information that's showing exactly what happened how it bound the parameters, how it found out which API controller to call, how it formatted the response, et cetera. So this is a great way to understand exactly what went right as well as what went wrong. Finally, we'll look at OData. OData is a way to expose data over HTTP. So there are all kinds of great new things that are available in this release— really full-featured OData support. One thing that I'd like to point out is this OData routing. So you can do some nice simple things. You can request customers. You can also request customers (1) to get the first customer. But there is also really advanced routing as well so you can say, "I would like the first customer's orders." Or you can query along and you can say, "I would like the customer's first order." You can also get metadata exposed in a standard format. So this allows your clients to query into your service to find out what exactly you support, and then they can construct those queries. We also provide query validation, and this allows you to restrict what method you're exposing. You may only want to allow clients to call specific operators or specific query parameters, and so this will allow you to do this. So—for instance—in the second example where we say, "We only allow the logical operator equals," this would return a not-allowed HTTP response if somebody tried to filter for something that was greater than or less than. So this is important for a few reasons. One is you may have business restrictions on what you would like to expose, but 2 is some operations can be really server-intensive and so in order to protect your service you may want to restrict exactly what you're going to allow clients to do. So let's take a quick look at an example. Here I have a nice practical example of querying, and this is going to allow for server-side paging. So here we're using Queryable with a result limit of 5, and we're just returning some books. So this is a standard API controller but now we have got Queryable put on it. And this is actually just using an HTML page in order to query over it. So I'm going to run this. When the HTML page first loads there is no data. Then it hit the service and it found—it got the first 5— it only returned 5 at a time. And now when I hit the next button you can see the OData query that it's using. So its calling into books, and it's only returning 5 at a time and it's using this OData standard query operator to say, "Skip the first 20." So we're able to page back and forth using—you know— simple line of code to say—to restrict how many responses we want at a time and we can go into this and we can do additional things. So we could expose—we could start making other changes to our query to allow filtering, and this is all done via standard OData query syntax. Next we'll look at MVC. So ASP.NET MVC in this release includes some new templates. So we've got a new Facebook template, which allows you to very easily create a Facebook application that's hosted in Facebook— it runs inside the context of Facebook so that it uses Facebook authentication and it also can then read information you expose to it. So you can say, "I would like this application to have access to the users' friends and their pictures and photos." And then you can build an application based on that. And what's nice is this application template actually uses the facebook-csharp-sdk in order to expose all these methods. You can bind directly to a Facebook user or to specific things in there. It makes it really quick and easy to get it up and running. Next we have support for Single Page application. And there's a few templates for this. We'll look at one real quick. So I'm going to create a new MVC 4 application. You'll notice—by the way—here's that Facebook application if we wanted to do that. Here's the Single Page application. So I'm gong to say, "Okay." And this is going to set up a simple project template for me that has Knockout—the popular Knockout JavaScript library— and it's calling back into an ASP.NET Web API controller. So in this example—I'll just run it and show you what it looks like— we're going to be able to create to do lists. [typing] So first I'm going to login—or sign up with a new account. So now it's going to log me in. And I've got a simple to do list to start with. So I'm just going to start crossing things off the list. I'll add a new to do list. [typing] And I can add some things here. Now the important thing to notice here is this is a Single Page Application. So what that means is HTML is delivered from the server to the client, and after that we're not posting back and forth. All the communication from this point on is just over JavaScript, and it's calling back to that server side API. In that code here we can see we've got our API controller, and it's doing kind of standard API things. Then we have—in our scripts—we have an app folder. And this app folder is set up for that AJAX login and has bindings. I've got a data context, and this is what's used to post things back to the server. I've got my model, which defines my application—my to do model. And then finally I've got a view model. So this is making it just really easy for me to get up and running with the simple Single Page Application. Now that in and of itself is pretty neat, But what's really cool is that these are implementing using template extensibility. So we've got a Single Page Application that I just showed you, but there's also support for creating your own templates using VSIX—Visual Studio Extension. And so we're going to be shipping a lot of other templates, and these are available over VSIX, and you can create them yourself. So if you're company has a standard footer or standard JavaScript libraries or other ways that you'd like your File, New Project experience to go take a look at the tutorial I've listed down at the bottom, which shows how to set that up. Next we'll look quickly at web tooling. So there are a ton of new features, and I'm not going to be able to go over these in any kind of depth, but just conceptually here's how I think about them. There's 2 groups of them. One is all those things on the left side—all the Web Forms, SignalR, Web API, and MVC features have tooling updates to go along with them. So all those features that I showed you just—you know—of course those work well with this new tooling. Secondly, we've added a lot of new features for existing things for any kind of web editing even just HTML, CSS JavaScript—for any of those edits that's going to get a lot better in this new update. So one of the coolest new features—I think—is Page Inspector. Now if you're not using Page Inspector, you're probably working way too hard. Here I'm going to right click on Default.aspx. This is in that web forms friendly URLs example that I showed you earlier. So this is actually executing the page. It's not just showing me a designer view. So it's spinning the page up, you can see, and it's going to hit the database. So these are actually—this is live data, this is running my application, this is using the full IE10 engine. So I can click on this and I can inspect and I can see what's happening where. So I can see that this A tag is coming from this item template inside of the default page. But, if instead, I wanted to see what's going on with this up here I can click, and that tells me there's something coming from the site master. So the cool new feature that we've got is that there is live CSS updating. So here I can go in and I can say, "I would like the background color for all my A tags to be green." And it automatically, on the fly, updates that for me. So this is incredibly quick for me to go through and just on the fly I can try out different things, I can change—you know—font size, and I can see exactly what's happening as I edit this. So this is just one example of how incredibly productive you can be using these updated tools. Some of the other cool features that have been added are updated IntelliSense covering things like CoffeeScript and Knockout. There is also live publishing. This updating publishing feature allows me to publish a single file at a time. So here I've got an example of a page that I've already published to Windows Azure websites. I'm going to update one character, and then I can right click on it and I can say, "Just publish that change," or I can say, "Preview the changes that I would be publishing." So here it's going to show me the differences between what is currently on the server and my new change. So I can go through and deploy a single page, I can pull down the previous difference on all that. So this allows me to work a single file at a time really easily. Will wrap up with one other really cool feature, which is paste JSON as class. JSON is JavaScript Object Notation. We'll take a look at the JSON website, and here I'm just going to grab this. This is for our glossary. So they have a glossary with a gloss entry and all that. So I'm just going to copy that. I'm going to go into an MVC application. I'm going to create a new class. So we'll create a new class called glossary. [typing] And then in this I'm just going to— I'm going to create some nested classes just for example. So I'm going to say, "Paste special. Paste JASN as Classes." So what this did was it created, based on that JASN, it figured out that there was a gloss entry and a gloss def, and it filled these in, and it figured out the terms and the nesting and the arrays and all that stuff. It figured that out based on the structure. So this is a great way for you to start coding against data that other services provide you in standard JASN format. So as an example, remember earlier we looked at ASP.NET Web API and how they provide help pages, and so here if we look at—here is the get values. Well this is standard JASN format here, and we could right click and copy and paste from any of these. We also could paste XML. So in this we also have the ability to do a right click, and we can do a Paste, Paste XML as Classes. So a really easy way to consume other people's APIs. So that wraps up our whirlwind tour through what's new in ASP.NET and Web Tools 2012.2 release. So remember there are a lot of new templates, there are a lot of new web tooling features, and most of all you can use this right now because all this does is add on new capabilities. It doesn't change your existing projects or anything in any way. And to find out more, you can always go to ASP.NET/vNext. That's where we always have the newest releases and all of the information you need to know about the releases— where you can find our roadmap, where you can find out videos and more information about what we've just released. So thanks a lot. I hope you enjoy it.

Video Details

Duration: 26 minutes and 41 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Oct 3, 2013

Meet the new ASP.NET and Web Tools 2012.2 release! This release includes a pile of great new features, including project templates, web tooling, and more. Join Jon Galloway as he shows off all the top new features in under a half an hour!

Caption and Translate

    Sign In/Register for Dotsub to translate this video.