Οκτώβριος 2012 - Δημοσιεύσεις
In this post I will demonstrate how to configure SQL Server after installation. I have a relevant post in this blog on how to install SQL Server. I have installed SQL Server Developer edition in my machine. Developer edition of SQL Server 2012 can be
Διαβάστε περισσότερα
In this post I will be looking into the Resource database in SQL Server and what it contains and why it is very important for the normal operation of SQL Server. I was talking with SQL Server developers the other day and they have never heard or looked
Διαβάστε περισσότερα
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!!!
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!!!
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!!!!!
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!!!
In this post I will be looking into the SQL Server Log and how we can use it so we can identify and troubleshoot potential problems. Recently I asked someone that gave me a call regarding an SQL Server issue, to have a look at the SQL Server Log and he
Διαβάστε περισσότερα
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!!!
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!!
Τ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> <%#: String.Format("{0:c}", Item.PosterPrice) %></span>
<br />
<span><b>Poster Number:</b> <%#: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.
4) Now we need to write the
GetPosterDetails method.In the code behind of the
PosterDetails.aspx page we type
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.
You can see that now I have all the details of the poster in a new page.
Μake sure you place breakpoints in the code so you can see what is really going on.
Hope it helps!!!
Τ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> </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!!!
Τ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!!!
