archive-gr.com » GR » D » DOTNETZONE.GR

Total: 987

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Dot Net Rules
    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 Posted Δευτέρα 17 Σεπτεμβρίου 2012 5 22 μμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία asp net html5 css3 rounded corners Using real fonts in HTML 5 CSS 3 pages This is going to be the fifth post in a series of posts regarding HTML 5 You can find the other posts here here here and here In this post I will provide a hands on example on how

    Original URL path: http://www.dotnetzone.gr/cs/blogs/dotnetrules/archive/tags/css3/default.aspx (2015-07-15)
    Open archived version from archive


  • Dot Net Rules
    to objects Linq to Sql LocalDB Localisation logging login controls master page master detail membership Mobile Views Model First MS Office objectdatasource performance POCOS Polymorphism routing scaffolding ScriptManager SEO session state silverlight Sql Server Sql Server 2005 SQL Server 2008 sql server 2012 sqlcommand stored procedures Tracing transaction log transactions UpdatePanel validation VB 2005 VB 2008 VB 9 0 ViewState Visual Basic 10 0 Visual Studio Visual Studio 2005 Visual Studio 2008 Visual Studio 2010 Visual Studio 2012 VS 2010 VS 2012 WCF web server controls web service web config window forms windows forms WPF XAML XHTML XML XML Literals Πλοήγηση Αρχική σελίδα Εκδηλώσεις Ιστολόγια Συζητήσεις Εκθέσεις Φωτογραφιών Αρχειοθήκες Ιστορικό Δημοσιεύσεων Ιούνιος 2015 4 Μάρτιος 2015 2 Ιούνιος 2014 1 Δεκέμβριος 2013 2 Νοέμβριος 2013 14 Οκτώβριος 2013 2 Σεπτέμβριος 2013 5 Ιούλιος 2013 1 Ιανουάριος 2013 8 Δεκέμβριος 2012 11 Νοέμβριος 2012 3 Οκτώβριος 2012 12 Σεπτέμβριος 2012 16 Αύγουστος 2012 6 Ιούλιος 2012 13 Ιούνιος 2012 3 Μάιος 2012 4 Απρίλιος 2012 15 Μάρτιος 2012 8 Ιανουάριος 2012 3 Δεκέμβριος 2011 7 Νοέμβριος 2011 13 Οκτώβριος 2011 6 Σεπτέμβριος 2011 8 Αύγουστος 2011 6 Ιούλιος 2011 2 Μάιος 2011 1 Μάρτιος 2011 9 Φεβρουάριος 2011 15 Ιανουάριος 2011 14 Δεκέμβριος 2010 9 Νοέμβριος 2010 2 Οκτώβριος 2010 11 Σεπτέμβριος 2010 1 Αύγουστος 2010 3 Απρίλιος 2010 2 Μάρτιος 2010 5 Ιανουάριος 2010 1 Οκτώβριος 2009 2 Σεπτέμβριος 2009 4 Ιούνιος 2009 5 Απρίλιος 2009 1 Μάρτιος 2009 3 Φεβρουάριος 2009 2 Δεκέμβριος 2008 3 Νοέμβριος 2008 10 Σεπτέμβριος 2008 1 Αύγουστος 2008 1 Ιούλιος 2008 9 Ιούνιος 2008 10 Παρουσίαση με Ετικέτες Όλες οι Ετικέτε databinding RSS asp net ASP NET 4 0 C c 3 0 Code First data access layer Entity framework LINQ to Entities Visual Studio 2010 Using the Code First approach when building ASP

    Original URL path: http://www.dotnetzone.gr/cs/blogs/dotnetrules/archive/tags/databinding/default.aspx (2015-07-15)
    Open archived version from archive

  • Dot Net Rules
    tables tips and tricks Tracing transaction log transactions UpdatePanel validation VB 2005 VB 2008 VB 9 0 ViewState Visual Basic 10 0 Visual Studio Visual Studio 2005 Visual Studio 2008 Visual Studio 2010 Visual Studio 2012 VS 2010 VS 2012 WCF wcf data service web server controls web service web config window forms windows forms WPF XAML XHTML XML XML Literals Πλοήγηση Αρχική σελίδα Εκδηλώσεις Ιστολόγια Συζητήσεις Εκθέσεις Φωτογραφιών Αρχειοθήκες Ιστορικό Δημοσιεύσεων Ιούνιος 2015 4 Μάρτιος 2015 2 Ιούνιος 2014 1 Δεκέμβριος 2013 2 Νοέμβριος 2013 14 Οκτώβριος 2013 2 Σεπτέμβριος 2013 5 Ιούλιος 2013 1 Ιανουάριος 2013 8 Δεκέμβριος 2012 11 Νοέμβριος 2012 3 Οκτώβριος 2012 12 Σεπτέμβριος 2012 16 Αύγουστος 2012 6 Ιούλιος 2012 13 Ιούνιος 2012 3 Μάιος 2012 4 Απρίλιος 2012 15 Μάρτιος 2012 8 Ιανουάριος 2012 3 Δεκέμβριος 2011 7 Νοέμβριος 2011 13 Οκτώβριος 2011 6 Σεπτέμβριος 2011 8 Αύγουστος 2011 6 Ιούλιος 2011 2 Μάιος 2011 1 Μάρτιος 2011 9 Φεβρουάριος 2011 15 Ιανουάριος 2011 14 Δεκέμβριος 2010 9 Νοέμβριος 2010 2 Οκτώβριος 2010 11 Σεπτέμβριος 2010 1 Αύγουστος 2010 3 Απρίλιος 2010 2 Μάρτιος 2010 5 Ιανουάριος 2010 1 Οκτώβριος 2009 2 Σεπτέμβριος 2009 4 Ιούνιος 2009 5 Απρίλιος 2009 1 Μάρτιος 2009 3 Φεβρουάριος 2009 2 Δεκέμβριος 2008 3 Νοέμβριος 2008 10 Σεπτέμβριος 2008 1 Αύγουστος 2008 1 Ιούλιος 2008 9 Ιούνιος 2008 10 Παρουσίαση με Ετικέτες Όλες οι Ετικέτε datasets RSS asp net C data access layer disconnected model gridview regular expressions search sqlcommand sqlconnection SQLDataReader Visual Studio 2005 Visual Studio 2008 Visual Studio 2010 Adding search functionality in a GridView in an ASP Net application In my seminars I always show how to fetch data from an SQL Server database to some UI controls usually a GridView control I use the connected data access model I use the disconnected data

    Original URL path: http://www.dotnetzone.gr/cs/blogs/dotnetrules/archive/tags/datasets/default.aspx (2015-07-15)
    Open archived version from archive

  • Dot Net Rules
    web server controls web service web config window forms windows forms WPF XAML XHTML XML XML Literals Πλοήγηση Αρχική σελίδα Εκδηλώσεις Ιστολόγια Συζητήσεις Εκθέσεις Φωτογραφιών Αρχειοθήκες Ιστορικό Δημοσιεύσεων Ιούνιος 2015 4 Μάρτιος 2015 2 Ιούνιος 2014 1 Δεκέμβριος 2013 2 Νοέμβριος 2013 14 Οκτώβριος 2013 2 Σεπτέμβριος 2013 5 Ιούλιος 2013 1 Ιανουάριος 2013 8 Δεκέμβριος 2012 11 Νοέμβριος 2012 3 Οκτώβριος 2012 12 Σεπτέμβριος 2012 16 Αύγουστος 2012 6 Ιούλιος 2012 13 Ιούνιος 2012 3 Μάιος 2012 4 Απρίλιος 2012 15 Μάρτιος 2012 8 Ιανουάριος 2012 3 Δεκέμβριος 2011 7 Νοέμβριος 2011 13 Οκτώβριος 2011 6 Σεπτέμβριος 2011 8 Αύγουστος 2011 6 Ιούλιος 2011 2 Μάιος 2011 1 Μάρτιος 2011 9 Φεβρουάριος 2011 15 Ιανουάριος 2011 14 Δεκέμβριος 2010 9 Νοέμβριος 2010 2 Οκτώβριος 2010 11 Σεπτέμβριος 2010 1 Αύγουστος 2010 3 Απρίλιος 2010 2 Μάρτιος 2010 5 Ιανουάριος 2010 1 Οκτώβριος 2009 2 Σεπτέμβριος 2009 4 Ιούνιος 2009 5 Απρίλιος 2009 1 Μάρτιος 2009 3 Φεβρουάριος 2009 2 Δεκέμβριος 2008 3 Νοέμβριος 2008 10 Σεπτέμβριος 2008 1 Αύγουστος 2008 1 Ιούλιος 2008 9 Ιούνιος 2008 10 Παρουσίαση με Ετικέτες Όλες οι Ετικέτε DevExpress RSS ArrayList asp net ASPxGridView client side master detail XpoDataSource How to bind a XPO Data Source to an ASPxGridView control I have been involved with an ASP Net project recently and I have implemented it using the awesome DevExpress ASP Net controls In this post I will show you how to bind an XPODataSource control to an ASPxGridView control If you want to implement this read more Posted Πέμπτη 12 Απριλίου 2012 9 18 μμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία asp net DevExpress ASPxGridView XpoDataSource Adding Client Side events to DevExpress ASP Net controls I have been involved in a ASP Net project recently and I have implemented it using the awesome

    Original URL path: http://www.dotnetzone.gr/cs/blogs/dotnetrules/archive/tags/DevExpress/default.aspx (2015-07-15)
    Open archived version from archive

  • Dot Net Rules
    Have a look at the picture below 7 Now what if I wanted to share the contents of the the Text HTML module across other pages of the site I navigate to the http dnn7 nopservices com AboutUs aspx page then Modules Add Existing module Then I select the Home page the Text HTML module I added in the Home page I have titled it DNN and then I add it in the new page AboutUs in the ContentPane Have a look at the picture below 8 The module and its contents are inserted in the AboutUs page Have a look at the picture below 9 Now if I go back to the Home page and I add some more content Have a look at the picture below I have added The main site where you can download everything is http www dotnetnuke com If you navigate to the AboutUs page you will see that those changes were reflected to that page as well 10 But what if I did not want this to happen I mean what if we wanted to copy a module across one or more pages but didn t want to have the content changes of one module reflected to the others in the other pages First I am going to delete the Text HTML module titled DNN from the AboutUs page Have a look at the picture below 11 Now I am going to add the Text HTML module titled DNN from the Home page to the AboutUs page again I navigate to the http dnn7 nopservices com AboutUs aspx page then Modules Add Existing module Then I select the Home page the Text HTML module I added in the Home page I have titled it DNN and then I add it in the new page AboutUs in the ContentPane Please note that I have checked the option Make a Copy Have a look at the picture below The Text HTML module is added to this page as well Now if I navigate to the Home page and add another line of content in the Text HTML module e g You can download the latest version of DotNetnuke and very useful manuals and then move back to the AboutUs page we will see that this new change did not reflect on the AboutUs page 12 Finally I would like to show you another way to share content across multiple pages in a DNN site I am adding a new module to the Home page I am navigating to Modules Add New Module from the control panel From the available modules I choose HTML module I add some sample content to this module You can add anything you like I have titled this module DNN RoadMap by going to the module Settings Have a look at the picture below Then I add the module title and in Advanced Settings I check the option Display Module on All Pages By doing that this module will appear in

    Original URL path: http://www.dotnetzone.gr/cs/blogs/dotnetrules/archive/tags/dotnetnuke/default.aspx (2015-07-15)
    Open archived version from archive

  • Dot Net Rules
    59871 Movie in the menu I see the Reviews link for both my movies I choose to click on the Reviews link for the first movie The GodFather and when I click on it I can see the reviews and hit the Delete link Have a look at the picture below Finally I hit the Delete button and my review for that movie has been deleted Do not underestimate what we have accomplished so far We have managed to develop an ASP Net MVC 4 0 application where one can create edit delete view and search for movies He can also create edit delete view reviews for a particular movie In the next post I will talk about validation through data annotations and database migrations within the context of the Entity Framework Code First Paradigm Hope it helps Posted Τρίτη 1 Ιανουαρίου 2013 5 19 μμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία asp net C CSS Entity framework jquery HTML Code First Visual Studio 2012 ASP NET MVC 4 0 Creating a complete ASP Net MVC 4 0 application with Visual Studio 2012 C EF 5 0 Code First part 4 I have decided to write a series of posts on how to write a small ASP Net MVC 4 0 application I will develop this application step by step and I will explain everything that you need to know in order to develop ASP Net MVC 4 0 applications This is the fourth post in this series You can find the first one here the second one here and the third one here Make sure you read and understand those posts I am building an ASP Net MVC application where users can enter movies and rate them As we develop our application I will change the requirements and add more features My goal is to have a working application and at the same time show you the building blocks of ASP Net MVC In the last post we have created the entities needed in order to store and retrieve data models views and the database Now I would like to talk about Code Blocks and Code Expressions in Razor Views 1 Launch Visual Studio and open the ASP Net MVC application 2 Open the Index cshtml from the Views Movie folder These are the contents of the view model IEnumerable MovieReviews Models Μovie ViewBag Title Index h2 Index h2 p Html ActionLink Create New Create p table tr th Html DisplayNameFor model model Name th th Html DisplayNameFor model model Director th th Html DisplayNameFor model model YearReleased th th th tr foreach var item in Model tr td Html DisplayFor modelItem item Name td td Html DisplayFor modelItem item Director td td Html DisplayFor modelItem item YearReleased td td Html ActionLink Edit Edit new id item Id Html ActionLink Details Details new id item Id Html ActionLink Delete Delete new id item Id td tr table The responsibility of this view is to take the model passed by the controller and present the data to the users through the template The View is nothing more than a template where the data passed from the model is presented We combine literal text e g h2 h2 with pieces of data from the model through C code Code Expressions An example of code expressions from the view above td Html DisplayFor modelItem item Name td The code in bold is a code expression The code expression will be evaluated by the Razor engine and the output which will be displayed in a column of an html table will be presented to the client Code blocks An example of code block from the view above ViewBag Title Index Between the curly braces we can add as much C code as we want Let me modify a little bit the View above ViewBag Title Index var reviewscount Model Count h2 Index h2 h3 the number of the reviews so far is reviewscount h3 The code I changed is in bold Run your application again http localhost 59871 movie http localhost yourport movie in your case I added a new variable inside the code block and then used the variable reviewscount in a place I wanted inside the view as a code expression Hope all makes sense so far 3 Now I would like to point out at this point are HTML Helpers that are part of any View in the ASP Net MVC applications Their purpose is to create small blocks of HTML There are helpers like to create links inputs labels forms validation messages and much more Think of them like traditional ASP NET Web Form controls We use HTML helpers are used to modify HTML HTML helpers do not have an event model and a view state In most cases an HTML helper is just a method that returns a string Let s have a look at the Html ActionLink Html ActionLink Edit Edit new id item Id This is the easiest way to render an HTML link The Html ActionLink does not link to a view It creates a link to a controller action You also can see more HTML Helpers in the View Html DisplayNameFor which Gets the display name for the model Html DisplayFor will render the DisplayTemplate that matches the property s type There are more HTML helpers can be used to render modify and output HTML form elements BeginForm EndForm TextArea TextBox ValidationMessageFor We will see more of those as we move on 3 When you run your application and navigate to the http localhost 59871 movie you see HTML elements that are not in the current view Index view I mean the navigation system menu the header logo and the footer Where does this markup come from It comes form the Layout View Υοu can think of this as the master pages in web forms applications Have a look at the picture below to see what I mean Have a look in the Shared folder in the Solution Explorer You will see the Layout cshtml DOCTYPE html html lang en head meta charset utf 8 title ViewBag Title My ASP NET MVC Application title link href favicon ico rel shortcut icon type image x icon meta name viewport content width device width Styles Render Content css Scripts Render bundles modernizr head body header div class content wrapper div class float left p class site title Html ActionLink your logo here Index Home p div div class float right section id login Html Partial LoginPartial section nav ul id menu li Html ActionLink Home Index Home li li Html ActionLink About About Home li li Html ActionLink Contact Contact Home li ul nav div div header div id body RenderSection featured required false section class content wrapper main content clear fix RenderBody section div footer div class content wrapper div class float left p copy DateTime Now Year My ASP NET MVC Application p div div footer Scripts Render bundles jquery RenderSection scripts required false body html We have the head section that will be present in all pages head meta charset utf 8 title ViewBag Title My ASP NET MVC Application title link href favicon ico rel shortcut icon type image x icon meta name viewport content width device width Styles Render Content css Scripts Render bundles modernizr head Then you have the header section that will appear in all pages header div class content wrapper div class float left p class site title Html ActionLink your logo here Index Home p div div class float right section id login Html Partial LoginPartial section nav ul id menu li Html ActionLink Home Index Home li li Html ActionLink About About Home li li Html ActionLink Contact Contact Home li ul nav div div header Then you have the header section that will appear in all pages footer div class content wrapper div class float left p copy DateTime Now Year My ASP NET MVC Application p div div footer At one point we see a call to the RenderBody div id body RenderSection featured required false section class content wrapper main content clear fix RenderBody section When the Layout View calls RenderBody that is when the content View index cshtml will be inserted and rendered at this exact point in the HTML markup How does ASP Net MVC to call the Layout View before our content View It is because of this file ViewStart cshtml The contents of the ViewStart cshtml follow Layout Views Shared Layout cshtml ASP Net MVC runtime knows to render first the Layout View because the ViewStart cshtml runs first before any other view and then the Content View 4 Another important topic in ASP Net MVC applications are Partial Views At some point in the Layout cshtml view there is a call to the LoginPartial partial view section id login Html Partial LoginPartial section A partial view is a view that we place code HTML C that we will often reuse in other views Have a look at the contents of the LoginPartial cshtml if Request IsAuthenticated text Hello Html ActionLink User Identity Name Manage Account routeValues null htmlAttributes new class username title Manage using Html BeginForm LogOff Account FormMethod Post new id logoutForm Html AntiForgeryToken a href BLOCKED SCRIPTdocument getElementById logoutForm submit Log off a text else ul li Html ActionLink Register Register Account routeValues null htmlAttributes new id registerLink li li Html ActionLink Log in Login Account routeValues null htmlAttributes new id loginLink li ul So this is a type of special View that we must know and use so we make our application easier to maintain 5 Now it is time to have a look at some important topics that are related with Controllers Open the MovieController cs file I would like to talk a bit about ActionResults and what thet are The ActionResult is an abstract base class for other types of actions Other classes inheriting from the ActionResult ContentResult EmptyResult FileResult HttpStatusCodeResult JavaScriptResult RedirectResult RedirectToRouteResult ViewResult The ViewResult renders a specifed view to the client The RedirectResult performs an HTTP redirection to a specified URL The ContentResult writes content to the client without requiring a view In this method Index the result of this method is ActionResult which means we will call the Index cshtml passing the model to it in the Views Movie folder So the results of this view will be displayed to the client private MovieDBContext db new MovieDBContext GET Movie public ActionResult Index return View db Movies ToList Another very important topic is Action Selectors Some of them are ActionName AcceptVerbs An ActionSelector dictates which action method is triggered They come with the form of attributes Have a look at the MovieController cs file and the Delete method HttpPost ActionName Delete public ActionResult DeleteConfirmed int id Μovie μovie db Movies Find id db Movies Remove μovie db SaveChanges return RedirectToAction Index ActionName will specify the name of this method It can be reached by Delete and not DeleteConfirmed AcceptVerbs HttpPost HttpGet represent attributes that specify which HTTP verbs Get Post an action method will respond to In the example above we have an HTTP Post HttpPost ActionName Delete The final topic I would like to talk about is Action Filters They are applied to methods and classes in the form of attributes An ActionFilter provides some methods that are run before and after request and response processing Some of them are OutputCache which caches the output of the controller Authorize that restricts an action to authorized users or roles If I open the MovieController cs file and then apply the Authorize see below to the Index method private MovieDBContext db new MovieDBContext GET Movie Authorize public ActionResult Index return View db Movies ToList and then navigate to the http localhost 59871 movie this is what I will get the following as a result redirect to the login page The ASP Net MVC runtime will pick up the Authorize attribute and redirect me to the Login page Hope you have followed along and mastered the topics presented here as they are absolutely necessary for building ASP Net MVC applications In the next post we will continue building our application Hope it helps Posted Κυριακή 30 Δεκεμβρίου 2012 11 37 μμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία asp net C CSS Entity framework jquery HTML Code First Visual Studio 2012 ASP NET MVC 4 0 Creating a complete ASP Net MVC 4 0 application with Visual Studio 2012 C EF 5 0 Code First part 3 I have decided to write a series of posts on how to write a small ASP Net MVC 4 0 application I will develop this application step by step and I will explain everything that you need to know in order to develop ASP Net MVC 4 0 applications This is the third post in this series You can find the first one here and the second one here Make sure you read and understand the first post and the second post As I design and develop the application I will explain some of the most common building blocks of ASP Net MVC like Code blocks Code expressions Action Results Action Selectors Action Filters Layout Views and Partial Views Now we have to think about the data access technology that we will use in our sample application I am going to build an ASP Net MVC application where users can search through a collection of movies and rate them I will not use traditional ADO Net data access techniques I will use Entity Framework EF which is part of the Net framework 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 search in my blog because I have posted many posts regarding ASP Net and EF There are different approaches paradigms available using the Entity Framework namely Database First Code First Model First 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 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 In this application we will us the Code First approach when building our data centric application with EF Code First relies on DbContext We create 2 3 classes e g Movie Review with properties and then these classes interact with the DbContext class Then 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 When building an application the most important thing is to understand the domain and the domain business objects These should be the objects that should drive the application and not e g the database schema So I like to design my entities very carefully and 1 Launch Visual Studio and open your application 2 We will add the 2 entities I am going to show you below in the Models folder Add a new class file named Movie cs inside the Models folder The Movie cs entity is as follows public class Μovie public int Id get set public string Name get set public string Director get set public DateTime YearReleased get set public ICollection MovieReview Reviews get set We have added some properties in this entity Now we need to add the MovieReview entity Add a new class file named MovieReview cs inside the Models folder The MovieReview cs entity is as follows public class MovieReview public int Id get set public int Rating get set public string Comment get set public int MovieId get set So we have our entities ready We have one movie and many reviews That should be clear by now I will instantiate these objects store them and retrieve them in my database My database will be an SQL Server database where I will create from the entities Then we need to create a context class that inherits from DbContext Add a new class to the Models folder Name it MovieDBContext cs 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 MovieDBContext DbContext public DbSet Μovie Movies get set public DbSet MovieReview Reviews get set The MovieDBContext is a database context class This class is responsible for talking to the underlying database storing and updating the data to the database We need to add this reference

    Original URL path: http://www.dotnetzone.gr/cs/blogs/dotnetrules/archive/tags/HTML/default.aspx (2015-07-15)
    Open archived version from archive

  • Dot Net Rules
    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 Posted Πέμπτη 18 Οκτωβρίου 2012 10 52 πμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία asp net jquery html5 scroll Disabling the right click sub menu using JQuery Recently I needed to disable the right click contextual menu in an HTML page for a very simple HTML application I was creating for a friend This is going to be a short post where I will demonstrate how to disable the right click contextual menu I will use the very popular JQuery Library Please download the library minified version from http jquery com download Please find here all my posts regarding JQuery In this hands on example I will be using Expression Web 4 0 This application is not a free application You can use any HTML editor you like You can use Visual Studio 2012 Express edition You can download it here I am going to create a very simple HTML 5 page with some text and an image The HTML markup for the page follows DOCTYPE html html lang en head title HTML 5 CSS3 and JQuery title meta http equiv Content Type content text html charset utf 8 link rel stylesheet type text css href style css script type text javascript src jquery 1 8 2 min js script script type text javascript function document bind contextmenu function return false jQuery script head body div id header h1 Learn cutting edge technologies h1 h2 HTML 5 JQuery CSS3 h2 div figure img src html5 png alt HTML 5 figure div id main h2 HTML 5 h2 article p HTML5 is the latest version of HTML and XHTML The HTML standard defines a single language that can be written in HTML and XML It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications an area previously not adequately covered by HTML p article div body html This is the JQuery code I use function document bind contextmenu function return false jQuery I simply disable cancel the contextmenu event When I load the simple page on the browser and I right click the context menu does not appear Hope it helps Posted Κυριακή 14 Οκτωβρίου 2012 9 38 μμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία asp net jquery html5 Resizing text in an HTML 5 page using JQuery This is going to be the ninth post in a series of posts regarding HTML 5 You can find the other posts here here here here here here here and here In this post I will demonstrate how to implement a very common feature found in websites today enabling the visitor to increase or decrease the font size of a page You can use the JQuery code I will write in this post for HTML pages which do not follow the HTML 5 standard As I said earlier we need to write JavaScript to implement this functionality I will use the very popular JQuery Library Please download the library minified version from http jquery com download In this hands on example I will be using Expression Web 4 0 This application is not a free application You can use any HTML editor you like You can use Visual Studio 2012 Express edition You can download it here The HTML markup for the page follows DOCTYPE html html lang en head title HTML 5 CSS3 and JQuery title meta http equiv Content Type content text html charset utf 8 link rel stylesheet type text css href style css script type text javascript src jquery 1 8 2 min js script script type text javascript function a click function var getfont p css font size var mynum parseFloat getfont 10 var newmwasure getfont slice 2 p css font size mynum 1 2 newmwasure if this id increase p css font size mynum 1 4 newmwasure script head body div id header h1 Learn cutting edge technologies h1 h2 HTML 5 JQuery CSS3 h2 div div id resize a href id increase Increase Font a a href id decrease Decrease Font a div div id main h2 HTML 5 h2 article p HTML5 is the latest version of HTML and XHTML The HTML standard defines a single language that can be written in HTML and XML It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications an area previously not adequately covered by HTML p article div body html There is nothing difficult or fancy in the HTML markup above I have a link to the external JQuery library and the JQuery code is included inside the html page I have two links on this page that will increase decrease the font size of the contents enclosed inside the p p tags Let me explain what the JQuery code does When the user clicks on the link I store in a variable the current font size of the p element that I get back from the CSS function var getfont p css font size So now we have the original value That will return a value like 16px 1 2em Then I need to get the unit of measurement px em I use the slice function var newmwasure getfont slice 2 Then I want to get only the numeric part of the returning value I do that using the parseFloat function Have a look at the parseFloat function Finally with this bit of code I choose a ratio I am devising a very simple algorithm for increasing and decreasing and apply it to the p element I still use the CSS function You can get but also set the font size for a particular element with the CSS function So I check for the id increase and if this matches I will increase the font size of the p element If it does not match we will decrease the font size p css font size mynum 1 2 newmwasure if this id increase p css font size mynum 1 4 newmwasure The code for the css file style css follows body background color eaeaea p font size 0 8em font family Tahoma resize width 200px background color dadada resize a text decoration none The above CSS rules are very easy to understand Now I save all my work I view my page on the browser for the first time Have a look at the picture below Now I increase the font size by clicking the respective link Have a look at the picture below Finally I decrease the font size by clicking on the respective link Have a look at the picture below Once more we see that the power and simplicity of JQuery library enables us to write less code but accomplish a lot at the same time Hope it helps Posted Σάββατο 6 Οκτωβρίου 2012 8 16 μμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία asp net jquery html5 text resize Building an ASP Net 4 5 Web forms application part 1 I am going to start a new series of posts on how to build an application using ASP Net 4 5 Web forms A few days back I have been asked to present a number of presentations on ASP Net 4 5 Ι will demonstrate how to create a website that sells posters on line In this web forms application I will design and implement the main functionality that is needed in order to have an operational e shop I will also use this series of posts to highlight the various features in ASP Net and most particularly the new features available in ASP Net 4 5 This is going to be part 1 of the application where I will explain what I am going to do In the final post on this series of posts I will demonstrate on how to deploy the web site to Windows Azure I will use Visual Studio 2012 Ultimate edition but you can use the Visual Studio Express 2012 for Web You can download it here The Net framework will be installed automatically In case you have trouble installing Visual Studio please have a look at this link You can download everything you will need for this project if you use the Web Platform Installer You must be administrator in your machine to run the Web Platform Installer I will try to explain everything in detail and with many screenshots I would say that it would be very helpful if one has some knowledge of HTML CSS Javascript relational databases Object oriented concepts This is not going to be a 100 level beginner level tutorial and very experienced developers will lot not gain much from this series of posts The development language will be C I will create a Web Application Project and not a Web Site Project There are a lot of web developers out there that use ASP Net MVC ASP Net MVC provide us with a new way of writing ASP Net applications It does not replace web forms It is just an alternative project type It still runs on ASP Net and supports caching sesions and master pages There is more emphasis on test driven development and separation of concerns with ASP Net MVC If I have time I will create another series of posts where I will create the exact same application using ASP Net MVC 4 0 There are two posts in my blog regarding ASP Net MVC You can find them here and here I always thought that people who are familiar with RAD tools the best way to learn web applications on the Net framework is the ASP Net Web forms paradigm It is a control based event driven development model that suits most people that know how to create Windows Forms Applications or WPF applications Let s start with the actual demo application 1 Launch Visual Studio Create a New Project File New Project From the available templates choose ASP Net Web Forms Application Have a look at the picture below 2 Make sure that you spend some time reviewing the structure of the application and the files in the Solution Explorer We have aspx files js files including the JQuery library css files e t c Make sure you run the application and navigate to the various pages Make sure you realise that ASP Net is a server side technology The built in web server dynamically generates the HTML that is rendered on the browser If you want to learn more about Page lifecycle events have a look at this post of mine We have a functional web application out of the box There is common structure layout in this web application This feature is known as Master Pages Please have a look at the HTML rendered in your browser The ASP Net application template uses HTML 5 Modernizr open source javscript Library is also included for browsers that do not support HTML 5 If you want to find more about HTML 5 have a look at these posts Have a look at the picture below You can also use register and log in to the web site If you want to learn more about membership controls and the Membership provider in ASP Net have a look here Another important feature I want to highlight is NuGet and Nuget packages If you have a look at the JQuery js files that are included in the web site out of the box you will notice that this is not the latest version We can download the latest version of JQuery Library using Nuget If you go to Tools Library Package Manager Manage NuGet Packages For Solution you can locate the latest version of JQuery and download it in your solution You can also do with the other libraries and tools NuGet is really great because when you install a package through NuGet it copies all the files to the solution adding references and making changes to the web config Find more about Nuget in this post Please have a look at the picture below In the next post I will make some changes in the css files and master pages to give a unique look and feel to our site Hope it helps Posted Τρίτη 25 Σεπτεμβρίου 2012 10 11 πμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία jquery Code First html5 LocalDB EF 5 0 ASP NET 4 5 Using Native Drag and Drop in HTML 5 pages This is going to be the eighth post in a series of posts regarding HTML 5 You can find the other posts here here here here here here and here In this post I will show you how to implement Drag and Drop functionality in an HTML 5 page using JQuery This is a great functionality and we do not need to resort anymore to plugins like Silverlight and Flash to achieve this great feature This is also called a native approach on Drag and Drop I will use some events and I will write code to respond when these events are fired As I said earlier we need to write Javascript to implement the drag and drop functionality I will use the very popular JQuery Library Please download the library minified version from http jquery com download I will create a simple HTML page There will be two thumbnails pics on it There will also be the drag and drop area where the user will drag the thumb pics into it and they will resize to their actual size The HTML markup for the page follows doctype html html lang en head title Liverpool Legends Gallery title meta charset utf 8 link rel stylesheet type text css href style css script type text javascript charset utf 8 src jquery 1 8 1 min js script script language JavaScript src drag js script head body header h1 A page dedicated to Liverpool Legends h1 h2 Drag and Drop the thumb image in the designated area to see the full image h2 header div id main img src thumbs steven gerrard jpg big large images steven gerrard large jpg alt John Barnes img src thumbs robbie fowler jpg big large images robbie fowler large jpg alt Ian Rush div id drag p Drop your image here p div body html There is nothing difficult or fancy in the HTML markup above I have a link to the external JQuery library and another javascript file that I will implement the whole drag and drop functionality The code for the css file style css follows main float left width 340px margin right 30px drag float left width 400px height 300px background color c0c0c0 These are simple CSS rules This post cannot be a tutorial on CSS For all these posts I assume that you have the basic HTML CSS Javascript skills Now I am going to create a javascript file drag js to implement the drag and drop functionality I will provide the whole code for the drag js file and then I will explain what I am doing in each step function var players main img players attr draggable true players bind dragstart function event var data event originalEvent dataTransfer var src this attr big data setData Text src return true var target drag target bind drop function event var data event originalEvent dataTransfer var src data getData Text var img img img attr src src this html img if event preventDefault event preventDefault return false target bind dragover function event if event preventDefault event preventDefault return false players bind dragend function event if event preventDefault event preventDefault return false In these lines var players main img players attr draggable true We grab all the images in the main div and store them in a variable and then make them draggable Then in following lines I am using the dragstart event players bind dragstart function event var data event originalEvent dataTransfer var src this attr big data setData Text src return true In this event I am associating the custom data attribute value with the item I am dragging Then I create a variable to get hold of the dropping area var target drag Then in the following lines I implement the drop event and what happens when the user drops the image in the designated area on the page target bind drop function event var data event originalEvent dataTransfer var src data getData Text var img img img attr src src this html img if event preventDefault event preventDefault return false The dragend event is fired when the user has finished the drag operation players bind dragend function event if event preventDefault event preventDefault return false When this method event preventDefault is called the default action of the event will not be triggered Please have a look a the picture below to see how the page looks before the drag and drop takes place Then simply I drag and drop a picture in the dropping area Have a look at the picture below It works Hope it helps Posted Τρίτη 18 Σεπτεμβρίου 2012 5 56 μμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία asp net html5 native drag drop Using CSS3 media queries in HTML 5 pages This is going to be the seventh post in a series of posts regarding HTML 5 You can find the other posts here here here here here and here In this post I will provide a hands on example on how to use CSS 3 Media Queries in HTML 5 pages This is a very important feature since nowadays lots of users view websites through their mobile devices Web designers were able to define media specific style sheets for quite a while but have been limited to the type of output The output could only be Screen Print The way we used to do things before CSS 3 was to have separate CSS files and the browser decided which style sheet to use Please have a look at the snippet below HTML 4 media queries link rel stylesheet type text css media screen href styles css link rel stylesheet type text css media print href print styles css Τhe browser determines which style to use With CSS 3 we can have all media queries in one stylesheet Media queries can determine the resolution of the device the orientation of the device the width and height of the device and the width and height of the browser window We can also include CSS 3 media queries in separate stylesheets In order to be absolutely clear this is not and could not be a detailed tutorial on HTML 5 There are other great resources for that Navigate to the excellent interactive tutorials of W3School Another excellent resource is HTML 5 Doctor Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http caniuse com and http html5test com At this times Chrome seems to support most of HTML 5 specifications Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr In this hands on example I will be using Expression Web 4 0 This application is not a free application You can use any HTML editor you like You can use Visual Studio 2012 Express edition You can download it here Before I go on with the actual demo I will use the http www caniuse com to see the support for CSS 3 Media Queries from the latest versions of modern browsers Please have a look at the picture below We see that all the latest versions of modern browsers support this feature We can see that even IE 9 supports this feature Let s move on with the actual demo This is going to be a rather simple demo I create a simple HTML 5 page The markup follows and it is very easy to use and understand This is a page with a 2 column layout DOCTYPE html html lang en head title HTML 5 CSS3 and JQuery title meta http equiv Content Type content text html charset utf 8 link rel stylesheet type text css href style css head body div id header h1 Learn cutting edge technologies h1 p HTML 5 JQuery CSS3 p div div id main div id mainnews div h2 HTML 5 h2 div div p HTML5 is the latest version of HTML and XHTML The HTML standard defines a single language that can be written in HTML and XML It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications an area previously not adequately covered by HTML p div class quote h4 Do More with Less h4 p jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing event handling animating and Ajax interactions for rapid web development p div p The HTML5 test html5test com score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications Even though the specification isn t finalized yet all major browser manufacturers are making sure their browser is ready for the future Find out which parts of HTML5 are already supported by your browser today and compare the results with other browsers The HTML5 test does not try to test all of the new features offered by HTML5 nor does it try to test the functionality of each feature it does detect Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform p div div div id CSS div h2 CSS 3 Intro h2 div div p Cascading Style Sheets CSS is a style sheet language used for describing the presentation semantics the look and formatting of a document written in a markup language Its most common application is to style web pages written in HTML and XHTML but the language can also be applied to any kind of XML document including plain XML SVG and XUL p div div div id CSSmore div h2 CSS 3 Purpose h2 div div p CSS is designed primarily to enable the separation of document content written in HTML or a similar markup language from document presentation including elements such as the layout colors and fonts 1 This separation can improve content accessibility provide more flexibility and control in the specification of presentation characteristics enable multiple pages to share formatting and reduce complexity and repetition in the structural content such as by allowing for tableless web design p div div div div id footer p Feel free to google more about the subject p div body html The CSS code style css follows body line height 30px width 1024px background color eee p font size 17px font family Comic Sans MS p h2 h3 h4 margin 0 0 20px 0 main header footer width 100 margin 0px auto display block header text align center border bottom 1px solid 000 margin bottom 30px footer text align center border top 1px solid 000 margin bottom 30px quote width 200px margin left 10px padding 5px float right border 2px solid 000 background color F9ACAE quote last child margin bottom 0 main column count 2 column gap 20px column rule 1px solid 000 moz column count 2 webkit column count 2 moz column gap 20px webkit column gap 20px moz column rule 1px solid 000 webkit column rule 1px solid 000 Now I view the page in the browser Now I am going to write a media query and add some more rules in the css file in order to change the layout of the page when the page is viewed by mobile devices media only screen and max width 480px body width 480px main moz column count 1 webkit column count 1 I am specifying that this media query applies only to screen and a max width of 480 px If this condition is true then I add new rules for the body element I change the number of columns to one This rule will not be applied unless the maximum width is 480px or less As I decrease the size width of the browser window I see no change in the column s layout Have a look at the picture below When I resize the window and the width of the browser so the width is less than 480px the media query and its respective rules take effect We can scroll vertically to view the content which is a more optimised viewing experience for mobile devices Have a look at the picture below Hope it helps Posted Τρίτη 18 Σεπτεμβρίου 2012 10 47 πμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία asp net html5 css3 media queries Using rounded corners in modern websites with CSS3 This is going to be the sixth post in a series of posts regarding HTML 5 You can find the other posts here here here here and here In this post I will provide a hands on example on how to use rounded corners rounded corners in CSS3 in your website I think this is the feature that is most required in the new modern websites Most websites look great with their lovely round panels and rounded corner tab style menus We could achieve that effect earlier but we should resort to complex CSS rules and images I will show you how to accomplish this great feature with the power of CSS 3 We will not use Javascript Javascript is required for IE 7 IE 8 and the notorious IE 6 The best solution for implementing corners using CSS and Javascript without using images is Nifty corners cube There are detailed information how to achieve this in the link I provided This solution is tested in earlier vesrions of IE IE 6 IE 7 IE 8 and Opera Firefox Safari In order to be absolutely clear this is not and could not be a detailed tutorial on HTML 5 There are other great resources for that Navigate to the excellent interactive tutorials of W3School Another excellent resource is HTML 5 Doctor Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http caniuse com and http html5test com At this times Chrome seems to support most of HTML 5 specifications Another excellent way to find out if the browser supports HTML 5 and CSS 3 features is to use the Javascript lightweight library Modernizr In this hands on example I will be using Expression Web 4 0 This application is not a free application You can use any HTML editor you like You can use Visual Studio 2012 Express edition You can download it here Before I go on with the actual demo I will use the http www caniuse com to see the support for web fonts from the latest versions of modern browsers Please have a look at the picture below We see that all the latest versions of modern browsers support this feature We can see that even IE 9 supports this feature Let s move on with the actual demo This is going to be a rather simple demo I create a simple HTML 5 page The markup follows and it is very easy to use and understand DOCTYPE html html lang en head title HTML 5 CSS3 and JQuery title meta http equiv Content Type content text html charset utf 8 link rel stylesheet type text css href style css head body div id header h1 Learn cutting edge technologies h1 div div id main h2 HTML 5 h2 p id panel1 HTML5 is the latest version of HTML and XHTML The HTML standard defines a single language that can be written in HTML and XML It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications an area previously not adequately covered by HTML p div body html Then I need to write the various CSS rules that style this markup I will name it style css body line height 38px width 1024px background color eee text align center panel1 margin auto text align left background color 77cdef width 400px height 250px padding 15px font size 16px font family tahoma color fff border radius 20px Have a look below to see what my page looks like in IE 10 This is possible through the border radious property The colored panel has all four corners rounded with the same radius We can add a border to the rounded corner panel by adding this property declaration in the panel1 border 4px 000 solid We can have even better visual effects if we specify a radius for each corner This is the updated version of the style css body line height 38px width 1024px background color eee text align center panel1 margin auto text align left background color 77cdef border 4px 000 solid width 400px height 250px padding 15px font size 16px font family tahoma color fff border top left radius 20px border top right radius 70px border bottom right radius 20px border bottom left radius 70px This is how my page looks in Firefox 15 0 1 In this final example I will show you how to style with CSS 3 rounded corners a horizontal navigation menu This is the new version of the HTML markup DOCTYPE html html lang en head title HTML 5 CSS3 and JQuery title meta http equiv Content Type content text html charset utf 8 link rel stylesheet type text css href style css head body div id header h1 Learn cutting edge technologies h1 div div id nav ul li a class mymenu id activelink href http weblogs asp net controlpanel blogs posteditor aspx SelectedNavItem Posts ionid 1153 postid 8934038 Main a li li a class mymenu href http weblogs asp net controlpanel blogs posteditor aspx SelectedNavItem Posts ionid 1153 postid 8934038 HTML 5 a li li a class mymenu href http weblogs asp net controlpanel blogs posteditor aspx SelectedNavItem Posts ionid 1153 postid 8934038 CSS 3 a li li a class mymenu href http weblogs asp net controlpanel blogs posteditor aspx SelectedNavItem Posts ionid 1153 postid 8934038 JQuery a li ul div div id main h2 HTML 5 h2 p id panel1 HTML5 is the latest version of HTML and XHTML The HTML standard defines a single language that can be written in HTML and XML It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications an area previously not adequately covered by HTML p div body html This is the updated version of style css body line height 38px width 1024px background color eee text align center panel1 margin auto text align left background color 77cdef border 4px 000 solid width 400px height 250px padding 15px font size 16px font family tahoma color fff border top left radius 20px border top right radius 70px border bottom right radius 20px border bottom left radius 70px nav ul width 900px position relative top 24px ul li text decoration none display inline ul li a mymenu font family Tahoma color black font size 14px font weight bold background color 77cdef color fff border top left radius 18px border top right radius 18px border 1px solid black padding 15px padding bottom 10px margin 2px text decoration none border bottom none mymenu hover background color e3781a color black The CSS rules are the classic rules that are extensively used for styling menus The border radius property is still responsible for the rounded corners in the menu This is how my page looks in Chrome version 21 Hope it helps Posted Δευτέρα 17 Σεπτεμβρίου 2012 5 22 μμ από nikolaosk 0 σχόλια Δημοσίευση στην κατηγορία asp net html5 css3 rounded corners Using real fonts in HTML 5 CSS 3 pages This is going to be the fifth post in a series of posts regarding HTML 5 You can find the other posts here here here and here In this post I will provide a hands on example on how to use real fonts in HTML 5 pages with the use of CSS 3 Font issues have been appearing in all websites and caused all sorts of problems for web designers The real problem with fonts for web developers until now was that they were forced to use only a handful of fonts CSS 3 allows web designers not to use only web safe fonts These fonts are in wide use in most user s operating systems Some designers when they wanted to make their site stand out resorted in various techniques like using images instead of fonts That solution is not very accessible friendly and definitely less SEO friendly CSS through CSS3 s Fonts module 3 allows web developers to embed fonts directly on a web page First we need to define the font and then attach the font to elements Obviously we have various formats for fonts Some are supported by all modern browsers and some are not The most common formats are

    Original URL path: http://www.dotnetzone.gr/cs/blogs/dotnetrules/archive/tags/html5/default.aspx (2015-07-15)
    Open archived version from archive

  • Dot Net Rules
    ASP NET MVC 4 0 ASP NET Web Api ASPNETDB MDF ASPxGridView browser C c 3 0 c 4 0 C 3 0 caching client side Code First concurrency CSS css3 data access layer databinding datasets DevExpress disconnected model DNN 7 0 dotnetnuke EF 5 0 Entity framework Entity Framework 6 0 enum support forms authentication general net host wcf HTML HTML 5 html5 IE8 interface Javascript jquery Lambdas lazy loading LINQ LINQ to Entities LINQ to objects Linq to Sql LocalDB Localisation performance POCOS Polymorphism routing scaffolding ScriptManager SEO session state silverlight Sql Server Sql Server 2005 SQL Server 2008 sql server 2012 sqlcommand SQLDataReader stored procedures tables tips and tricks Tracing transaction log transactions UpdatePanel validation VB 2005 VB 2008 VB 9 0 ViewState Visual Basic 10 0 Visual Studio Visual Studio 2005 Visual Studio 2008 Visual Studio 2010 Visual Studio 2012 VS 2010 VS 2012 WCF wcf data service web server controls web service web config window forms windows forms WPF XAML XHTML XML XML Literals Πλοήγηση Αρχική σελίδα Εκδηλώσεις Ιστολόγια Συζητήσεις Εκθέσεις Φωτογραφιών Αρχειοθήκες Ιστορικό Δημοσιεύσεων Ιούνιος 2015 4 Μάρτιος 2015 2 Ιούνιος 2014 1 Δεκέμβριος 2013 2 Νοέμβριος 2013 14 Οκτώβριος 2013 2 Σεπτέμβριος 2013 5 Ιούλιος 2013 1 Ιανουάριος 2013 8 Δεκέμβριος 2012 11 Νοέμβριος 2012 3 Οκτώβριος 2012 12 Σεπτέμβριος 2012 16 Αύγουστος 2012 6 Ιούλιος 2012 13 Ιούνιος 2012 3 Μάιος 2012 4 Απρίλιος 2012 15 Μάρτιος 2012 8 Ιανουάριος 2012 3 Δεκέμβριος 2011 7 Νοέμβριος 2011 13 Οκτώβριος 2011 6 Σεπτέμβριος 2011 8 Αύγουστος 2011 6 Ιούλιος 2011 2 Μάιος 2011 1 Μάρτιος 2011 9 Φεβρουάριος 2011 15 Ιανουάριος 2011 14 Δεκέμβριος 2010 9 Νοέμβριος 2010 2 Οκτώβριος 2010 11 Σεπτέμβριος 2010 1 Αύγουστος 2010 3 Απρίλιος 2010 2 Μάρτιος 2010 5 Ιανουάριος 2010 1 Οκτώβριος 2009 2 Σεπτέμβριος 2009 4

    Original URL path: http://www.dotnetzone.gr/cs/blogs/dotnetrules/archive/tags/IE8/default.aspx (2015-07-15)
    Open archived version from archive



  •