Web Development in HTML5 using Visual Studio 2010

HTML5 is the new buzz all around. And because I use day-in , day-out Visual Studio 2010 for developing Silverlight and WPFapplications, I gave a try whether HTML 5 websites be created in Visual Studio 2010.
And the answer is Yes :)
This blog is dedicated to understand how Visual Studio 2010 helps to create HTML5 Websites.
Creating Project Templates in Visual Studio 2010.
Steps to follow :
Create an empty ASP.NET Website .
NewWebSite
Create a folder structure .Place the files in folder.
FolderStructure

Select File – > Export Template -> Project Template
ExportTemplate
TemplateDescription
Fill the details
  • Template Name
  • What the template does
  • Set the icon image ( .ico file)(optional)
There you go!!! You have template ready to add HTML5 websites to the solution with a readymade structure
HTML 5 WebSite
Creating Item Templates for HTML 5 in Visual Studio 2010.
Every time when we add HTML pages to the folder, we get a default structure for the HTML page. Now if we wish to havecustomized HTML 5 page with a structure, it would be great if we have option to ADD NEW ITEM and we have the HTML 5 page structure ready in place.
Steps to follow:
Create desired structure for your HTML 5 page in the website. Following is the structure for the web page.
<!DOCTYPE html5> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <header> HEADER </header> 
    <nav> 
        <ul> 
            <li><a href="Home.html">Home</a></li> 
            <li><a href="ContactUs.html">Contact Us</a></li> 
            <li><a href="About.html">About Us</a></li> 
        </ul> 
    </nav> 
    <footer> FOOTER </footer> 
</body> 
</html>
Select File – > Export Template – > Item Template . Refer above image for same step.
Select the file where the structure is created.
ItemExportTemplate
You come across the window which allows the references to be added. But for HTML 5 sites there are no references required at least for simple site. So click Next without checking the checkboxes.
SelectItemReferences
Fill the details as shown in next window.
  • Template Name
  • What the template does
  • Set the icon image ( .ico file) (optional)
SetTheItemDescription

There you go!!! You have template ready to add HTML5 pages to the project with your structure code.
HTML5Template

How to add JQuery Snippet in Visual Studio

I recently stumbled upon the jQuery code snippets for Visual Studio 2010 and then i have found the solution.

1. Download .exe files from the following link
   
    http://jquerysnippets.codeplex.com/releases/view/36580

2. Make sure your visual studio was closed.

3. Run jQuerySnippets.exe

4. After successful installation, you can open your Visual Studio and use JQuery Snippet.

For Ex.

           1. You need to add <script type="text/javascript">  </script> tag in your  file. Now your code snippet will generate for you.
 Just Click CTRL + SpaceBar then type jq after that press tab button.


2. I am going to add click event using snippet.
 Just Click CTRL + SpaceBar then type jqclick after that press tab button.


3. Now you have replace selector as your control Id or Class 



4. I am going show div on this click Event, with in this click event
 Just Click CTRL + SpaceBar then type jqshow after that press tab button.



5.  Now you have replace selector as your Div Id or Class


6. You have successfully Add Jquery Code snippet for your visual studio.

How to copy data from one database table to another database table

I have face this situation several times while web server and local server updates, and finally i have find out the simple solution.

Here i have taken two databases,

1. SampleDb
2. MyDb

I am going to copy one table data from MyDb to SampleDb.

1. Right click on destination database (where to copy) SampleDb.
2. In Task --> ImportData
 
                 

3. It will open a new dialog window. Choose your  Source Database. Here my source database is MyDb and then click on Next Button.

4.Then Choose Your Destination Database. Here my destination database is SampleDb and then click on Next Button.


5. Click on Copy data from one or more tables or views. Then Click Next on Button


5. It will list out all the tables from your source database. Here my source database is MyDb. It has three tables. you have to select which table data you want to copy. you can select one or more table.

6. Check Run Immediately and then Click on Next button

7. Then click Finish button. It will execute the query, then you have a success message with How many rows was transferred to your destination database.


I don't have any data in this table2. so it show 0 rows transferred. Now you have to check your destination database.

You have successfully copy data from one database table to another database table.