nikolaosk - Page 4 - Developer IT

Creating a simple accordion with JQuery

- by nikolaosk

This another post that is focusing on how to use JQuery in ASP.Net applications. If you want to have a look at the other posts related to JQuery in my blog click here We all know that there is always a limited space in our web page to show content.In this example I would like to show you how to create an accordion "effect" on a simple .aspx page. Some basic level of knowledge of JQuery is assumed. Sadly, we canot cover the basics of JQuery in this post so here are a few resources for you to focus...(read more)

Read the article

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

- by nikolaosk

?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 lives2) 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!!!

Read the article

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

- by nikolaosk

?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 lives2) 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!!!

Read the article

Retrieve data from an ASP.Net application using Ado.Net 2.0 disconnected model

- by nikolaosk

This is the second post in a series of posts regarding to ADO.Net 2.0. Have a look at the first post if you like. In this post I am going to investigate the "Disconnected" model. When I say "Disconnected" I mean Datasets . Datasets are in memory representations of tables in a particular database. A Dataset contains a Table collection and each Table collection contains a Row collection and each Row collection contains a Columns collection. So initially you connect to the database, get the data to...(read more)

Read the article

Creating a simple watermark effect using JQuery

- by nikolaosk

This another post that is focusing on how to use JQuery in ASP.Net applications. If you want to have a look at the other posts related to JQuery in my blog click here In this post I would like to show you how to create a simple watermark effect using JQuery.Watermark is a great way to provide users with informarion without using more space on the screen. Some basic level of knowledge of JQuery is assumed. Sadly, we canot cover the basics of JQuery in this post so here are a few resources for you...(read more)

Read the article

Retrieve data from an ASP.Net application using ADO.Net 2.0 connected model

- by nikolaosk

I have been teaching Entity Framework,LINQ to SQL,LINQ to objects,LINQ to XML for some time now. I am huge fan of LINQ to Entities and I am using Entity Framework as my main data access technology. Entity framework is in the second version right now and I can accomplish most of the things I need. I am sure the guys in the ADO.Net team will implement many more features in the future. I am a strong believer that you cannot really understand the benefits of LINQ to SQL or LINQ to Entities unless you...(read more)

Read the article

Track updated/inserted entities in LINQ to SQL applications

- by nikolaosk

In this post I would like to discuss in further detail the issue of track changing of entities in LINQ to SQL applications. I would like to show you how the DataContext object keeps track of all the items that are updated,deleted or inserted in the underlying data store. If you want to have a look at my other post about LINQ to SQL and transactions click here . I am going to demonstrate this with a hands on example. I assume that you have access to a version of SQL Server and Northwind database....(read more)

Read the article

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

- by nikolaosk

?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 lives2) Add a new web form item on the project.Make sure you include the Master Page.Name it PosterList.aspxHave 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!!!

Read the article

Disabling the right-click sub menu using JQuery

- by nikolaosk

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/downloadPlease 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!!!

Developer IT