In this article, we will take a closer look at the new web editor features for HTML. You can download Visual Studio 2013 trial edition using this link –
http://www.microsoft.com/visualstudio/eng/downloads
Let’s first start with Visual Studio 2013 and create a new ASP.NET Web Application by choosing .NET Framework 4.5.1 as shown below –
Once you click the OK button, you will see a New ASP.NET Project dialog box where you can choose your own web template based on your development environment and requirements in your organization. The dialog box is shown below. Please choose Web Forms for this demonstration.
As soon as you create a project, you will see a brand new page which comes by default with ASP.NET Web Forms template. Run the project and check the site’s default contents. Also observe the Solution Explorer which contains some default folders which comes with the template.
Now let’s add a new HTML page in our web application at a root level. Right click the project and add a new item. Choose “HTML Page” and name it as “Information”. Check out the HTML page. You will find that the new HTML editor has no designer available for HTML page [Left bottom side]. It will look like the following –
Note: Although not an enhancement, but it’s worth to mention that VS 2013 comes with a brand new HTML Editor. By default now static HTML files when opened in VS 2013, does not come with the Designer and Split View option. In order to get a Design | Split | Source view, open the HTML file in a Web Forms Editor explicitly. To do so, right click any HTML file > Open With > HTML (Web Forms) Editor > Set as Default > OK.
Once you do this, HTML pages can be opened with the designer option.
In Visual Studio 2012, we had aria attributes. But if you had observed, aria attributes are not grouped and hence results into intellisense bringing up many options than required. In Visual Studio 2013, we now have grouping of items with an ellipsis “…”. See the difference below –
If you are working with AngularJS, now in Visual Studio 2013, we have Angular support in HTML 5. If you type “ng” in an element as shown below, you will get an intellisense support for AngularJS.
Let’s try this by a simple example of Angular JS. Add a new HTML page with the name “AngularTest” and write the following code in the same –
Now run your page by pressing F5 key and type your name. You will see the name in front of Welcome Back message as you type. The output should look like below –
We now also have auto complete brackets. For example, if you type curly/round bracket, you will find the editor auto closes these brackets. This experience is available across the HTML code, scripts, markup etc.
We also have an intellisense support for Knockout JS into Visual Studio 2013 and HTML 5.
Knockout is mainly used for data binding in a client side development. It mainly focuses on MVVM [Model-View-ViewModel] pattern. During data binding, now we have intellisense support for HTML attributes. To test it, let’s add a new HTML page with the name KnockoutTest and write some code in the same. Observe the intellisense –
We also have better support for inline CSS intellisense. Let’s take a look at an example. Add a HTML page with the name CSSSupport. Add a <style> tag into head tag. Also add a CSS file with the name App.css into your project and write the following code in the CSS file. Also add the App.css file into your HTML page.
Now let’s add the following code in our CSSSupport.html page –
If you observe the above code, we can now attach the ID selector to our control ID [in this case it is DIV tag] which we have added into our App.css file.
We also have now intellisense support for entities. For example –
Type ‘&’ and you will see all the entities which you can use as per your requirements. The output of the above entity will look like below –
Summary – In this article, we saw some new web editor features for HTML 5 in Visual Studio 2013.
http://www.microsoft.com/visualstudio/eng/downloads
Let’s first start with Visual Studio 2013 and create a new ASP.NET Web Application by choosing .NET Framework 4.5.1 as shown below –
Once you click the OK button, you will see a New ASP.NET Project dialog box where you can choose your own web template based on your development environment and requirements in your organization. The dialog box is shown below. Please choose Web Forms for this demonstration.
As soon as you create a project, you will see a brand new page which comes by default with ASP.NET Web Forms template. Run the project and check the site’s default contents. Also observe the Solution Explorer which contains some default folders which comes with the template.
Now let’s add a new HTML page in our web application at a root level. Right click the project and add a new item. Choose “HTML Page” and name it as “Information”. Check out the HTML page. You will find that the new HTML editor has no designer available for HTML page [Left bottom side]. It will look like the following –
Note: Although not an enhancement, but it’s worth to mention that VS 2013 comes with a brand new HTML Editor. By default now static HTML files when opened in VS 2013, does not come with the Designer and Split View option. In order to get a Design | Split | Source view, open the HTML file in a Web Forms Editor explicitly. To do so, right click any HTML file > Open With > HTML (Web Forms) Editor > Set as Default > OK.
Once you do this, HTML pages can be opened with the designer option.
In Visual Studio 2012, we had aria attributes. But if you had observed, aria attributes are not grouped and hence results into intellisense bringing up many options than required. In Visual Studio 2013, we now have grouping of items with an ellipsis “…”. See the difference below –
AngularJS support
If you are working with AngularJS, now in Visual Studio 2013, we have Angular support in HTML 5. If you type “ng” in an element as shown below, you will get an intellisense support for AngularJS.
Let’s try this by a simple example of Angular JS. Add a new HTML page with the name “AngularTest” and write the following code in the same –
Now run your page by pressing F5 key and type your name. You will see the name in front of Welcome Back message as you type. The output should look like below –
We now also have auto complete brackets. For example, if you type curly/round bracket, you will find the editor auto closes these brackets. This experience is available across the HTML code, scripts, markup etc.
We also have an intellisense support for Knockout JS into Visual Studio 2013 and HTML 5.
Knockout is mainly used for data binding in a client side development. It mainly focuses on MVVM [Model-View-ViewModel] pattern. During data binding, now we have intellisense support for HTML attributes. To test it, let’s add a new HTML page with the name KnockoutTest and write some code in the same. Observe the intellisense –
We also have better support for inline CSS intellisense. Let’s take a look at an example. Add a HTML page with the name CSSSupport. Add a <style> tag into head tag. Also add a CSS file with the name App.css into your project and write the following code in the CSS file. Also add the App.css file into your HTML page.
Now let’s add the following code in our CSSSupport.html page –
If you observe the above code, we can now attach the ID selector to our control ID [in this case it is DIV tag] which we have added into our App.css file.
We also have now intellisense support for entities. For example –
Type ‘&’ and you will see all the entities which you can use as per your requirements. The output of the above entity will look like below –
Summary – In this article, we saw some new web editor features for HTML 5 in Visual Studio 2013.
Tweet
No comments:
Post a Comment