Dot Net Rules

What's new in ASP.Net 4.5 and VS 2012 - part 2

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.css

Then 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 below

4) 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 2012

You 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!!!

What's new in ASP.Net 4.5 and VS 2012 - part 1

I have downloaded .Net framework 4.5 and Visual Studio 2012 since it was released to MSDN subscribers on the 15th of August.For people that do not know about that yet please have a look at Jason Zander's excellent blog post .

Since then I have been investigating the many new features that have been introduced in this release.In this post I will be looking into new features available in ASP.Net 4.5 and VS 2012.

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.

Please find all my posts regarding VS 2012, here .

Well I have not exactly kept my promise for writing short blog posts, so I will try to keep this one short.

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) Build and run your site (CTRL+F5). Then go to View - > Source to see the HTML markup (Javascript e.t.c) that is rendered through the browser.

You will see that the ASP.Net team has done a good job to make the markup cleaner and more readable. The ViewState size is significantly smaller compared to its size to earlier versions.

Have a look at the picture below

4) Another thing that you must notice is that the new template makes good use of HTML 5 elements.When you view the application through the browser and then go to View Page Source you will see HTML 5 elements like nav,header,section.

Have a look at the picture below

5) In VS 2012 we can browse with multiple browsers. There is a very handy dropdown that shows all the browsers available for viewing the website.

Have a look at the picture below

When I select the option Browse With... I see another window and I can select any of the installed browsers I want and also set the default browser.

Have a look at the picture below

When I click Browse, all the selected browsers fire up and I can view the website in all of them.

Have a look at the picture below

There will be more posts soon looking into new features of ASP.Net 4.5 and VS 2012

Hope it helps!!!

Using JQuery tabs in an HTML 5 page

In this post I will show you how to create a simple tabbed interface using JQuery,HTML 5 and CSS.

Make sure you have downloaded the latest version of JQuery (minified version) from http://jquery.com/download.

Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.

In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. 

Let me move on to the actual example.

This is the sample HTML 5 page

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Liverpool Legends</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-1.8.2.min.js"> </script>
     <script type="text/javascript" src="tabs.js"></script>
    
  </head>
  <body>
    <header>
        <h1>Liverpool Legends</h1>
    </header>
 
    <section id="tabs">
        <ul>
            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#first-tab">Defenders</a></li>
            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#second-tab">Midfielders</a></li>
            <li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=9143136#third-tab">Strikers</a></li>
        </ul>
   <div id="first-tab">
     <h3>Liverpool Defenders</h3>
     <p> The best defenders that played for Liverpool are Jamie Carragher, Sami Hyypia , Ron Yeats and Alan Hansen.</p>
   </div>
   <div id="second-tab">
     <h3>Liverpool Midfielders</h3>
     <p> The best midfielders that played for Liverpool are Kenny Dalglish, John Barnes,Ian Callaghan,Steven Gerrard and Jan Molby.
 
       </p>
   </div>
   <div id="third-tab">
     <h3>Liverpool Strikers</h3>
     <p>The best strikers that played for Liverpool are Ian Rush,Roger Hunt,Robbie Fowler and Fernando Torres.<br/>
      </p>
   </div>

 </div>

</section>
   
   
    <footer>
   
    <p>All Rights Reserved</p>
 
    </footer>
  
  </body>
 
</html> 

This is very simple HTML markup. 

I have styled this markup using CSS.

The contents of the style.css file follow

* {
    margin: 0;
    padding: 0;
}

header

{

font-family:Tahoma;
font-size:1.3em;
color:#505050;
text-align:center;
}


#tabs {
    font-size: 0.9em;
    margin: 20px 0;
}
#tabs ul {
    float: left;
    background: #777;
    width: 260px;
    padding-top: 24px;

}
#tabs li {
    margin-left: 8px;
    list-style: none;
}
* html #tabs li {
    display: inline;
}
#tabs li, #tabs li a {
    float: left;
}
#tabs ul li.active {
    border-top:2px red solid;
    background: #15ADFF;
}
#tabs ul li.active a {
    color: #333333;
}
#tabs div {
    background: #15ADFF;
    clear: both;
    padding: 15px;
    min-height: 200px;
}
#tabs div h3 {
    margin-bottom: 12px;
}
#tabs div p {
    line-height: 26px;
}
#tabs ul li a {
    text-decoration: none;
    padding: 8px;
    color:#0b2f20;
    font-weight: bold;
}

footer
{
background-color:#999;
width:100%;
text-align:center;
font-size:1.1em;
color:#002233;
}

There are some CSS rules that style the various elements in the HTML 5 file. These are straight-forward rules.

The JQuery code lives inside the tabs.js file

$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
 
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
 

I am using some of the most commonly used JQuery functions like hide , show, addclass , removeClass

I hide and show the tabs when the tab becomes the active tab.

When I view my page I get the following result

Hope it helps!!!!!

Scrolling an HTML 5 page using JQuery

In this post I will show you how to use JQuery to scroll through an HTML 5 page.I had to help a friend of mine to implement this functionality and I thought it would be a good idea to write a post.

I will not use any JQuery scrollbar plugin,I will just use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download.

Please find here all my posts regarding JQuery.Also have a look at my posts regarding HTML 5.

In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. 

Let me move on to the actual example.

This is the sample HTML 5 page

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Liverpool Legends</title>
   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
   
    <link rel="stylesheet" type="text/css" href="style.css">
   
    <script type="text/javascript" src="jquery-1.8.2.min.js"> </script>
     <script type="text/javascript" src="scroll.js">
     </script>
     
  </head>
  <body>
    <header>
        <h1>Liverpool Legends</h1>

    </header>
   
    <div id="main">
   
    <table>
        <caption>Liverpool Players</caption>

        <thead>
            <tr>
                <th>Name</th>
                <th>Photo</th>
                <th>Position</th>
                <th>Age</th>
                <th>Scroll</th>
            </tr>
        </thead>
        <tfoot class="footnote">
            <tr>
                <td colspan="4">We will add more photos soon</td>

            </tr>
        </tfoot>
    <tbody>
        <tr class="maintop">
        <td>Alan Hansen</td>
            <td>
            <figure>
            <img src="images\Alan-hansen-large.jpg" alt="Alan Hansen">
            <figcaption>The best Liverpool Defender <a href="http://en.wikipedia.org/wiki/Alan_Hansen">Alan Hansen</a></figcaption>
            </figure>
            </td>
            <td>Defender</td>
            <td>57</td>
            <td class="top">Middle</td>
        </tr>
        <tr>
        <td>Graeme Souness</td>
            <td>
            <figure>
            <img src="images\graeme-souness-large.jpg" alt="Graeme Souness">
            <figcaption>Souness was the captain of the successful Liverpool team of the early 1980s <a href="http://en.wikipedia.org/wiki/Graeme_Souness">Graeme Souness</a></figcaption>
            </figure>
            </td>
            <td>MidFielder</td>
            <td>59</td>
        </tr>
        <tr>
        <td>Ian Rush</td>
            <td>
            <figure>
            <img src="images\ian-rush-large.jpg" alt="Ian Rush">
            <figcaption>The deadliest Liverpool Striker <a href="http://it.wikipedia.org/wiki/Ian_Rush">Ian Rush</a></figcaption>
            </figure>
            </td>
            <td>Striker</td>
            <td>51</td>
        </tr>
        <tr class="mainmiddle">
        <td>John Barnes</td>
            <td>
            <figure>
            <img src="images\john-barnes-large.jpg" alt="John Barnes">
            <figcaption>The best Liverpool Defender <a href="http://en.wikipedia.org/wiki/John_Barnes_(footballer)">John Barnes</a></figcaption>
            </figure>
            </td>
            <td>MidFielder</td>
            <td>49</td>
            <td class="middle">Bottom</td>
        </tr>
       
        <tr>
        <td>Kenny Dalglish</td>
            <td>
            <figure>
            <img src="images\kenny-dalglish-large.jpg" alt="Kenny Dalglish">
            <figcaption>King Kenny <a href="http://en.wikipedia.org/wiki/Kenny_Dalglish">Kenny Dalglish</a></figcaption>
            </figure>
            </td>
            <td>Midfielder</td>
            <td>61</td>
        </tr>
        <tr>
            <td>Michael Owen</td>
            <td>
            <figure>
            <img src="images\michael-owen-large.jpg" alt="Michael Owen">
            <figcaption>Michael was Liverpool's top goal scorer from 1997–2004 <a href="http://www.michaelowen.com/">Michael Owen</a></figcaption>
            </figure>
            </td>
            <td>Striker</td>
            <td>33</td>
        </tr>
        <tr>
            <td>Robbie Fowler</td>
            <td>
            <figure>
            <img src="images\robbie-fowler-large.jpg" alt="Robbie Fowler">
            <figcaption>Fowler scored 183 goals in total for Liverpool <a href="http://en.wikipedia.org/wiki/Robbie_Fowler">Robbie Fowler</a></figcaption>
            </figure>
            </td>
            <td>Striker</td>
            <td>38</td>
        </tr>
        <tr class="mainbottom">
            <td>Steven Gerrard</td>
            <td>
            <figure>
            <img src="images\steven-gerrard-large.jpg" alt="Steven Gerrard">
            <figcaption>Liverpool's captain <a href="http://en.wikipedia.org/wiki/Steven_Gerrard">Steven Gerrard</a></figcaption>
            </figure>
            </td>
            <td>Midfielder</td>
            <td>32</td>
            <td class="bottom">Top</td>
        </tr>


    </tbody>
</table>
     
    </div>
   
   
    <footer>
   
    <p>All Rights Reserved</p>
 
    </footer>
  
  </body>
 
</html> 

The markup is very easy to follow and understand. You do not have to type all the code,simply copy and paste it.For those that you are not familiar with HTML 5, please take a closer look at the new tags/elements introduced with HTML 5.

When I view the HTML 5 page with Firefox I see the following result.

I have also an external stylesheet (style.css).

body{
background-color:#efefef;
}

h1{

font-size:2.3em;

}

table {

border-collapse: collapse;
font-family: Futura, Arial, sans-serif;

}
caption {

font-size: 1.2em;
margin: 1em auto;


}
th, td {

padding: .65em;

}

th, thead {

background: #000;
color: #fff;
border: 1px solid #000;

}
tr:nth-child(odd)
{
background: #ccc;
}
tr:nth-child(even)
{
background: #404040;
}



td
{
border-right: 1px solid #777;
}
table
{
 border: 1px solid #777;
 }

.top, .middle, .bottom
{
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    text-align: center;

}

.footnote
{
text-align:center;
font-family:Tahoma;
color:#EB7515;

}

a{color:#22577a;text-decoration:none;}    
a:hover {color:#125949; text-decoration:none;} 

footer
{
background-color:#505050;
width:1150px;
}

These are just simple CSS Rules that style the various HTML 5 tags,classes.

The jQuery code that makes it all possible resides inside the scroll.js file.Make sure you type everything correctly.

$(document).ready(function() {


                $('.top').click(function(){


                    $('html, body').animate({


                        scrollTop: $(".mainmiddle").offset().top


                    },4000 );


                 });


                $('.middle').click(function(){

                    $('html, body').animate({

                        scrollTop: $(".mainbottom").offset().top

                    },4000);

                 });


                    $('.bottom').click(function(){

                    $('html, body').animate({

                        scrollTop: $(".maintop").offset().top

                    },4000);

                 });

});
 

Let me explain what I am doing here.When I click on the Middle word (  $('.top').click(function(){ ) this relates to the top class that is clicked.

Then we declare the elements that we want to participate in the scrolling. In this case is html,body ( $('html, body').animate).These elements will be part of the vertical scrolling.

In the next line of code we simply move (navigate) to the element (class mainmiddle that is attached to a tr element.)

      scrollTop: $(".mainmiddle").offset().top 

Make sure you type all the code correctly and try it for yourself. I have tested this solution will all 4-5 major browsers.

Hope it helps!!!

Disabling the right-click sub menu using JQuery

Recently I needed to disable the right-click contextual menu in an HTML page for a very simple HTML application I was creating for a friend.

This is going to be a short post where I will demonstrate how to disable the right-click contextual menu.

I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download

Please find here all my posts regarding JQuery.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here. 

I am going to create a very simple HTML 5 page with some text and an image.

The HTML markup for the page follows. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
     <script type="text/javascript" src="jquery-1.8.2.min.js">
        </script>
<script type="text/javascript">

 (function ($) { $(document).bind('contextmenu', function () { return false;
}); })(jQuery);

</script>
    
  </head>
  <body>
 
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <h2>HTML 5, JQuery, CSS3</h2>
    </div>
  
   <figure>
  <img src="html5.png" alt="HTML 5">
</figure>
   
    <div id="main">
   
      <h2>HTML 5</h2>
       
     
          <article>
          <p>
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
          </article>
      </div>   
   
  
  </body>
 
</html>

This is the JQuery code, I use

 (function ($) { $(document).bind('contextmenu', function () { return false;
}); })(jQuery);

I simply disable/cancel the contextmenu event.When I load the simple page on the browser and I right-click the context menu does not appear.

Hope it helps!!!

Resizing text in an HTML 5 page using JQuery

This is going to be the ninth post in a series of posts regarding HTML 5. You can find the other posts here, here , here , here, here , here , here and here.

In this post I will demonstrate how to implement a very common feature found in websites today, enabling the visitor to increase or decrease the font size of a page.

You can use the JQuery code I will write in this post for HTML pages which do not follow the HTML 5 standard.

As I said earlier we need to write JavaScript to implement this functionality.

I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

The HTML markup for the page follows.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
     <script type="text/javascript" src="jquery-1.8.2.min.js">
        </script>
<script type="text/javascript">

$(function() {
    $('a').click(function() {
        var getfont = $('p').css('font-size');
        var mynum = parseFloat(getfont, 10);
        var newmwasure = getfont.slice(-2);
       
        $('p').css('font-size', mynum / 1.2 + newmwasure);
       
        if(this.id == 'increase') {
            $('p').css('font-size', mynum * 1.4 + newmwasure);
        }
    })
   

})

</script>
    
  </head>
  <body>
 
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <h2>HTML 5, JQuery, CSS3</h2>
    </div>
    <div id="resize">
    <a href="" id="increase">Increase Font</a>
       |
        <a href="" id="decrease">Decrease Font</a>
        </div>
   
    <div id="main">
   
      <h2>HTML 5</h2>
       
     
          <article>
          <p>
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
          </article>
      </div>   
   
  
  </body>
 
</html>

There is nothing difficult or fancy in the HTML markup above. I have a link to the external JQuery library and the JQuery code is included inside the .html page.

I have two links on this page that will increase/decrease the font size of the contents enclosed inside the <p></p> tags.

Let me explain what the JQuery code does.

When the user clicks on the link, I store in a variable the current font size of the <p> element that I get back from the CSS function.

var getfont = $('p').css('font-size');

So now we have the original value. That will return a value like "16px" "1.2em".

Then I need to get the unit of measurement (px,em).I use the slice() function.

 var newmwasure = getfont.slice(-2);

Then I want to get only the numeric part of the returning value.I do that using the parseFloat() function.

Have a look at the parseFloat() function.

Finally with this bit of code I choose a ratio (I am devising a very simple algorithm for increasing and decreasing) and apply it to the <p> element. I still use the CSS function. You can get but also set the font size for a particular element with the CSS function.

So I check for the id=increase and if this matches I will increase the font size of the <p> element.If it does not match we will decrease the font size.

  $('p').css('font-size', mynum / 1.2 + newmwasure);
       
        if(this.id == 'increase') {
            $('p').css('font-size', mynum * 1.4 + newmwasure);

The code for the css file (style.css) follows

body

{
background-color:#eaeaea;

}

p{

font-size:0.8em;
font-family:Tahoma;

}

#resize

{

width:200px;
background-color:#dadada;

}

#resize a {

text-decoration:none;

}

The above CSS rules are very easy to understand. Now I save all my work.

I view my page on the browser for the first time.Have a look at the picture below

Now I increase the font size by clicking the respective link

Have a look at the picture below

Finally I decrease the font size by clicking on the respective link

Have a look at the picture below 

Once more we see that the power and simplicity of JQuery library enables us to write less code but accomplish a lot at the same time.

Hope it helps!!

Building an ASP.Net 4.5 Web forms application - part 5

Τhis is the fifth post in a series of posts on how to design and implement an ASP.Net 4.5 Web Forms store that sells posters on line.

There are 4 more posts in this series of posts.Please make sure you read them first.You can find the first post here. You can find the second post here. You can find the third post here.You can find the fourth here. 

In this new post we will build on the previous posts and we will demonstrate how to display the details of a poster when the user clicks on an individual poster photo/link.

We will add a FormView control on a web form and will bind data from the database. FormView is a great web server control for displaying the details of a single record.

1) Launch Visual Studio and open your solution where your project lives

2) Add a new web form item on the project.Make sure you include the Master Page.Name it PosterDetails.aspx

3) Open the PosterDetails.aspx page. We will add some markup in this page. Have a look at the code below

<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">


    <asp:FormView ID="posterDetails" runat="server" ItemType="PostersOnLine.DAL.Poster" SelectMethod ="GetPosterDetails">
        <ItemTemplate>
            <div>
                <h1><%#:Item.PosterName %></h1>
            </div>
            <br />
            <table>
                <tr>
                    <td>
                        <img src="<%#:Item.PosterImgpath %>" border="1" alt="<%#:Item.PosterName %>" height="300" />
                    </td>
                    <td style="vertical-align: top">
                        <b>Description:</b><br /><%#:Item.PosterDescription %>
                        <br />
                        <span><b>Price:</b>&nbsp;<%#: String.Format("{0:c}", Item.PosterPrice) %></span>
                        <br />
                        <span><b>Poster Number:</b>&nbsp;<%#:Item.PosterID %></span>
                        <br />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:FormView>


</asp:Content>

I set the ItemType property to the Poster entity class and the SelectMethod to the GetPosterDetails method.

The Item binding expression is available and we can retrieve properties of the Poster object.I retrieve the name, the image,the description and the price of each poster.

public IQueryable<Poster> GetPosterDetails([QueryString("PosterID")]int? posterid)
        {
       

            PosterContext ctx = new PosterContext();

            IQueryable<Poster> query = ctx.Posters;


            if (posterid.HasValue && posterid > 0)
            {
                query = query.Where(p => p.PosterID == posterid);
            }
            else
            {
                query = null;
            }
            return query;
        }

I bind the value from the query string to the posterid parameter at run time.This is all possible due to the QueryStringAttribute class that lives inside the System.Web.ModelBinding and gets the value of the query string variable PosterID.If there is a matching poster it is fetched from the database.If not,there is no data at all coming back from the database.

5) I run my application and then click on the "Midfielders" link.Then click on the first poster that appears from the left (Kenny Dalglish) and click on it to see the details. Have a look at the picture below to see the results.

Μake sure you place breakpoints in the code so you can see what is really going on.

Hope it helps!!!

Building an ASP.Net 4.5 Web forms application - part 4

Τhis is the fourth post in a series of posts on how to design and implement an ASP.Net 4.5 Web Forms store that sells posters on line.

There are 3 more posts in this series of posts.Please make sure you read them first.You can find the first post here. You can find the second post here. You can find the third post here. 

In this new post we will build on the previous posts and we will demonstrate how to display the posters per category.

We will add a ListView control on the PosterList.aspx and will bind data from the database. We will use the various templates.

Then we will write code in the PosterList.aspx.cs to fetch data from the database.

1) Launch Visual Studio and open your solution where your project lives

2) Open the PosterList.aspx page. We will add some markup in this page. Have a look at the code below

  <section class="posters-featured">
                    <ul>
                        <asp:ListView ID="posterList" runat="server"
                            DataKeyNames="PosterID"
                            GroupItemCount="3" ItemType="PostersOnLine.DAL.Poster" SelectMethod="GetPosters">
                            <EmptyDataTemplate>     
                                <table id="Table1" runat="server">       
                                    <tr>         
                                        <td>We have no data.</td>       
                                    </tr>    
                                </table> 
                            </EmptyDataTemplate> 
                            <EmptyItemTemplate>    
                                <td id="Td1" runat="server" /> 
                            </EmptyItemTemplate> 
                            <GroupTemplate>   
                                <tr ID="itemPlaceholderContainer" runat="server">     
                                    <td ID="itemPlaceholder" runat="server"></td>   
                                </tr> 
                            </GroupTemplate> 
                            <ItemTemplate>   
                                <td id="Td2" runat="server">     
                                    <table>       
                                        <tr>         
                                            <td>&nbsp;</td>         
                                            <td>
                                                <a href="PosterDetails.aspx?posterID=<%#:Item.PosterID%>">
                                                    <img src="<%#:Item.PosterImgpath%>"
                                                        width="100" height="75" border="1"/></a>
                                            </td>
                                            <td>
                                                <a href="PosterDetails.aspx?posterID=<%#:Item.PosterID%>">
                                                    <span class="PosterName">
                                                        <%#:Item.PosterName%>
                                                    </span>
                                                </a>           
                                                <br />
                                                <span class="PosterPrice">          
                                                    <b>Price: </b><%#:String.Format("{0:c}", Item.PosterPrice)%>
                                                </span>
                                                <br />           
                                            </td>       
                                        </tr>     
                                    </table>   
                                </td> 
                            </ItemTemplate> 
                            <LayoutTemplate>   
                                <table id="Table2" runat="server">     
                                    <tr id="Tr1" runat="server">       
                                        <td id="Td3" runat="server">         
                                            <table ID="groupPlaceholderContainer" runat="server">           
                                                <tr ID="groupPlaceholder" runat="server"></tr>         
                                            </table>       
                                        </td>     
                                    </tr>     
                                    <tr id="Tr2" runat="server"><td id="Td4" runat="server"></td></tr>   
                                </table> 
                            </LayoutTemplate>
                        </asp:ListView>
                    </ul>
               </section>

 3) We have a ListView control on the page called PosterList. I set the ItemType property to the Poster class and then the SelectMethod to the GetPosters method.  I will create this method later on.

   (ItemType="PostersOnLine.DAL.Poster" SelectMethod="GetPosters")

Then in the code below  I have the data-binding expression Item  available and the control becomes strongly typed.So when the user clicks on the link of the poster's category the relevant information will be displayed (photo,name and price)

                                           <td>
                                                <a href="PosterDetails.aspx?posterID=<%#:Item.PosterID%>">
                                                    <img src="<%#:Item.PosterImgpath%>"
                                                        width="100" height="75" border="1"/></a>
                                            </td>

4)  Now we need to write the simple method to populate the ListView control.It is called GetPosters method.

The code follows

 public IQueryable<Poster> GetPosters([QueryString("id")] int? PosterCatID)
        {


            PosterContext ctx = new PosterContext();

            IQueryable<Poster> query = ctx.Posters;


            if (PosterCatID.HasValue && PosterCatID > 0)
            {
                query = query.Where(p=>p.PosterCategoryID==PosterCatID);
            }
            return query;
           
        }

This is a very simple method that returns information about posters related to the PosterCatID passed to it.

I bind the value from the query string to the PosterCatID parameter at run time.This is all possible due to the QueryStringAttribute class that lives inside the System.Web.ModelBinding and gets the value of the query string variable id.

5) I run my application and then click on the "Midfilders" link. Have a look at the picture below to see the results.

In the Site.css file I added some new CSS rules to make everything more presentable.

.posters-featured {

    width:840px;
    background-color:#efefef;
}


.posters-featured   a:link, a:visited,
    a:active, a:hover {
        color: #000033;
    }


.posters-featured

    a:hover {
        background-color: #85c465;
    }
 

6) I run the application again and this time I do not choose any category, I simply navigate to the PosterList.aspx page. I see all the posters since no query string was passed as a parameter.

Have a look at the picture below

Μake sure you place breakpoints in the code so you can see what is really going on.In the next post I will show you how to display poster details.

Hope it helps!!!

Building an ASP.Net 4.5 Web forms application - part 3

Τhis is the third post in a series of posts on how to design and implement an ASP.Net 4.5 Web Forms store that sells posters on line.

Make sure you read the first and second post in the series.

In this new post I will keep making some minor changes in the Markup,CSS and Master page but there is no point in presenting them here. They are just minor changes to reflect the content and layout I want my site to have.

What I need to do now is to add some more pages and start displaying properly data from my database.

Having said that I will show you how to add more pages to the web application and present data.

1) Launch Visual Studio and open your solution where your project lives

2) Add a new web form item on the project.Make sure you include the Master Page.Name it PosterList.aspx

Have a look at the picture below

3) In Site.Master add the following link to the master page so the user can navigate to it.You should only add the line in bold

     <nav>
                    <ul id="menu">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About.aspx">About</a></li>
                        <li><a runat="server" href="~/Contact.aspx">Contact</a></li>
                          <li><a href="http://weblogs.asp.net/PosterList.aspx">Posters</a></li>
                    </ul>
                </nav>

4) Now we need to display categories from the database. We will use a ListView web server control.Inside the <div id="body"> add the following code.

 <section id="postercat">
       <asp:ListView ID="categoryList" 
                        ItemType="PostersOnLine.DAL.PosterCategory"
                        runat="server"
                        SelectMethod="GetPosterCategories" >
                        <ItemTemplate>
                       
                            <a href="http://weblogs.asp.net/PosterList.aspx?id=<%#: Item.PosterCategoryID %>">
                            <%#: Item.PosterCategoryName %>
                            </a>
                            </b>
                        </ItemTemplate>
                        <ItemSeparatorTemplate> ----- </ItemSeparatorTemplate>
                    </asp:ListView>
             </section>

       

Let me explain what the code does.We have the ListView control that displays each poster category's name.It also includes a link to the PosterList.aspx page with a query-string value containing the ID of the category. We set the ItemType property in the ListView to the PosterCategory entity .We set the SelectMethod property to a method GetPosterCategories. Now we can use the data-binding expression Item (<%#: %>) that is available within the ItemTemplate .

5) Now we must write the GetPosterCategories method. In the Site.Master.cs file add the following code.This is just a simple function that returns the poster categories.

        public IQueryable<PosterCategory> GetPosterCategories()
        {

            PosterContext ctx = new PosterContext();

            IQueryable<PosterCategory> query = ctx.PosterCategories;
            return query;
        }

6) I just changed a few things in the Site.css file to style the new <section> HTML element that includes the ListView control.

#postercat {

 
text-align: center; background-color: #85C465;

}
    

7) Build and run your application. Everything should compile now. Have a look at the picture below.The links (poster categories) appear.Τhe ListView control when is called during the page lifecycle calls the GetPosterCategories() method.The method is executed and returns the poster categories that are bound to the control.

When I click on any of the poster category links, the PosterList.aspx page will show up with the appropriate Id that is the PosterCategoryID.

Have a look at the picture below

We will add more data-enabled controls in the next post in the PosterList.aspx page. Some people are complaining the posts are too long so I will keep them short.

Hope it helps!!!

Looking into Enum Support in Entity Framework 5.0 Code First

In this post I will show you with a hands-on demo the enum support that is available in Visual Studio 2012, .Net Framework 4.5 and Entity Framework 5.0.

You can have a look at this post to learn about the support of multilple diagrams per model that exists in Entity Framework 5.0.

We will demonstrate this with a step by step example. I will use Visual Studio 2012 Ultimate. You can also use Visual Studio 2012 Express Edition.

Before I move on to the actual demo I must say that in EF 5.0 an enumeration can have the following types.

• Byte
• Int16
• Int32
• Int64
• Sbyte
  

Obviously I cannot go into much detail on what EF is and what it does. I will give again a short introduction.The .Net framework provides support for Object Relational Mapping through EF. So EF is a an ORM tool and it is now the main data access technology that microsoft works on. I use it quite extensively in my projects. Through EF we have many things out of the box provided for us. We have the automatic generation of SQL code.It maps relational data to strongly types objects.All the changes made to the objects in the memory are persisted in a transactional way back to the data store.

You can find in this post an example on how to use the Entity Framework to retrieve data from an SQL Server Database using the "Database/Schema First" approach.

In this approach we make all the changes at the database level and then we update the model with those changes.

In this post you can see an example on how to use the "Model First" approach when working with ASP.Net and the Entity Framework.

This model was firstly introduced in EF version 4.0 and we could start with a blank model and then create a database from that model.When we made changes to the model , we could recreate the database from the new model.

You can search in my blog, because I have posted many posts regarding ASP.Net and EF.

I assume you have a working knowledge of C# and know a few things about EF.

The Code First approach is the more code-centric than the other two. Basically we write POCO classes and then we persist to a database using something called DBContext.

Code First relies on DbContext. We create 2,3 classes (e.g Person,Product) with properties and then these classes interact with the DbContext class. We can create a new database based upon our POCOS classes and have tables generated from those classes.We do not have an .edmx file in this approach.By using this approach we can write much easier unit tests.

DbContext is a new context class and is smaller,lightweight wrapper for the main context class which is ObjectContext (Schema First and Model First).

Let's begin building our sample application.

1) Launch Visual Studio. Create an ASP.Net Empty Web application. Choose an appropriate name for your application.

2) Add a web form, default.aspx page to the application.

3) Now we need to make sure the Entity Framework is included in our project. Go to Solution Explorer, right-click on the project name.Then select Manage NuGet Packages...In the Manage NuGet Packages dialog, select the Online tab and choose the EntityFramework package.Finally click Install.

Have a look at the picture below

4) Create a new folder. Name it CodeFirst .

5) Add a new item in your application, a class file. Name it Footballer.cs. This is going to be a simple POCO class.Place it in the CodeFirst folder.

The code follows

public class Footballer
    {

        public int FootballerID { get; set; }

        public string FirstName { get; set; }
  
        public string LastName { get; set; }
        public double Weight { get; set; }
        public double Height { get; set; }
     
        public DateTime JoinedTheClub { get; set; }
        public int Age { get; set; }
        public List<Training> Trainings { get; set; }
        public FootballPositions Positions { get; set; }


    }

   Now I am going to define my enum values in the same class file, Footballer.cs

    public enum FootballPositions

    {
        Defender,
        Midfielder,
        Striker

    }

6) Now we need to create the Training class. Add a new class to your application and place it in the CodeFirst folder.The code for the class follows.

    public class Training
    {
        public int TrainingID { get; set; }
        public int TrainingDuration { get; set; }
        public string TrainingLocation { get; set; }
 
    }

7) Then we need to create a context class that inherits from DbContext.Add a new class to the CodeFirst folder.Name it FootballerDBContext.Now that we have the entity classes created, we must let the model know.I will have to use the DbSet<T> property.The code for this class follows

    public class FootballerDBContext:DbContext
    {
        public DbSet<Footballer> Footballers { get; set; }
        public DbSet<Training> Trainings { get; set; }
 
    }

Do not forget to add  (using System.Data.Entity;) in the beginning of the class file

8) We must take care of the connection string. It is very easy to create one in the web.config.It does not matter that we do not have a database yet.When we run the DbContext and query against it,it will use a connection string in the web.config and will create the database based on the classes.

In my case the connection string inside the web.config, looks like this

   <connectionStrings>
 
   <add name="CodeFirstDBContext" 

connectionString="server=.\SqlExpress;integrated security=true;"

   providerName="System.Data.SqlClient"/>
        
        
    </connectionStrings>

9) Now it is time to create Linq to Entities queries to retrieve data from the database . Add a new class to your application in the CodeFirst folder.Name the file DALfootballer.cs

We will create a simple public method to retrieve the footballers. The code for the class follows

public class DALfootballer
    {
 
 
        FootballerDBContext ctx = new FootballerDBContext();
 
        public List<Footballer> GetFootballers()
        {
 
            var query = from player in ctx.Footballers

                        where player.FirstName=="Jamie" 

                        select player;
 
            return query.ToList();
 
 
        }
 
    }

10) Place a GridView control on the Default.aspx page and leave the default name.Add an ObjectDataSource control on the Default.aspx page and leave the default name. Set the DatasourceID property of the GridView control to the ID of the ObjectDataSource control.(DataSourceID="ObjectDataSource1" ). Let's configure the ObjectDataSource control. Click on the smart tag item of the ObjectDataSource control and select Configure Data Source. In the Wizzard that pops up select the DALFootballer class and then in the next step choose the GetFootballers() method.Click Finish to complete the steps of the wizzard.

Build your application. 

11)  Let's create an Insert method in order to insert data into the tables.

I will create an Insert() method and for simplicity reasons I will place it in the Default.aspx.cs file.

private void Insert()
        {
            var footballers = new List<Footballer>
            {
                new Footballer {
               
                FirstName = "Steven",LastName="Gerrard", Height=1.85, Weight=85,Age=32, JoinedTheClub=DateTime.Parse("12/12/1999"),Positions=FootballPositions.Midfielder,
                Trainings = new List<Training>            
                {
               
                    new Training {TrainingDuration = 3, TrainingLocation="MelWood"},
                    new Training {TrainingDuration = 2, TrainingLocation="Anfield"},
                    new Training {TrainingDuration = 2, TrainingLocation="MelWood"},

                }

                            },
           
                new Footballer {
                
                FirstName = "Jamie",LastName="Garragher", Height=1.89, Weight=89,Age=34, JoinedTheClub=DateTime.Parse("12/02/2000"),Positions=FootballPositions.Defender,
                Trainings = new List<Training>            
               
                {
               
                new Training {TrainingDuration = 3, TrainingLocation="MelWood"},
                new Training {TrainingDuration = 5, TrainingLocation="Anfield"},
                new Training {TrainingDuration = 6, TrainingLocation="Anfield"},

                }
          

                }
       
            };
            footballers.ForEach(foot => ctx.Footballers.Add(foot));
            ctx.SaveChanges();
        }

 12) In the Page_Load() event handling routine I called the Insert() method.

        protected void Page_Load(object sender, EventArgs e)
        {
       
           Insert();
       

        }

 13) Run your application and you will see that the following result,hopefully.

You can see clearly that the data is returned along with the enum value.

 14) You must have also a look at the database.Launch SSMS and see the database and its objects (data) created from EF Code First.

Have a look at the picture below.

Hopefully now you have seen the support that exists in EF 5.0 for enums.

Hope it helps !!!

Building an ASP.Net 4.5 Web forms application - part 2

Τhis is the second post in a series of posts on how to design and implement an ASP.Net 4.5 Web Forms store that sells posters on line.

Make sure you read the first post in the series.You can find it here.

In all these posts I am going to publish, I will change the layout. That means I will make changes to the .master,.css,.aspx files and images. In the final post I will add the whole solution so you can download everything.

Have a look at the picture below to see the new slightly changed layout

Now that we have made the necessary changes to the .aspx pages,the master page,the .css files and adding some more images to our site we are ready to move forward and implement the data access layer.

I will use Entity Framework 5.0 in order to create the data access layer.

Obviously I cannot go into much detail on what EF is and what it does. I will give a short introduction though.The .Net framework provides support for Object Relational Mapping through EF. So EF is a an ORM tool and it is now the main data access technology that microsoft works on. I use it quite extensively in my projects. Through EF we have many things out of the box provided for us. We have the automatic generation of SQL code.It maps relational data to strongly types objects.All the changes made to the objects in the memory are persisted in a transactional way back to the data store.

You can find in this post an example on how to use the Entity Framework to retrieve data from an SQL Server Database using the "Database/Schema First" approach.

In this approach we make all the changes at the database level and then we update the model with those changes.

In this post you can see an example on how to use the "Model First" approach when working with ASP.Net and the Entity Framework.

For this project I will use the Code First approach to build the data access layer.

The Code First approach is the more code-centric than the other two (Database First, Model First). Basically we write POCO classes and then we persist to a database using something called DBContext.

Code First relies on DbContext. We create 2,3 classes (e.g Person,Product) with properties and then these classes interact with the DbContext class and we can create a new database based upon our POCOS classes and have tables generated from those classes.We do not have an .edmx file in this approach.By using this approach we can write much easier unit tests.

DbContext is a new context class and is smaller,lightweight wrapper for the main context class which is ObjectContext (Schema First and Model First).

Let's implement our POCO classes

1) Launch Visual Studio and open your solution where your project lives

2) Create a new folder. Name it DAL or any other name you think it is appropriate.We will place in there our entity classes

3) Obviously you must include EF in your solution. The good news is that EF is included in any ASP.Net Web Forms Application. If you are not sure whether you have the latest version or not of the EF then just use NuGet.

In my case the EF version is 5.0. Have a look at the picture below

4) We also need to add a reference to the System.Data.Entity namespace.Select References from the Solution Explorer and then choose Add Reference... You have to browse through the assemblies in the .Net Framework until you locate the System.Data.Entity and the click OK.

Have a look at the picture below

5)  Select the DAL folder, then right-click and then select Add -> New Item.We will add a class file, Poster.cs. Have a look at the picture below

6) Now we need to write the code for the Poster.cs Entity class.Please bear in mind that every instance of the Poster class (an object) will represent a row in the database table and every property in the class declaration will represent a table column. The code follows

7) Select the DAL folder, then right-click and then select Add -> New Item.We will add a class file, PosterCategory.cs. The code follows

public class PosterCategory
    {
        [ScaffoldColumn(false)]
        public int PosterCategoryID { get; set; }

        [Required, StringLength(50), Display(Name = "Category Name")]
        public string PosterCategoryName { get; set; }

        [Required,StringLength(200),Display(Name = "Category Description")]
        public string CategoryDescription { get; set; }

        public List<Poster> Posters { get; set; }
    }

8) Select the DAL folder, then right-click and then select Add -> New Item.We will add another entity class called PosterContext.cs. This class will inherit from DbContext. Now that we have the entity classes created, we must let the model know.I will have to use the DbSet<T> property.

This class manages the domain classes and provides data access to the database.Think of it as an orchestrator class.

The code for this class follows

    public class PosterContext:DbContext
    {


        public DbSet<PosterCategory> PosterCategories { get; set; }
        public DbSet<Poster> Posters { get; set; }
    }

Do not forget to add  (using System.Data.Entity;) in the beginning of the class file.

I would like to talk at this point a little bit about Code First Data Annotations.With Data Annotations we can configure our domain-entity classes so that they can take best advantage of the EF.We will decorate our entity classes with declarative attributes.Let me give you an insight on how EF Code First works.EF Code First at run time, looks at the entity-domain classes and infers from them the in-memory data that it needs to interpret the queries and interact with the database.For example it assumes that any property named ID represents the key property of the class.Please have a look at this post of mine to find out more about Data Annotations.

     public class PosterInsert : DropCreateDatabaseIfModelChanges<PosterContext>
    {
        protected override void Seed(PosterContext context)
        {
            var pcategory = new List<PosterCategory>
            {
            new PosterCategory {
                
                PosterCategoryName = "Midfielders",CategoryDescription="Posters of active and past Liverpool Midfielders",
                Posters = new List<Poster>             
                {
                
                new Poster {PosterName = "King Kenny", PosterDescription="King Kenny lifting the European Cup",PosterImgpath="Images/posters/kenny-dalglish.jpg",PosterPrice=18.95},
                new Poster {PosterName = "John Barnes", PosterDescription="El mago-a true genius in the midfield",PosterImgpath="Images/posters/john-barnes.jpg",PosterPrice=16.95},
                new Poster {PosterName = "Steven Gerrard", PosterDescription="The Captain",PosterImgpath="Images/posters/steven-gerrard.jpg",PosterPrice=28.95},
 
                }
 
                            },
            
            new PosterCategory {
                
                PosterCategoryName = "Defenders",CategoryDescription="Posters of active and past Liverpool Defenders",
                Posters = new List<Poster>             
                {
                
                new Poster {PosterName = "Jamie Carragher", PosterDescription="Th greatest defender in the last ten years",PosterImgpath="Images/posters/jamie-carragher.jpg",PosterPrice=21.95},
                new Poster {PosterName = "Alan Hansen", PosterDescription="The legendary defender Alan Hansen",PosterImgpath="Images/posters/alan-hansen.jpg",PosterPrice=13.95},
                new Poster {PosterName = "Martin Skrtel", PosterDescription="The most promising defender playing right now",PosterImgpath="Images/posters/martin-skrtel.jpg",PosterPrice=19.95},
 
                }

            },


                            new PosterCategory {
                
                PosterCategoryName = "Strikers",CategoryDescription="Posters of active and past Liverpool Strikers",
                Posters = new List<Poster>             
                {
                
                new Poster {PosterName = "Ian Rush", PosterDescription="The greatest striker to wear a Liverpool shirt",PosterImgpath="Images/posters/ian-rush.jpg",PosterPrice=18.45},
                new Poster {PosterName = "Robbie Fowler", PosterDescription="Robbie, a goal scoring machine",PosterImgpath="Images/posters/robbie-fowler.jpg",PosterPrice=18.45},
                new Poster {PosterName = "Michael Owen", PosterDescription="The youngest deadliest striker Anfield has even known",PosterImgpath="Images/posters/michael-owen.jpg",PosterPrice=16.95},
 
                }
 
                            
       
        }
            };

            pcategory.ForEach(post => context.PosterCategories.Add(post));
                        base.Seed(context);
    }
}

In this class I inherit from the  DropCreateDatabaseIfModelChanges<PosterContext> class and I will override the default behaviour of that class with my class.

I will ovverride the Seed method with some data.Then I create 3 instances of the PosterCategory entity and 9 entities of the Poster entity.

Then through a simple lambda expression I add the data to the database using this last line of code,

base.Seed(context);

10)  Now we need to make one more change.in the Global.asax.cs.

In the Application_Start event handler routine (runs when the application starts) we will add this code

 Database.SetInitializer(new PosterInsert());

11) I have also created a Posters folder inside the Images folder and placed in it the 9 images.

12) Build and run your application. Everything should compile now. Have a look at the picture below to see the structure of the web application so far.

13) Now we will create a test page to see if the database is created and populated with values.Add a web form page to the application.Name it PostersTest.Add a gridview web server control on the page. Make the page as the Start Page

In the Page_Load event handling routine type

PosterContext ctx = new PosterContext();
 
    
var query = from postcat in ctx.PosterCategories select postcat.PosterCategoryName;

            GridView1.DataSource = query.ToList();
            GridView1.DataBind();

Build and run your application. Have a look below to see the result I have got.

It seems to work. The database is created and populated through the magic of EF Code First. Have a look at the web.config for the connection string. In the Solution Explorer look into the App_Data folder.

If you open the Server Explorer and open the connection to the database (in my case PostersOnLine.DAL.PosterContext.mdf).I am using LocalDB, which is anew version of SQL Express.For more information have a look here.

Have a look at the picture below.These are the results when I query the tables.

Please make sure you follow all the steps.I will post soon part 3.

Hope it helps!!!!

Sorting the columns of an HTML table using JQuery

In this post I will show you how easy is to sort the columns of an HTML table. I will use an external library,called Tablesorter which makes life so much easier for developers.

Τhere are other posts in my blog regarding JQuery.You can find them all here. You can find another post regarding HTML tables and JQuery here.

We will demonstrate this with a step by step example. I will use Visual Studio 2012 Ultimate. You can also use Visual Studio 2012 Express Edition. You can also use VS 2010 editions.

1) Launch Visual Studio. Create an ASP.Net Empty Web application. Choose an appropriate name for your application.

2) Add a web form, default.aspx page to the application.

3) Add a table from the HTML controls tab control (from the Toolbox) on the default.aspx page

4) Now we need to download the JQuery library. Please visit the http://jquery.com/ and download the minified version.

Then we need to download the Tablesorter JQuery plugin. Please donwload it, here.

5) We need to reference the JQuery library and the external JQuery Plugin. In the head section Ι add the following lines.

  <script src="jquery.tablesorter.js" type="text/javascript"></script>

6) We need to type the HTML markup, the HTML table and its columns

<body>
    <form id="form1" runat="server">
    <div>
        <h1>Liverpool Legends</h1>
        <table style="width: 50%;" border="1" cellpadding="10" cellspacing ="10" class="liverpool">
            <thead>
                <tr><th>Defenders</th><th>MidFielders</th><th>Strikers</th></tr>

            </thead>
            <tbody>
            <tr>
                <td>Alan Hansen</td>
                <td>Graeme Souness</td>
                <td>Ian Rush</td>
            </tr>
            <tr>
                <td>Alan Kennedy</td>
                <td>Steven Gerrard</td>
                <td>Michael Owen</td>
            </tr>
            <tr>
                <td>Jamie Garragher</td>
                <td>Kenny Dalglish</td>
                <td>Robbie Fowler</td>
            </tr>
            <tr>
                <td>Rob Jones</td>
                <td>Xabi Alonso</td>
                <td>Dirk Kuyt</td>
            </tr>
                </tbody>
        </table>
       
    </div>
    </form>
</body>

7) Inside the head section we also write the simple JQuery code.

     <script type="text/javascript">

        $(document).ready(function() {
            $('.liverpool').tablesorter();

        });


    </script>

Highlighting rows and columns in an HTML table using JQuery

A friend of mine was seeking some help regarding HTML tables and JQuery. I have decided to write a few posts demonstrating the various techniques I used with JQuery to achieve the desired functionality.

Τhere are other posts in my blog regarding JQuery.You can find them all here.

We will demonstrate this with a step by step example. I will use Visual Studio 2012 Ultimate. You can also use Visual Studio 2012 Express Edition. You can also use VS 2010 editions.

5) Obviously at some point we need to reference the JQuery library and the external stylesheet. In the head section Ι add the following lines.

   <link href="Style.css" rel="stylesheet" type="text/css" />
 
    <script src="jquery-1_8_2_min.js" type="text/javascript"></script>

8) Inside the head section we also write the simple JQuery code.

     <script type="text/javascript">

        $(document).ready(function() {
            $('tr').hover(

               function() {
                   $(this).find('td').addClass('hover');
               },
                function() {
                    $(this).find('td').removeClass('hover');
                }
                );

        });


    </script>

Using Native Drag and Drop in HTML 5 pages

This is going to be the eighth post in a series of posts regarding HTML 5. You can find the other posts here, here , here , here, here , here and here.

In this post I will show you how to implement Drag and Drop functionality in an HTML 5 page using JQuery.This is a great functionality and we do not need to resort anymore to plugins like Silverlight and Flash to achieve this great feature. This is also called a native approach on Drag and Drop.

I will use some events and I will write code to respond when these events are fired.

As I said earlier we need to write Javascript to implement the drag and drop functionality. I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download

I will create a simple HTML page.There will be two thumbnails pics on it. There will also be the drag and drop area where the user will drag the thumb pics into it and they will resize to their actual size.

The HTML markup for the page follows

<!doctype html>
<html lang="en">
<head>
<title>Liverpool Legends Gallery</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" charset="utf-8" src="jquery-1.8.1.min.js"></script> 
<script language="JavaScript" src="drag.js"></script>  
</head>

<body>
<header>
<h1>A page dedicated to Liverpool Legends</h1>
<h2>Drag and Drop the thumb image in the designated area to see the full image</h2>
</header>


<div id="main">

<img src="thumbs/steven-gerrard.jpg"
 big="large-images/steven-gerrard-large.jpg" alt="John Barnes">


<img src="thumbs/robbie-fowler.jpg"
big="large-images/robbie-fowler-large.jpg" alt="Ian Rush">


<div id="drag">
<p>Drop your image here</p>
 </div>


</body>

</html>

There is nothing difficult or fancy in the HTML markup above. I have a link to the external JQuery library and another javascript file that I will implement the whole drag and drop functionality.

The code for the css file (style.css) follows

#main{
  float: left;
  width: 340px;
  margin-right: 30px;
}

#drag{
  float: left;
  width: 400px;
  height:300px;
  background-color: #c0c0c0;

}

These are simple CSS rules. This post cannot be a tutorial on CSS.For all these posts I assume that you have the basic HTML,CSS,Javascript skills.

Now I am going to create a javascript file (drag.js) to implement the drag and drop functionality.

I will provide the whole code for the drag.js file and then I will explain what I am doing in each step.

$(function() {
          var players = $('#main img');
          players.attr('draggable', 'true');
         
          players.bind('dragstart', function(event) {
              var data = event.originalEvent.dataTransfer;
              var src = $(this).attr("big");
              data.setData("Text", src);
              return true;
          });

          var target = $('#drag');

          target.bind('drop', function(event) {
            var data = event.originalEvent.dataTransfer;
            var src = ( data.getData('Text') );
           
            var img = $("<img></img>").attr("src", src);
            $(this).html(img);
            if (event.preventDefault) event.preventDefault();
            return(false);
          });

         
          target.bind('dragover', function(event) {   
            if (event.preventDefault) event.preventDefault();
            return false;
          });


           players.bind('dragend', function(event) {
             if (event.preventDefault) event.preventDefault();
             return false;
           });

        });

 In these lines

 var players = $('#main img');
 players.attr('draggable', 'true');

We grab all the images in the #main div and store them in a variable and then make them draggable.

Then in following lines I am using the dragstart event.

  players.bind('dragstart', function(event) {
              var data = event.originalEvent.dataTransfer;
              var src = $(this).attr("big");
              data.setData("Text", src);
              return true;
          });

In this event I am associating the custom data attribute value with the item I am dragging.

Then I create a variable to get hold of the dropping area

 var target = $('#drag');

Then in the following lines I implement the drop event and what happens when the user drops the image in the designated area on the page.

 target.bind('drop', function(event) {
            var data = event.originalEvent.dataTransfer;
            var src = ( data.getData('Text') );
            
            var img = $("<img></img>").attr("src", src);
            $(this).html(img);
            if (event.preventDefault) event.preventDefault();
            return(false);
          });

 The dragend  event is fired when the user has finished the drag operation

        players.bind('dragend', function(event) {
             if (event.preventDefault) event.preventDefault();
             return false;
           });

 When this method event.preventDefault() is called , the default action of the event will not be triggered.

Please have a look a the picture below to see how the page looks before the drag and drop takes place.

Then simply I drag and drop a picture in the dropping area.Have a look at the picture below

It works!!!

Hope it helps!!

Using CSS3 media queries in HTML 5 pages

This is going to be the seventh post in a series of posts regarding HTML 5. You can find the other posts here , here , here, here , here and here.

In this post I will provide a hands-on example on how to use CSS 3 Media Queries in HTML 5 pages. This is a very important feature since nowadays lots of users view websites through their mobile devices.

Web designers were able to define media-specific style sheets for quite a while, but have been limited to the type of output. The output could only be Screen, Print .The way we used to do things before CSS 3 was to have separate CSS files and the browser decided which style sheet to use.

Please have a look at the snippet below - HTML 4 media queries

<link rel="stylesheet" type="text/css" media="screen" href="styles.css">

<link rel="stylesheet" type="text/css" media="print" href="print-styles.css">

Τhe browser determines which style to use.

With CSS 3 we can have all media queries in one stylesheet. Media queries can determine the resolution of the device, the orientation of the device, the width and height of the device and the width and height of the browser window.We can also include CSS 3 media queries in separate stylesheets.

In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for CSS 3 Media Queries from the latest versions of modern browsers.

Please have a look at the picture below. We see that all the latest versions of modern browsers support this feature.

We can see that even IE 9 supports this feature.

Let's move on with the actual demo. 

This is going to be a rather simple demo.I create a simple HTML 5 page. The markup follows and it is very easy to use and understand.This is a page with a 2 column layout.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
    
  </head>
  <body>
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <p>HTML 5, JQuery, CSS3</p>
    </div>
    <div id="main">
      <div id="mainnews">
        <div>
          <h2>HTML 5</h2>
        </div>
        <div>
          <p>
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
          <div class="quote">
            <h4>Do More with Less</h4>
            <p>
             jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

            </p> 
          </div>
          <p>
            The HTML5 test(html5test.com) score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn't finalized yet, all major browser manufacturers are making sure their browser is ready for the future. Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers.         
            The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.</p>
        </div>
      </div>   
   
      <div id="CSS">
        <div>
          <h2>CSS 3 Intro</h2>
        </div>
        <div>
          <p>
          Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
          </p>
        </div>
      </div>
     
      <div id="CSSmore">
        <div>
          <h2>CSS 3 Purpose</h2>
        </div>
        <div>
          <p>
            CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
          </p>
        </div>
      </div>
     
     
    </div>
    <div id="footer">
   
    <p>Feel free to google more about the subject</p>
 
    </div>
  
  </body>
 
</html> 

The CSS code (style.css) follows

 body{
        line-height: 30px;
        width: 1024px;
        background-color:#eee;
      }
      
      p{
    
    font-size:17px;
    font-family:"Comic Sans MS"
      }
      p,h2,h3,h4{
        margin: 0 0 20px 0;
      }
      
      #main, #header, #footer{
        width: 100%;
        margin: 0px auto;
        display:block;
      }
      
      #header{
        text-align: center; 
        border-bottom: 1px solid #000; 
        margin-bottom: 30px;
      }
      
      #footer{
        text-align: center; 
        border-top: 1px solid #000; 
        margin-bottom: 30px;
      }
      
      .quote{ 
       width: 200px;
       margin-left: 10px;
       padding: 5px;
       float: right;
       border: 2px solid #000;
       background-color:#F9ACAE;
      }
      
      .quote :last-child{
        margin-bottom: 0;
      }
      
      #main{
        column-count:2;
        column-gap:20px;
        column-rule: 1px solid #000;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
        -moz-column-rule: 1px solid #000;
        -webkit-column-rule: 1px solid #000;
      }

Now I view the page in the browser.Now I am going to write a media query and add some more rules in the .css file in order to change the layout of the page when the page is viewed by mobile devices.

@media only screen and (max-width: 480px) {
          body{
            width: 480px;
          }
          #main{
            -moz-column-count: 1;
            -webkit-column-count: 1;
          }
        }

I am specifying that this media query applies only to screen and a max width of 480 px. If this condition is true, then I add new rules for the body element.

I change the number of columns to one. This rule will not be applied unless the maximum width is 480px or less. 

As I decrease the size-width of the browser window I see no change in the column's layout.

Have a look at the picture below.

When I resize the window and the width of the browser so the width is less than 480px, the media query and its respective rules take effect.

We can scroll vertically to view the content which is a more optimised viewing experience for mobile devices.

Have a look at the picture below

Hope it helps!!!!

Using rounded corners in modern websites with CSS3

This is going to be the sixth post in a series of posts regarding HTML 5. You can find the other posts here , here, here , here and here.

In this post I will provide a hands-on example on how to use rounded corners (rounded corners in CSS3) in your website. I think this is the feature that is most required in the new modern websites.

Most websites look great with their lovely round panels and rounded corner tab style menus.

We could achieve that effect earlier but we should resort to complex CSS rules and images. I will show you how to accomplish this great feature with the power of CSS 3.We will not use Javascript.

Javascript is required for IE 7, IE 8 and the notorious IE 6. The best solution for implementing corners using CSS and Javascript without using images is Nifty corners cube.

There are detailed information how to achieve this in the link I provided. This solution is tested in earlier vesrions of IE (IE 6,IE 7,IE 8) and Opera,Firefox,Safari.

In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for web fonts from the latest versions of modern browsers.

Please have a look at the picture below. We see that all the latest versions of modern browsers support this feature.

We can see that even IE 9 supports this feature.

Let's move on with the actual demo.

This is going to be a rather simple demo.I create a simple HTML 5 page. The markup follows and it is very easy to use and understand

 <!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
     
  </head>
  <body>
 
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
    </div>
    
    <div id="main">
    
      <h2>HTML 5</h2>
        
      
          <p id="panel1">
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
      </div>    
    
   
  </body>
 
</html>

Then I need to write the various CSS rules that style this markup. I will name it style.css

 body{
        line-height: 38px;
        width: 1024px;
        background-color:#eee;
        text-align:center;
      }

#panel1 { margin:auto; text-align:left; background-color:#77cdef;
width:400px; height:250px; padding:15px;
font-size:16px;
font-family:tahoma;
color:#fff;
border-radius: 20px;

}

Have a look below to see what my page looks like in IE 10.

This is possible through the border-radious property. The colored panel has all four corners rounded with the same radius.

We can add a border to the rounded corner panel by adding this property declaration in the #panel1,  border:4px #000 solid;

We can have even better visual effects if we specify a radius for each corner.

This is the updated version of the style.css.

 body{
        line-height: 38px;
        width: 1024px;
        background-color:#eee;
        text-align:center;
      }

#panel1 { margin:auto; text-align:left; background-color:#77cdef;border:4px #000 solid;
width:400px; height:250px; padding:15px;
font-size:16px;
font-family:tahoma;
color:#fff;


border-top-left-radius: 20px;
border-top-right-radius: 70px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 70px;

}

This is how my page looks in Firefox 15.0.1

 In this final example I will show you how to style with CSS 3 (rounded corners) a horizontal navigation menu.

 This is the new version of the HTML markup

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
    
  </head>
  <body>
 
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
    </div>
   
    <div id="nav">
<ul>
<li><a class="mymenu" id="activelink" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">Main</a></li>
<li><a class="mymenu" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">HTML 5</a></li>
<li><a class="mymenu" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">CSS 3</a></li>
<li><a class="mymenu" href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8934038#">JQuery</a></li>

</ul>
</div>
   
    <div id="main">
   
      <h2>HTML 5</h2>
       
     
          <p id="panel1">
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
      </div>   
   
  
  </body>
 
</html>

This is the updated version of style.css

 body{
        line-height: 38px;
        width: 1024px;
        background-color:#eee;
        text-align:center;
      }

#panel1 { margin:auto; text-align:left; background-color:#77cdef;border:4px #000 solid;
width:400px; height:250px; padding:15px;
font-size:16px;
font-family:tahoma;
color:#fff;

border-top-left-radius: 20px;
border-top-right-radius: 70px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 70px;

}


#nav ul {
width:900px;
position:relative;
top:24px;
}

ul li {
text-decoration:none;
display:inline;
}

ul li a.mymenu {
font-family:Tahoma;
color:black;
font-size:14px;
font-weight:bold;
background-color:#77cdef;
color:#fff;
border-top-left-radius:18px; border-top-right-radius:18px; border:1px solid black;
padding:15px; padding-bottom:10px;margin :2px; text-decoration:none; border-bottom:none;
}

.mymenu:hover { background-color:#e3781a; color:black;
}
 

The CSS rules are the classic rules that are extensively used for styling menus.The border-radius property is still responsible for the rounded corners in the menu.

This is how my page looks in Chrome version 21.

Hope it helps!!!

Using real fonts in HTML 5 & CSS 3 pages

This is going to be the fifth post in a series of posts regarding HTML 5. You can find the other posts here, here , here and here.

In this post I will provide a hands-on example on how to use real fonts in HTML 5 pages with the use of CSS 3.

Font issues have been appearing in all websites and caused all sorts of problems for web designers.The real problem with fonts for web developers until now was that they were forced to use only a handful of fonts.CSS 3 allows web designers not to use only web-safe fonts.These fonts are in wide use in most user's operating systems.

Some designers (when they wanted to make their site stand out) resorted in various techniques like using images instead of fonts. That solution is not very accessible-friendly and definitely less SEO friendly.

CSS (through CSS3's Fonts module) 3 allows web developers to embed fonts directly on a web page.First we need to define the font and then attach the font to elements.

Obviously we have various formats for fonts. Some are supported by all modern browsers and some are not.The most common formats are, Embedded OpenType (EOT),TrueType(TTF),OpenType(OTF).

I will use the @font-face declaration to define the font used in this page. 

Before you download fonts (in any format) make sure you have understood all the licensing issues. Please note that all these real fonts will be downloaded in the client's computer.

A great resource on the web (maybe the best) is http://www.typekit.com/.They have an abundance of web fonts for use. Please note that they sell those fonts.

Another free (best things in life a free, aren't they?) resource is the http://www.google.com/webfonts website. I have visited the website and downloaded the Aladin webfont.

When you download any font you like make sure you read the license first. Aladin webfont is released under the Open Font License (OFL) license.

Before I go on with the actual demo I will use the (http://www.caniuse.com) to see the support for web fonts from the latest versions of modern browsers.

Please have a look at the picture below. We see that all the latest versions of modern browsers support this feature.

In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

I create a simple HTML 5 page. The markup follows and it is very easy to use and understand

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
    
  </head>
  <body>
 
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <p>HTML 5, JQuery, CSS3</p>
    </div>
   
    <div id="main">
   
      <h2>HTML 5</h2>
       
     
          <p>
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
      </div>   
   
  
  </body>
 
</html>

Then I create the style.css file.

<style type="text/css">

@font-face
{
font-family:Aladin;
src: url('Aladin-Regular.ttf')
}

h1
{
font-family:Aladin,Georgia,serif;


}
</style>

As you can see we want to style the h1 tag in our HTML 5 markup.I just use the @font-face property,specifying the font-family and the source of the web font.

Then I just use the name in the font-family property to style the h1 tag.

Have a look below to see my page in IE10.

Make sure you open this page in all your browsers installed in your machine. Make sure you have downloaded the latest versions.

Now we can make our site stand out with web fonts and give it a really unique look and feel.

Hope it helps!!!

Using multiple column layout with HTML 5 and CSS 3

This is going to be the fourth post in a series of posts regarding HTML 5. You can find the other posts here , here and here.

In this post I will provide a hands-on example with HTML 5 and CSS 3 on how to create a page with multiple columns and proper layout.

I will show you how to use CSS 3 to create columns much easier than relying on DIV elements and the float CSS rule.

I will also show you how to use browser-specific prefix rules (-ms for Internet Explorer and -moz for Firefox ) for browsers that do not fully support CSS 3.

In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

I will create a simple page with information about HTML 5, CSS 3 and JQuery.

This is the full HTML 5 code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
    
  </head>
  <body>
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <p>HTML 5, JQuery, CSS3</p>
    </div>
    <div id="main">
      <div id="mainnews">
        <div>
          <h2>HTML 5</h2>
        </div>
        <div>
          <p>
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
          <div class="quote">
            <h4>Do More with Less</h4>
            <p>
             jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

            </p> 
          </div>
          <p>
            The HTML5 test(html5test.com) score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. Even though the specification isn't finalized yet, all major browser manufacturers are making sure their browser is ready for the future. Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers.         
            The HTML5 test does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform.</p>
        </div>
      </div>   
   
      <div id="CSS">
        <div>
          <h2>CSS 3 Intro</h2>
        </div>
        <div>
          <p>
          Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
          </p>
        </div>
      </div>
     
      <div id="CSSmore">
        <div>
          <h2>CSS 3 Purpose</h2>
        </div>
        <div>
          <p>
            CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
          </p>
        </div>
      </div>
     
     
    </div>
    <div id="footer">
   
    <p>Feel free to google more about the subject</p>
 
    </div>
  
  </body>
 
</html>

The markup is very easy to follow. I have used some HTML 5 tags and the relevant HTML 5 doctype.

The CSS code (style.css) follows

 body{
        line-height: 30px;
        width: 1024px;
        background-color:#eee;
      }
     
      p{
   
    font-size:17px;
    font-family:"Comic Sans MS"
      }
      p,h2,h3,h4{
        margin: 0 0 20px 0;
      }
     
      #main, #header, #footer{
        width: 100%;
        margin: 0px auto;
        display:block;
      }
     
      #header{
        text-align: center;
        border-bottom: 1px solid #000;
        margin-bottom: 30px;
      }
     
      #footer{
        text-align: center;
        border-top: 1px solid #000;
        margin-bottom: 30px;
      }
     
      .quote{
       width: 200px;
       margin-left: 10px;
       padding: 5px;
       float: right;
       border: 2px solid #000;
       background-color:#F9ACAE;
      }
     
      .quote :last-child{
        margin-bottom: 0;
      }
     
      #main{
        column-count:2;
        column-gap:20px;
        column-rule: 1px solid #000;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
        -moz-column-rule: 1px solid #000;
        -webkit-column-rule: 1px solid #000;
      }
     
 

All the rules in the css code are pretty simple. The layout is achieved with that CSS rule

#main{
        column-count:2;
        column-gap:20px;
        column-rule: 1px solid #000;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-gap: 20px;
        -moz-column-rule: 1px solid #000;
        -webkit-column-rule: 1px solid #000;

Do note the column-count,column-gap and column-rule properties. These properties make the two column layout possible.

Please have a look at the picture below to see why I used prefixes for Chrome (webkit) and Firefox(moz).It clearly indicates that the CSS 3 column layout are not supported from Firefox and Chrome.

 Finally I test my simple HTML 5 page using the latest versions of Firefox,Internet Explorer and Chrome.

 In my machine I have installed Firefox 15.0.1.Have a look at the picture below to see how the page looks

I have installed Google Chrome 21.0 in my machine.Have a look at the picture below to see how the page looks

 Have a look at the picture below to see how my page looks in IE 10.

My page looks the same in all browsers.

Hope it helps!!!

Creating a multi-column rollover image gallery with HTML 5

I know it has been a while since I blogged about HTML 5. I have two posts in this blog about HTML 5. You can find them here and here.

I am creating a small content website (only text,images and a contact form) for a friend of mine.He wanted to create a rollover gallery.The whole concept is that we have some small thumbnails on a page, the user hovers over them and they appear enlarged on a designated container/placeholder on a page.

I am trying not to use Javascript scripts when I am using effects on a web page and this is what I will be doing in this post. 

Well some people will say that HTML 5 is not supported in all browsers. That is true but most of the modern browsers support most of its recommendations. For people who still use IE6 some hacks must be devised.

Well to be totally honest I cannot understand why anyone at this day and time is using IE 6.0.That really is beyond me.Well, the point of having a web browser is to be able to ENJOY the great experience that the WEΒ offers today. 

Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr.

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

In order to be absolutely clear this is not (and could not be ) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to the excellent interactive tutorials of W3School.

Another excellent resource is HTML 5 Doctor.

For the people who are not convinced yet that they should invest time and resources on becoming experts on HTML 5 I should point out that HTML 5 websites will be ranked higher than others. Search engines will be able to locate better the content of our site and its relevance/importance since it is using semantic tags.

Let's move now to the actual hands-on example.

In this case (since I am mad Liverpool supporter) I will create a rollover image gallery of Liverpool F.C legends. I create a folder in my desktop. I name it Liverpool Gallery.Then I create two subfolders in it, large-images (I place the large images in there) and thumbs (I place the small images in there).Then I create an empty .html file called LiverpoolLegends.html and an empty .css file called style.css.

Please have a look at the HTML Markup that I typed in my fancy editor package below

<!doctype html>
<html lang="en">
<head>
<title>Liverpool Legends Gallery</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<header>
<h1>A page dedicated to Liverpool Legends</h1>
<h2>Do hover over the images with the mouse to see the full picture</h2>
</header>
<ul id="column1">

<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

<img src="thumbs/john-barnes.jpg" alt="">
<img class="large" src="large-images/john-barnes-large.jpg" alt="">
</a>
</li>

<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

<img src="thumbs/ian-rush.jpg" alt="">
<img class="large" src="large-images/ian-rush-large.jpg" alt="">
</a>
</li>

<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

<img src="thumbs/graeme-souness.jpg" alt="">
<img class="large" src="large-images/graeme-souness-large.jpg" alt="">
</a>
</li>





</ul>

<ul id="column2">

<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

<img src="thumbs/steven-gerrard.jpg" alt="">
<img class="large" src="large-images/steven-gerrard-large.jpg" alt="">
</a>
</li>


<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

<img src="thumbs/kenny-dalglish.jpg" alt="">
<img class="large" src="large-images/kenny-dalglish-large.jpg" alt="">
</a>
</li>


<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

<img src="thumbs/robbie-fowler.jpg" alt="">
<img class="large" src="large-images/robbie-fowler-large.jpg" alt="">
</a>
</li>


</ul>

<ul id="column3">

<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

<img src="thumbs/alan-hansen.jpg" alt="">
<img class="large" src="large-images/alan-hansen-large.jpg" alt="">
</a>
</li>

<li><a href="http://weblogs.asp.net/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=1153&postid=8927200#">

<img src="thumbs/michael-owen.jpg" alt="">
<img class="large" src="large-images/michael-owen-large.jpg" alt="">
</a>
</li>


</ul>



</body>

</html>
 

It is very easy to follow the markup. Please have a look at the new doctype and the new semantic tag <header>.

I have 3 columns and I place my images in there.There is a class called "large".I will use this class in my CSS code to hide the large image when the mouse is not on (hover) an image

Make sure you validate your HTML 5 page in the validator found here

Have a look at the CSS code below that makes it all happen.

img { border:none;
}

#column1 { position: absolute; top: 30; left: 100;
}

li { margin: 15px; list-style-type:none;
}

#column1 a img.large {  position: absolute; top: 0; left:
700px; visibility: hidden;
}

#column1 a:hover { background: white;
}
#column1 a:hover img.large { visibility:visible;
}


#column2 { position: absolute; top: 30; left: 195px;
}
li { margin: 5px; list-style-type:none;
}



#column2 a img.large { position: absolute; top: 0; left:
510px; margin-left:0; visibility: hidden;
}

#column2 a:hover { background: white;
}
#column2 a:hover img.large { visibility:visible;
}

#column3 { position: absolute; top: 30; left: 400px; width:108px;
}
li { margin: 5px; list-style-type:none;
}

#column3 a img.large { width: 260px; height:260px; position: absolute; top: 0; left:
315px; margin-left:0; visibility: hidden;
}

#column3 a:hover { background: white;
}
#column3 a:hover img.large { visibility:visible;
}

Ιn the first line of the CSS code I set the images to have no border.

Then I place the first column in the page and then remove the bullets from the list elements.

Then I use the large CSS class to create a position for the large image and hide it.

Finally when the hover event takes place I make the image visible.

I repeat the process for the next two columns.

I have tested the page with IE 10 and the latest versions of Opera,Chrome and Firefox.

Feel free to style your HTML 5 gallery any way you want through the magic of CSS.I did not bother adding background colors and borders because that was beyond the scope of this post.

Hope it helps!!!!

Page Inspector and Visual Studio 2012

In this post I will be looking into a new feature that has been added to theVS 2012 IDE. I am talking about Page Inspector that gives developers a very good/handy way to identify layout issues and to find out which part of server side code is responsible for that HTML snippet of code.

If you are interested in reading other posts about VS 2012 and .Net 4.5 please have a look here and here.

This tool is integrated into the VS 2012 IDE.We can launch it in different ways.

1) We will create a new ASP.Net MVC application (an Internet application). I will not add any code.

2) In the Solution Explorer I choose my project and right-click. From the available options select View in Page Inspector

Have a look at the picture below.

 3) We can launch Page Inspector from the Standard Toolbar. Please have a look at the picture below.

4) Let's view our application with Page Inspector. First I inspect the About link-menu.I can see very quickly the HTML that is rendering for that link to appear. I also see the server side code (the actual view, _Layout.cshtml) that is responsible for that link. This is something developers always craved for. We can also see the CSS styles that are used to style this link (About).

Have a look at the picture below

Obviously there are similar tools that I have been using in the past when I wanted to change a part of the HTML or see what piece of CSS code affects my layout. I used Firebug when viewing my web applications in the Firefox browser. Internet Explorer and Chrome have also great similar tools that help web developers to identify issues with a site's appearance/issues.

Please bear in mind that Page Inspector works with all forms of the ASP.Net stack e.g Web Forms,Web Pages.

Hope it helps!!!!!

Using multiple diagrams per model in Entity Framework 5.0

I have downloaded .Net framework 4.5 and Visual Studio 2012 since it was released to MSDN subscribers on the 15th of August.For people that do not know about that yet please have a look at Jason Zander's excellent blog post .

Since then I have been investigating the many new features that have been introduced in this release.In this post I will be looking into the

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 20120 using this link.

My machine runs on Windows 8 and Visual Studio 2012 works just fine.

I have also installed in my machine SQL Server 2012 developer edition. I have also downloaded and installed AdventureWorksLT2012 database.You can download this database from the codeplex website.  

Before I start showcasing the demo I want to say that I strongly believe that Entity Framework is maturing really fast and now at version 5.0 can be used as your data access layer in all your .Net projects.

I have posted extensively about Entity Framework in my blog.Please find all the EF related posts here.

In this demo I will show you how to split an entity model into multiple diagrams using the new enhanced EF designer. We will not build an application in this demo.

Sometimes our model can become too large to edit or view.In earlier versions we could only have one diagram per EDMX file.In EF 5.0 we can split the model into more diagrams.

1) Launch VS 2012. Express edition will work fine.

2) Create a New Project. From the available templates choose a Web Forms application 

3) Add a new item in your project, an ADO.Net Entity Data Model. I have named it AdventureWorksLT.edmx.Then we will create the model from the database and click Next.Create a new connection by specifying the SQL Server instance and the database name and click OK.Then click Next in the wizard.In the next screen of the wizard select all the tables from the database and hit Finish.

4) It will take a while for our .edmx diagram to be created. When I select an Entity (e.g Customer) from my diagram and right click on it,a new option appears "Move to new Diagram".Make sure you have the Model Browser window open.

Have a look at the picture below

5) When we do that a new diagram is created and our new Entity is moved there.

Have a look at the picture below

 6) We can also right-click and include the related entities. Have a look at the picture below.

7) When we do that the related entities are copied to the new diagram.

Have a look at the picture below 

8) Now we can cut (CTRL+X) the entities from Diagram2 and paste them back to Diagram1.

9) Finally another great enhancement of the EF 5.0 designer is that you can change colors in the various entities that make up the model.

Select the entities you want to change color, then in the Properties window choose the color of your choice. Have a look at the picture below.

To recap we have demonstrated how to split your entity model in multiple diagrams which comes handy in EF models that have a large number of entities in them

Hope it helps!!!!

An introduction to ASP.Net MVC 4.0

Using Log4Net in an ASP.Net application

How to bind a XPO Data Source to an ASPxGridView control

Adding Client-Side events to DevExpress ASP.Net controls