nikolaosk - Page 2 - Developer IT

Using rounded corners in modern websites with CSS3

- by nikolaosk

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

Read the article

Membership in ASP.Net applications - part 1

- by nikolaosk

So far in all my posts, I have never mentioned anything about how to implement authentication/authorisation mechanisms in a web site. In all our professional web applications we do need some sort of mechanism to verify who are users are and what privileges have in our site. This is the first post in a series of posts investigating how to implement membership (authentication+authorisation) in ASP.Net applications. We will look into the built-in web server security controls.We will look at the built...(read more)

Read the article

Looking into ASP.Net MVC 4.0 Mobile Development - part 2

- by nikolaosk

In this post I will be continuing my discussion on ASP.Net MVC 4.0 mobile development. You can have a look at my first post on the subject here . Make sure you read it and understand it well before you move one reading the remaining of this post. I will not be writing any code in this post. I will try to explain a few concepts related to the MVC 4.0 mobile functionality. In this post I will be looking into the Browser Overriding feature in ASP.Net MVC 4.0. By that I mean that we override the user agent for a given user session. This is very useful feature for people who visit a site through a device and they experience the mobile version of the site, but what they really want is the option to be able to switch to the desktop view. "Why they might want to do that?", you might wonder.Well first of all the users of our ASP.Net MVC 4.0 application will appreciate that they have the option to switch views while some others will think that they will enjoy more the contents of our website with the "desktop view" since the mobile device they view our site has a quite large display. Obviously this is only one site. These are just different views that are rendered.To put it simply, browser overriding lets our application treat requests as if they were coming from a different browser rather than the one they are actually from. In order to do that programmatically we must have a look at the System.Web.WebPages namespace and the classes in it. Most specifically the class BrowserHelpers. Have a look at the picture below In this class we see some extension methods for HttpContext class.These methods are called extensions-helpers methods and we use them to switch to one browser from another thus overriding the current/actual browser. These APIs have effect on layout,views and partial views and will not affect any other ASP.Net Request.Browser related functionality.The overridden browser is stored in a cookie. Let me explain what some of these methods do. SetOverriddenBrowser() - let us set the user agent string to specific value GetOverriddenBrowser() - let us get the overridden value ClearOverriddenBrowser() - let us remove any overridden user agent for the current request To recap, in our ASP.Net MVC 4.0 applications when our application is viewed in our mobile devices, we can have a link like "Desktop View" for all those who desperately want to see the site with in full desktop-browser version.We then can specify a browser type override. My controller class (snippet of code) that is responsible for handling the switching could be something like that. public class SwitchViewController : Controller{ public RedirectResult SwitchView(bool mobile, string returnUrl){if (Request.Browser.IsMobileDevice == mobile)HttpContext.ClearOverriddenBrowser();elseHttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop);return Redirect(returnUrl);}} Hope it helps!!!!

Read the article

A simple example of validation in ASP.Net applications

- by nikolaosk

I am going to start a new series of posts and I am going to cover in depth all the validation mechanisms/techniques/controls we have available in our ASP.Net applications. As many of you may know I am a Microsoft Certified Trainer and I will present this series of posts from a trainer's point of view. This series of posts will be helpful to all of novice/intermediate programmers who want to see all the tools available for validating data in ASP.Net applications. I am not going to try to convince...(read more)

Read the article

Entity Framework and Plain Old CLR Objects in an ASP.Net application

- by nikolaosk

This is going to be the sixth post of a series of posts regarding ASP.Net and the Entity Framework and how we can use Entity Framework to access our datastore. You can find the first one here , the second one here and the third one here , the fourth one here and the fifth one here . I have a post regarding ASP.Net and EntityDataSource. You can read it here .I have 3 more posts on Profiling Entity Framework applications. You can have a look at them here , here and here . In this post I will be looking...(read more)

Read the article

Displaying XML data using XSLT transformations in an ASP.Net site

- by nikolaosk

In this post, I will try to show you how to display xml data in asp.net website after making some xslt transformations. You will need to know a few things about XSLT. The best place to find out about XSLT is this link . I am going to explain a few things about XSLT elements and functions in this post, anyway. You will see the namespaces we are going to use and some of the main classes and methods.All these come with the FCL (Framework class library) and we just have to know what they do. We will...(read more)

Read the article

How to access HTML elements from server side code in an asp.net website

- by nikolaosk

In this post I will demonstrate with a hands on example how HTML elements in an .aspx page can be processed exactly like standard ASP.Net server controls. Basically how to make them accessible from server side code. 1) Launch Visual Studio 2010/2008/2005. (express editions will work fine). Create a new empty website and choose a suitable name for it. Choose VB as the development language. 2) Add a new item in your site, a web form. Leave the default name. 3) Let's say that we want to change the background...(read more)

Read the article

Looking into Enum Support in Entity Framework 5.0 Code First

- by nikolaosk

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

Read the article

Enhancing performance in Entity Framework applications by precompiling LINQ to Entities queries

- by nikolaosk

This is going to be the tenth post of a series of posts regarding ASP.Net and the Entity Framework and how we can use Entity Framework to access our datastore. You can find the first one here , the second one here , the third one here , the fourth one here , the fifth one here ,the sixth one here ,the seventh one here ,the eighth one here and the ninth one here . I have a post regarding ASP.Net and EntityDataSource . You can read it here .I have 3 more posts on Profiling Entity Framework applications...(read more)

Read the article

ASP.Net 4.0 and tableless menu control

- by nikolaosk

One of the issues I really like to read and learn is client side technologies. I am an ASP.Net guy at heart but I find CSS particular useful and I have been blogging about CSS in my other blog. Have a look here if you want for some interesting posts on CSS I believe designing web applications and sites according to web standards. I do not think designing our websites with tables is correct. Tables should be used for what they are good at doing, Display tabular data . So if we are in charge of our...(read more)

Read the article

Using multiple column layout with HTML 5 and CSS 3

- by nikolaosk

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

Read the article

Lazy Loading,Eager Loading,Explicit Loading in Entity Framework 4

- by nikolaosk

This is going to be the ninth post of a series of posts regarding ASP.Net and the Entity Framework and how we can use Entity Framework to access our datastore. You can find the first one here , the second one here , the third one here , the fourth one here , the fifth one here ,the sixth one here ,the seventh one here and the eighth one here . I have a post regarding ASP.Net and EntityDataSource . You can read it here .I have 3 more posts on Profiling Entity Framework applications. You can have a...(read more)

Read the article

ASP.Net validation controls

- by nikolaosk

In this post I would like to continue talking about validation in ASP.Net applications. I will look into the validation controls that ASP.Net provides. You can have a look at the first post in my blog regarding validation. You will show you that we can perform all our main validation tasks without almost writing any code. We will add validation to our form by adding one or more controls.We can also display messages to the user. The controls I am going to look into are: CompareValidator CustomValidator...(read more)

Read the article

Using the Items collection for state management

- by nikolaosk

I have explained some of the state mechanisms that we have in our disposal for preserving state in ASP.Net applications in various posts in this blog. You can have a look at this post , this post , this post and this one .My last post was on Application state management and you can read it here . In this post I will show you how to preserve state using the Items collection. Many developers do not know that we have this option as well for state management. With Items state we can pass data between...(read more)

Read the article

Resizing text in an HTML 5 page using JQuery

- by nikolaosk

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/downloadIn 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) followsbody{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 linkHave a look at the picture below Finally I decrease the font size by clicking on the respective linkHave 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!!

Read the article

Linq to SQL Lazy Loading in ASP.Net applications

- by nikolaosk

In this post I would like to talk about LINQ to SQL and its native lazy loading functionality. I will show you how you can change this behavior. We will create a simple ASP.Net application to demonstrate this. I have seen a lot of people struggling with performance issues. That is mostly due to the lack of knowledge of how LINQ internally works.Imagine that we have two tables Products and Suppliers (Northwind database). There is one to many relationship between those tables-entities. One supplier...(read more)

Read the article

Using JQuery tabs in an HTML 5 page

- by nikolaosk

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

Read the article

Using Entity Framework Entity splitting customisations in an ASP.Net application

- by nikolaosk

I have been teaching in the past few weeks many people on how to use Entity Framework. I have decided to provide some of the samples I am using in my classes. First let’s try to define what EF is and why it is going to help us to create easily data-centric applications.Entity Framework is an object-relational mapping (ORM) framework for the .NET Framework.EF addresses the problem of Object-relational impedance mismatch . I will not be talking about that mismatch because it is well documented in many...(read more)

Read the article

Membership in ASP.Net applications - part 4

- by nikolaosk

This is the fourth post in a series of posts regarding ASP.Net built in membership functionality,providers,controls. You can read the first one here . You can read the second post here . You can read the third post here . In this post I will show you how to add users programmatically to a role. In the third post we saw how to get users in a specific role.I will also show you how to delete a user and a role programmatically. 1) Launch Visual Studio 2005,2008/2010. Express editions will work fine....(read more)

Read the article

The Image ASP.Net web server control

- by nikolaosk

In this post I will try to show you how to use the ImageMap web server control. This is going to be a very easy example. We will write no code but I will use the control to create navigation hotspots. 1) Launch Visual Studio 2010/2005/2008. Express editions will be fine. 2) Create a new asp.net empty web site and call it “ NavigationHotspot ”. 3) Drag and drop in the default.aspx page a ImageMap web server control from the Toolbox. 4) Let me explain what I did. I have an image that contains two flags...(read more)

Read the article

Membership in ASP.Net applications - part 2

- by nikolaosk

This is the second post in a series of posts regarding ASP.Net built in membership functionality,providers,controls. You can read the first one post one here . In order to follow this post, complete the steps in the first post. It will only take 10 minutes or so. 1) Launch Visual Studio 2005,2008/2010. Express editions will work fine. I am using Visual Studio 2010 Ultimate edition. 2) Follow all the steps in the first post of the series. 3) Run your application to make sure it runs. 4) Change the...(read more)

Read the article

Using Entity Framework Table splitting customisations in an ASP.Net application

- by nikolaosk

I have been teaching in the past few weeks many people on how to use Entity Framework. I have decided to provide some of the samples I am using in my classes. First let’s try to define what EF is and why it is going to help us to create easily data-centric applications.Entity Framework is an object-relational mapping (ORM) framework for the .NET Framework.EF addresses the problem of Object-relational impedance mismatch . I will not be talking about that mismatch because it is well documented in many...(read more)

Read the article

How to create selectable themes in your ASP.Net applications

- by nikolaosk

In this post I am going to show you something that we see in most websites. When we visit a website we are given the choice through a control to select the theme(colors,font size,font family) that we want to be applied to the site. In almost all asp.net web sites we define the look and feel of the site through Themes , skins , Master Pages and Stylesheets . I assume that you know a little bit about CSS,XHTML. I assume that you have little knowledge of web forms and master pages. Before you go on...(read more)

Read the article

Creating a simple RSS reader using ListView,XMLDatasource,DataPager web server controls

- by nikolaosk

In my last ASP.Net seminar someone noticed that we did not talk at all about the XmlDataSource,ListView,DataPager web server controls. It is rather impossible to investigate/talk about all issues regarding ASP.Net in a seminar but I promised to write a blog post. I thought that I could combine all those three web server controls to create a RSS reader. 1) Launch Visual Studio 2008/2010. Express editions will work fine. 2) Create an empty asp.net web site. Choose an appropriate name. We will not write...(read more)

Read the article

Scrolling an HTML 5 page using JQuery

- by nikolaosk

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

Search Results

Search found 84 results on 4 pages for 'nikolaosk'.

Page 2/4 | < Previous Page | 1 2 3 4 | Next Page >

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

- by nikolaosk

< Previous Page | 1 2 3 4 | Next Page >