This is the second post in a series of posts titled "What's new in ASP.Net 4.5
and VS 2012".You can have a
look at the first post in this series, here. Please find all my posts regarding VS 2012, here. In this post I will be looking into the various new features available in ASP.Net 4.5
and VS 2012.I will be looking into the enhancements in the HTML Editor,CSS Editor
and Javascript Editor.In
order to follow along this post you must have Visual Studio 2012
and
.Net Framework 4.5 installed in your machine.Download
and install VS
2012 using this link.My machine runs on Windows 8
and Visual Studio 2012 works just fine.I will work fine in Windows 7 as well so do not worry if you do not have the latest Microsoft operating system.1) Launch VS 2012
and create a new Web Forms application by going to File - >New Web Site - > ASP.Net Web Forms Site.2) Choose an appropriate name for your web site.3) I would like to point out the new enhancements in the CSS editor in VS 2012. In the Solution Explorer in the Content folder
and open the Site.cssThen when I try to change the background-color property of the html element, I get a brand new handy color-picker. Have a
look at the picture below Please note that the color-picker shows all the colors that have been used in this website. Then you can expand the color-picker by clicking on the arrows. Opacity is also supported. Have a
look at the picture below4) There are also mobile styles in the Site.css .These are based on media queries.Please have a
look at another post of mine on CSS3 media queries. Have a
look at the picture below In this case when the maximum width of the screen is less than 850px there will be a new layout that will be dictated by these new rules. Also CSS snippets are supported. Have a
look at the picture below I am writing a new CSS rule for an image element. I write the property transform
and hit tab
and then I have cross-browser CSS handling all of the major vendors.Then I simply add the value rotate
and it is applied to all the cross browser options.Have a
look at the picture below. I am sure you realise how productive you can become with all these CSS snippets. 5) Now let's have a
look at the new HTML editor enhancements in VS 2012You can drag
and drop a GridView web server control from the Toolbox in the Site.master file.You will see a smart tag (that was only available in the Design View) that you can expand
and add fields, format the web server control.Have a
look at the picture below 6) We also have available code snippets. I type <video
and then press tab twice.By doing that I have the rest of the HTML 5 markup completed.Have a
look at the picture below 7) I have new support for the input tag including all the HTML 5 types
and all the new accessibility features.Have a
look at the picture below 8) Another interesting feature is the new Intellisense capabilities. When I change the DocType to 4.01
and the type <audio>,<video> HTML 5 tags, Intellisense does not recognise them
and add squiggly lines.Have a
look at the picture below All these features support ASP.Net Web forms, ASP.Net MVC applications
and Web Pages. 9) Finally I would like to show you the enhanced support that we have for Javascript in VS 2012. I have full Intellisense support
and code snippets support.I create a sample javascript file. I type If
and press tab. I type while
and press tab.I type for
and press tab.In all three cases code snippet support kicks in
and completes the code stack. Have a
look at the picture below We also have full Intellisense support.Have a
look at the picture below I am creating a simple function
and then type some sort of XML like comments for the input parameters. Have a
look at the picture below. Then when I call this function, Intellisense has picked up the XML comments
and shows the variables data types.Have a
look at the picture below Hope it helps!!!
