60+ Best HTML Admin & Dashboard Templates 2017

The UI of a web application is extremely important to it’s success, a poor user experience can make using the product a chore whereas a great interface can speed up productivity, reduce customer support queries and increase customer retention. If you are the creator of a web app, SAAS, online software or just need an admin section for your website users, then investing a good admin dashboard theme can be a very wise investment.

In this collection we are looking at pre-made admin dashboard templates, these have been coded with technologies such as HTML5 and CSS3, making use of frameworks such as Bootstrap, jQuery, Angular JS, React and others. They are all beautifully designed so will make your product look highly professional so you can can show it off in marketing screenshots and videos. They also include many different types of features such as charts, graphs, maps, overlays and more so you can tailor them to your product’s needs.

Take a look below at our collection of over 60 of the Best HTML Admin and Dashboard Templates.

StartUI

StartUI – a full featured, premium web application admin dashboard built with Twitter Bootstrap 4, JQuery and CSS (Less). It comes with a lot of ready to use components ideal for building your web application, CMS, CRM, admin panel, eCommerce dashboard, or any other type of application backend. StartUI coded highly responsive for your mobile phone & tablets. Completely modular with many unique features, it will help you build your next awesome product.


startui

More Info & Demo

Umega

Umega is a fully responsive admin dashboard template, easy customization and lightweight which is basically designed for the developers. It follows the best practices using the latest technologies and I really hope that you will enjoy working with it.


umega

More Info & Demo

Marino

Marino – Bootstrap 4 Dashboard UI Kit


marino

More Info & Demo

MyAdmin

MyAdmin Template is fully responsive premium bootstrap admin template ideal for your business. MyAdmin can used for all type of web applications, such as custom admin panel, project management system, admin dashboard, application backend, CMS, CRM, etc.


myadmin

More Info & Demo

Tectonic

Tectonic is a beautifully designed admin dashboard template that caters to a wide range of necessities. With over 250 demos, Tectonic is easily one of the most complete admin themes out there.


tectonic

More Info & Demo

Infinity

Infinity is a responsive Bootstrap 3.3.6 Admin Template. It provides you with a vast collection of ready to use code snippets and utilities many custom pages and a collection of applications and widgets.


infinity

More Info & Demo

Aero

Aero Admin is a Material Design based admin template. Using the Materialize CSS framework, we provide a clean and customizable dashboard to meet all your needs. Aero Admin was developed with passion to another passionate developers.


aero

More Info & Demo

Metrika

Metrika is a responsive material design built specifically for AngularJs. Using Google’s own Material Design framework for Angular with custom services, directives, icons and styling (material.angularjs.org) together with the power of Bootstrap for making layout as easy as ever. Create your own Material themes with color combinations and bringing true material components into bootstrap.


metrika

More Info & Demo

Rainbow

Rainbow is a colorful responsive admin web App built with Bootstrap & AngularJS. It uses Sass CSS which makes it easy to modify.


rainbow

More Info & Demo

Milestone

Milestone is an elegant and creative Bootstrap 4 admin template that comes out of the box with a myriad of layout options and features to help you build your next dashboard. Milestone features a huge set of reusable components, a tonne of plugins, different layouts and is easy to customise to individual needs.


milestone

More Info & Demo

Uplon

Uplon is a fully responsive premium web UI kit built with awesome bootstrap v4. It comes with super clean user interfaces, many ready to use and highly customizable components and widgets. The power of SASS and easy code allows any developer to turn this theme into real web application.


uplon

More Info & Demo

Clean UI

Clean UI – a modern professional admin template, based on Bootstrap 4 framework. Clean UI is a powerful and super flexible tool, which suits best for any kind of web application: Web Applications; CRM; CMS; Admin Panels; Dashboards; etc. Clean UI is fully responsive, which means that it looks perfect on mobiles and tablets. Template includes Angular Starter Kit – a set of templates, that will make your developer’s life much easier.


cleanui

More Info & Demo

LearnPlus

LearnPlus is a beautifully crafted user interface for modern Learning web applications. LearnPlus includes examples for all the website pages possibly needed for a LMS application, covering the most important roles in any learning application, the student and the instructor.


learnplus

More Info & Demo

AdminK

AdminK is a fully responsive and 100% Retina ready bootstrap admin template. The template is perfect for your business, because it can used for all type of web applications, such as custom admin panel, project management system, admin dashboard, application backend, CMS, CRM, etc.


admink

More Info & Demo

Horizon

Horizon is a responsive dark admin template powered by Twitter Bootstrap Framework. Horizon has a simple set of UI elements and plugins to get your work done in the fastest time possible, with a user friendly and clean design to appeal to your customers.


horizon

More Info & Demo

Elite Admin

Eliteadmin is a premium admin dashboard template with flat design. It is fully responsive admin dashboard template built with Bootstrap 3.3.7 Framework, HTML5 and CSS3, Media query. It has a huge collection of reusable UI components and integrated with latest jQuery plugins. It can be used for all type of Web applications like custom admin panel, app backend, CMS or CRM.


elite

More Info & Demo

Alpha

The Alpha UI Framework is a premium Web Application Admin Dashboard built on top of MaterializeCSS Framework. It was created to be the most functional, clean and well designed template for any types of backend applications. We have carefully designed all common elements.


alpha

More Info & Demo

Material Design

Material is a Google Material Design inspired admin template built with Angular & Bootstrap.


material

More Info & Demo

Boooya

Boooya – powerful admin template based on newest technologies. This template is fully responsive and retina ready. It means that you can easily build your web application and be sure that it will work well on all devices. Also its included with unique plugins that developed specially for Boooya temaplte. In downloaded package you will find .less files, documentation, clean and commented source code. Atlant is easy to use and customize, also you will find lots of ready to use elements.


boooya

More Info & Demo

Varello Admin

VarelloAdmin is a fully-responsive, well-featured and highly-polished dark admin template. It includes both Static HTML and Laravel 5.2 Blade versions (includes application routes and controllers). It is a good fit for any kind of back-end application, whether it is administrative, statistical, management, CMS, dashboard, messaging, and much more. It is built for multi-purpose admin systems, and has been rigorously designed and tested to work responsively across Large/Medium Desktop, Tablet and Mobile devices, and in all modern browsers. This ensures it looks good, no matter the device you are using.


varello

More Info & Demo

Mara

Mara is a Material Design Multipurpose Admin Template with a huge collection of material design elements built on Materialize framework. Mara can be used for any type of web applications: custom admin panels, admin dashboards, CMS, CRM, SAAS and websites: CMSs, SAAS, CRM, HRMS, Support & Social network, Blog, E-commerce site, Personal page, Business site, Magazine.


mara

More Info & Demo

Dubli

Bootstrap Responsive Admin Web App with AngularJs


dubli

More Info & Demo

Zircos

Zircos is a premium, fully responsive web app UI kit. It has flat design and built with Bootstrap 3.3.7, HTML5, CSS3 and Jquery. It comes with bunch of reusable UI widgets, components, ready made pages. The clean and modular code will allow you to easily build any web application.


zircos

More Info & Demo

Boost

Boost is a responsive bootstrap admin dashboard template built with Twitter Bootstrap Framework and it has a huge collection of reusable UI components and integrated with jQuery plugins also. It is also easy to use and modify that is suitable to your needs and can be implemented to your desire projects such Project Management System, CRM, HRMS, Real Estate, Ecommerce, Loan Management System, Billing Management System and more.


boost

More Info & Demo

React

Building a single page application in Javascript? Interested in moving to React/Redux? Don’t start from scratch – build a scalable , highly polished admin application with React/Redux and Bootstrap that works great on mobile and tablet as well as desktop.


react

More Info & Demo

Deluxe

Deluxe is a Admin Template built with Bootstrap Framework is designed in the style flattening like material design. Deluxe has a huge collection of plugins and UI components and works seamlessly on all major web browsers, tablets and phones.


deluxe

More Info & Demo

Float

Float admin is a clean and powerful admin template based on Bootstrap3. It is built with modern technologies like sass, compass, ruby, bootstrap3, html5 and css3. Clean code and SASS files allows you to create and modify easily as per requirements. The template is fully responsive and easily fit into any devices. Huge collection of pre-made pages, plugins, UI elements, Jquery UI, SASS files, Light and dark skins, Landing page, 4+ layout options and many more advanced features make it the best choice for any web applications.


float

More Info & Demo

CSK Admin

Contains 300+ Pages, 20+Dashboards, 3+ Ecommerce Templates, 5+ Landing Pages & many more to come. Coming AngularJS Version


cskadmin

More Info & Demo

Penguin

Penguin is a clean and fully responsive Web app kit and admin dashboard template for developers


penguin

More Info & Demo

Rayan

Rayan is a responsive bootstrap admin dashboard template built with Twitter Bootstrap Framework and it has a huge collection of reusable UI components and integrated with jQuery plugins also. Rayan can be used for applications (CMS, CRM, Custom Admin Application, Admin Dashboard). Rayan template works on all major web browsers, Desktop, iPhone, iPad, Tablet and is any smart phone friendly.


rayan

More Info & Demo

Beagle

Beagle is a responsive admin template based on the famous Bootstrap framework, made it with love in every pixel, with tons of beautiful features ready to use.


beagle

More Info & Demo

Omega

Omega – Responsive Massive Admin Pack


omega

More Info & Demo

COLOURcode

COLOURcode has been born from decades of professional experience developing admin applications and designing interfaces. It is a new kind of admin template that will suit any application type, although it was specifically designed for those who like to use colour to boost usability through context and association. It is fully responsive, based on the latest Bootstrap 3, and has been extensively tested with recent desktop and mobile browsers. The CSS is constructed from Sass-based structured stylesheets, and the JavaScript is constructed from an easily extended custom modular framework with jQuery.


colourcode

More Info & Demo

Aside

Dashboard UI KIT for modern web application.


aside

More Info & Demo

Teamwork

Teamwork is a fully responsive and multipurpose Admin Template. The combination of SASS and Compass make it flexible and user friendly. Teamwork has large collection of features, UI elements, widgets, icons and libraries that make it multipurpose.


teamwork

More Info & Demo

Admin9

Admin9 is admin HTML template. Built with bootstrap and our creative designs. It comes with many predefined pages and component styled. We also include carts and tables. Clean code and CSS allows you to create and modify easily as per requirements. This is specially designed for large screens.


admin9

More Info & Demo

Pacificonis

Pacificonis is a premium admin dashboard template based on Bootstrap. There are a huge of powerful components build with SASS CSS which makes it easy to modify. It has a huge collection of reusable UI components and integrated with latest jQuery plugins. It can be easily integrated into your projects, allowing you to create solutions for your future designs quickly.


pacificonis

More Info & Demo

Arise

ARISE Admin Theme is a premium template comes with FIVE unique designs. It is fully responsive admin dashboard built with Bootstrap 3+ Framework, HTML5, CSS3 and Sass. It has a huge collection of reusable UI components and integrated with latest jQuery plugins. It can be used for all type of web applications like custom admin panel, project management system, admin dashboard, Backend application or CRM.


arise

More Info & Demo

Afro

AFRO is a fully responsive dashboard admin built with the Bootstrap Framework. It has tons of features and ready-to-use UI elements, widgets, charts and pages which are Highly customizable and easy to use.


afro

More Info & Demo

Elephant

Elephant is a front-end template created to help you develop modern web applications, fast and in a professional manner. Built on top of Bootstrap, it includes a large collection of HTML, CSS, and JS components that is simple to use and easy to customise. The file structure in the Elephant is similar to the HTML5 Boilerplate file structure, where the intention is for developers not to have problems and not waste time by trying to decrypt the fantasy, which is brought to you when buying a new product.


elephant

More Info & Demo

Master

Master is a beautifully admin template. It is fully responsive theme built with Bootstrap 3.3.7, HTML and uses Sass CSS which makes it easy to modify.


master

More Info & Demo

Peak

Peak – Material design Bootstrap 4 admin template


peak

More Info & Demo

Nexus

Nexus is a professional, modern, complete and flexible Admin template that can be used to build all kind of projects: Web Applications, Backend Websites, Custom Admin Panels, Admin Dashboards, CMS, CRM or even a Portfolio, Blog, Business Website. I encourage you to have a good look at live preview and discover all the included features!


nexus

More Info & Demo

Trata

Trata admin is a responsive admin & dashboard theme.this theme is build and powered with Twitter bootstrap 3.3.6. It has tons of features and ready-to-use UI elements, widgets, charts and pages which are Highly customizable and easy to use.


trata

More Info & Demo

Fit2Go

Fit2Go – beautiful gym fitness admin template is a bootstrap based admin template crafted targeting gyms, fitness and wellness centers. It comes with two modules Admin and User/Subscriber. Admin section contains all pages required to manage a fitness center with beautiful UI. It contains 20+ pages where gym owners can check finances, members and manage courses, events, news, holidays etc.


fit2go

More Info & Demo

Meteor

Meteor – a responsive and multipurpose admin dashboard template, based on latest Twitter Bootstrap framework. It’s super flexible and user friendly, as it’s compatible with any device. We put a lot of time and effort to create such a template, with many kinds of different layout variations and yet 3 layers, as many others are coming soon for the next updates. They can be changed just by changing a line of code, so you haven’t to worry about choosing another one! This makes Meteor an easily customizable tool for anyone.


meteor

More Info & Demo

Neptune

Neptune is a full featured dashboard UI kit for web application development built with Bootstrap 4. Comes with lots of ready to use widgets and components.


neptune

More Info & Demo

Xadmino

Xadmino is a bootstrap based fully responsive admin template. It comes with lots of reusable and beautiful UI elements, widgets and features. It allows developer to easily build a super awesome web application.


xadmino

More Info & Demo

Ninja

Ninja Admin is a fully featured premium admin template built with Bootstrap 3.3.7, HTML5, CSS3 and jQuery, beautiful features ready to use.


ninja

More Info & Demo

Kenny

Kenny Admin is a WebApp template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS Sass framework Bootstrap 3.3.6 It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Kenny Admin is based on a modular design, which allows it to be easily customized and built upon.


kenny

More Info & Demo

CoreNG

CoreNG is a Angular 2 theme built from the ground up with Angular CLI as your all in one build system and the Google backed Angular Material 2! We’ve put a lot of time into this theme, and we will continue to put in even more! When you buy this theme, you also get access to our private Git repository so you can follow along faster with updates, even contribute to the development of this theme.


coreng

More Info & Demo

Magna

The Magna is a premium Web Application Admin Dashboard built on top of MaterializeCSS Framework. It was created to be the most functional, clean and well designed template for any types of backend applications. We have carefully designed all common elements.


magna

More Info & Demo

Disclosure: Some of the links in this post may be “affiliate links.” This means if you click on the link and purchase an item, We will receive an affiliate commission

Continue reading 60+ Best HTML Admin & Dashboard Templates 2017

Resize ảnh với HTML5 FileReader

Khi lập trình web, các vấn đề liên quan đến hình ảnh được sử dụng thường xuyên, ví dụ upload hình ảnh sản phẩm, banner, logo….

Từ đây nảy sinh vài vấn đề như: muốn thấy hình ảnh đại diện ngay khi chọn file. Resize hình ảnh để tiết kiệm dung lượng…. Trước khi HTML5 ra đời, chúng ta thường hay giải quyết mọi thứ trên server, tức là upload ảnh lên server, sau đó xử lý. VD: dùng ajax để upload ảnh lên server, sau đó trả về ảnh đại diện…. Điều này dẫn đến tốn thời gian xử lý cho máy chủ, hoặc file lớn, mạng chậm thì user phải chờ đợi rất lâu.

Thật may mắn khi HTML5 ra đời, nó giúp chúng ta cả 2 việc trên luôn. Đó là preview (xem trước) hình ảnh ngay khi vừa chọn xong, đồng thời resize ảnh luôn ngay trên trình duyệt. Sau đó chúng ta chỉ việc upload mã base64 này lên server, và convert lại thành hình ảnh là xong, hoặc lưu luôn base64 vào database cũng ok.

HTML sử dụng API FileReader, nó có thể đọc file ảnh, file txt, khá là thú vị.

Code chọn ảnh xong hiển thị ảnh đại diện

<input id="imageFile" name="imageFile" type="file" class="imageFile"  accept="image/*"   /> 
<br/>
<img src="" id="preview"  >

Code javascript

$(document).ready(function() {

    $('#imageFile').change(function(evt) {

        var files = evt.target.files;
        var file = files[0];

        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
});

Các bạn chú ý, có sử dụng jQuery

Code resize hình ảnh

<input id="imageFile" name="imageFile" type="file" class="imageFile"  accept="image/*"   /> 
<input type="button" value="Resize Image"  onclick="ResizeImage()"/> 
<br/>
<img src="" id="preview"  >
<img src="" id="output">

Code javascript

function ResizeImage() {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var filesToUploads = document.getElementById('imageFile').files;
        var file = filesToUploads[0];
        if (file) {

            var reader = new FileReader();
            // Set the image once loaded into file reader
            reader.onload = function(e) {

                var img = document.createElement("img");
                img.src = e.target.result;

                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);

                var MAX_WIDTH = 400;
                var MAX_HEIGHT = 400;
                var width = img.width;
                var height = img.height;

                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                    }
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, width, height);

                dataurl = canvas.toDataURL(file.type);
                document.getElementById('output').src = dataurl;
            }
            reader.readAsDataURL(file);

        }

    } else {
        alert('The File APIs are not fully supported in this browser.');
    }
}

See the Pen Resize Image with HTML5 File Reader by tuanitpro (@tuanitpro) on CodePen.


Chúc các bạn thành công.

Cách thêm site mới vào IIS trên Windows 7, 8, 10

Chào các bạn.

Khi các bạn làm lập trình web, đặc biệt là rất nhiều bạn đang lập trình ASP.NET, ASP.NET MVC trên Visual Studio, mỗi lần cần phải chạy website lên để kiểm tra thì mất rất nhiều thời gian. Bạn nhấn F5 và chờ đợi. Tâm trạng cực kỳ ức chế. (Nếu máy tính của bạn cấu hình cao, SSD mới, RAM khủng, Core 7 thế hệ mới nhất thì chúc mừng bạn, bạn không cần quan tâm đến việc phải chờ đợi là mấy).

Và một lợi ích khá hay khi bạn dùng IIS để quản lý website của mình, đó là bạn sẽ biết cách chạy thực tế của một trang web như thế nào, sau này khi deploy sản phẩm bạn không cần phải tìm hiểu quá nhiều về nó nữa.

Khi đi demo sản phẩm cho khách hàng, hay demo đồ án, project với giáo viên, bạn không cần mở Visual Studio lên, vẫn demo ngon lành. Nếu có lỗi phần nào, bạn chỉ cần back lại mà không làm gián đoạn việc trình bày. Nếu bạn F5 bằng Visual, và có lỗi, chắc chắn là ấn tượng không được hay cho lắm. (Ở trường mình học, giáo viên không chấp nhận demo sản phẩm bằng việc F5 trong Visual Studio cho các sản phẩm web ASP.NET, phần mềm thì cũng nên đóng gói khi demo)

Với những lý do trên mà mình rất hay khuyên dùng IIS để chạy trang web của bạn. Nếu bạn đã biết làm thế nào để cài đặt IIS trên Windows của bạn, thì trong bài viết này hướng dẫn bạn cách thêm Site mới vào IIS.

Bài viết liên quan: Hướng dẫn cài đặt IIS trên Windows 7, 8, 10

Đầu tiên đây là dự án của tôi. Bình thường tôi dùng F5 để show kết quả, hoặc R_Click vào file nào đó chọn View in Browser (Ctrl + Shift + W). Bây giờ tôi không muốn thế nữa, nó trông không được chuyên nghiệp cho lắm, trừ khi bạn bắt buộc phải Debug.

add-site-vao-iis-2
[Hình 1 – Dự án website ASP.NET MVC]
Tôi cần xác định xem mình đang lưu code đó ở đâu? Ok, tìm thấy rồi

add-site-vao-iis-3
[Hình 2 – Thư mục chứa code của dự án Website]
Tiếp theo tôi sẽ mở IIS lên. Bạn có thể gõ IIS vào ô search tìm kiếm cho nhanh. Nếu không tìm thấy, hãy thử kiểm tra lại nhé, tôi có link cho bạn đây: http://tuanitpro.com/huong-dan-cai-dat-iis-tren-windows-7-8

add-site-vao-iis-1
[Hình 3 – Giao diện màn hình quản lý IIS]
Tôi đăng ký phiên bản của .NET cho Application Polls. Nếu bạn không tìm thấy dòng .NET CLR Version như bên dưới, hoặc chỉ có version 2.0 thì xem qua bài viết này nhé, http://tuanitpro.com/iis-7-5-error-handler-pagehandlerfactory-integrated

add-site-vao-iis-5
[Hình 4 – Đăng ký Application Polls IIS]
OK rồi. Qua Tab Sites

Chọn Sites -> Add Website, sau đó Nhập tên Website của bạn, nhấn Select chọn Application Poll. Tôi dùng MVC 5 nên chọn .NET 4.5

Trên dòng Physical path: Bạn chọn tới đường dẫn chứa thưa mục Web của bạn, chắc chắn có file Web.config với các ứng dụng web ASP.NET , bạn xem lại hình 2 của tôi nhé.

add-site-vao-iis-6
[Hình 5 – Thêm site mới vào IIS]
Nhấn OK, đây là màn hình quản lý riêng của Site tôi mới thêm vào.

add-site-vao-iis-7
[Hình 6 – Giao diện màn hình quản lý của Site Demo]
Cuối cùng, đây là kết quả của tôi.

add-site-vao-iis-8
[Hình 7 – Tân hưởng kết quả]
Chúc các bạn thành công.

Bài viết liên quan

Cách học lập trình ASP.NET MVC tốt nhất?

Bài viết được dịch từ trang web Danylkoweb

Cách học lập trình ASP.NET MVC tốt nhất là gì?
Cách học lập trình ASP.NET MVC tốt nhất là gì?

Gần đây tôi có tham dự một cuộc hội thảo CONDG hàng tháng và đã gặp một vài người có hứng thú trong việc học cách sử dụng ASP.NET MVC.

Thật trùng hợp, tôi cũng thấy có khá nhiều người trên mạng xã hội Quora hỏi về cách thức tốt nhất để học ASP.NET MVC. Ngoài việc thảo luận về cách tốt nhất để tìm hiểu nó, tôi cũng sẽ đưa ra những cách nhanh nhất để học lập trình ASP.NET MVC.

Học những kiến thức nền tảng trước

Nếu bạn là người chỉ mới bắt đầu làm quen với ASP.NET, thì bạn cần phải học VB.NET hoặc C# trước. Cả hai ngôn ngữ lập trình này là một phần của ASP.NET, do đó bạn cần phải quen thuộc với một (hoặc cả hai) ngôn ngữ.

Khi mới bắt đầu, tôi muốn giới thiệu tới bạn một cuốn sách C# của nhà xuất bản Apress có tên là Beginning C# Object-Oriented Programming của tác giả Dan Clark. Đây là một trong những cuốn sách có nội dung khá dễ hiểu dành cho người mới bắt đầu.

Nếu bạn là một người đã có kinh nghiệm lập trình trong (Java, C, C++, v.v…), thì tôi muốn giới thiệu tới bạn một cuốn sách khác từ Apress tên là Pro C# 5.0 and the .NET 4.5 Framework của tác giả Andrew Troelsen.

Bây giờ bạn biết mọi thứ về C#, lúc này bạn sẽ chuyển sang ASP.NET MVC.

Nếu bạn đang quan tâm đến cách làm thế nào để bắt đầu học Lập trình website với ASP.NET MVC thì tôi đang có Khóa học Lập trình ASP.NET MVC dành cho bạn đấy. Hình thức học linh hoạt, giúp bạn cách tiếp cận hoàn toàn khác biệt sách vở.

Bắt đầu tìm hiểu về ASP.NET MVC

Bạn có biết ASP.NET MVC là một nền tảng mã nguồn mở của Microsoft giúp cho công việc phát triển web của bạn trở nên dễ dàng hơn so với công nghệ trước đó của họ được gọi là WebForms. MVC là cụm từ viết tắt của Model-View-Controller. Đây là một pattern về kiến trúc phần mềm đã được hình thành từ những năm 1970 và 80.

Cách nhanh nhất để tìm hiểu một công nghệ mới là tìm hiểu sâu về cách mọi thứ hoạt động. Một cách để làm điều này đó là bạn hãy tải về và xem xét vòng đời của một ứng dụng web MVC. Đây là một tài liệu rất dễ hiểu và bổ ích. Tất cả mọi thứ được giải thích cho bạn qua những chi tiết cụ thể. Thậm chí tôi đã in nó ra và dán lên tường nơi bàn làm việc của mình.

Nếu bạn đang tìm kiếm một tài liệu để đọc, thì tôi muốn giới thiệu tới bạn cuốn sách có tên là Pro ASP.NET MVC 5 của tác giả Adam Freeman. Tôi đã thu được rất nhiều kiến thức cơ bản về lập trình ASP.NET MVC trong cuốn sách này và vẫn tham khảo lại khi cần.

Những khóa học lập trình trực tuyến

Nếu bạn đang tìm kiếm một khóa học lập trình trực tuyến chất lượng, thì một trong những trang web tôi yêu thích và thường hay lui tới là Pluralsight. Pluralsight có hơn 1.000 khóa học về tất cả mọi thứ từ lập trình web tới di động và ảo hóa. Bạn phải trả $30/tháng và tham gia các khóa học không giới hạn.

Về các khóa học ASP.NET MVC, tôi muốn giới thiệu tới bạn các khóa học Pluralsight sau đây:

  • ASP.NET MVC 5 Fundamentals – Scott Allen
  • Automated ASP.NET MVC Testing: End to End – Jason Roberts
  • Architecting Applications for the Real World in .NET – Cory House

Hầu hết các khóa học này có thời lượng từ 2 đến 3 giờ, bởi vậy bạn hãy dành đủ thời gian để hoàn thành các khóa học chất lượng này nhé!

Tạo ra một sản phẩm thú vị

Cuối cùng, hãy bắt đầu áp dụng kiến thức bạn đã học được bằng cách xây dựng một sản phẩm gì đó. Bạn đã học đến lúc này, tại sao lại không bắt đầu xây dựng một ứng dụng web? Dưới đây là một vài ý tưởng để giúp bạn bắt đầu:

  • Tạo ra một ứng dụng dạng To-do list (danh sách công việc phải làm)
  • Xây dựng một danh sách liên lạc (contact list)
  • Viết một blog nhỏ

Kết luận

Ưu điểm của phương pháp học này là bạn có thể áp dụng kiến thức đã học vào thực tế một cách nhanh chóng. Và bạn cũng có thể áp dụng cách học này cho những ngôn ngữ lập trình khác.

Viết code trong các ngôn ngữ lập trình khác sẽ trở nên ngày càng dễ dàng hơn cùng với kinh nghiệm mà bạn đã tạo ra cho chính mình.

Bạn có cách nào nhanh hơn để tìm hiểu về ASP.NET MVC? Hãy để lại ý kiến của mình trong phần bình luận phía dưới nhé!

Về tác giả bài viết:

hoc-lap-trinh-truc-tuyen-online-aspnet-mvc-tot-nhat-14012016-2Tác giả bài viết là Jonathan Danylko. Anh là người có trên 30 năm kinh nghiệm lập trình và hiện nay Jonathan đang tập trung vào lĩnh vực ASP.NET MVC Best Practices, Code Exorcisms (refactorings)…

 

Nguồn bài dịch: Techmaster.vn

ASP.NET MVC: Route a .html request to an MVC route

For a SPA application I’m building I need to accept requests to .html files although I didn’t use static html files but razor views instead. To get this working inside ASP.NET MVC is a little bit harder than you would expect. So here are the required steps:

  • Add a handler mapping  in your web.config that will point *.html requests to the TransferRequestHandler. Therefore add the following section to the<system.webServer> node:

<modules runAllManagedModulesForAllRequests=”true”>

<handlers>
      <add name="HtmlFileHandler" path="*.html" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/>
  </handlers>
  • Add a custom route. Open up App_Start/RouteConfig.cs and it to the RegisterRoutes call:
routes.MapRoute( 
                name: "Durandal App Views", 
                url: "App/features/{viewName}.html", 
                defaults: new { controller = "DurandalView", action = "Get" } 
            );

For MVC 5

 [Route("news/{slug}/{id}.html")]


 

Creating a DropDownList for Enums in ASP.NET MVC

Introduction

I will be using two approaches to populate a DropDownList. The first one is simple in which I populate the DropDownList by an enum using SelectListItem while in the other approach, I create an HTML Helper method to populate the DropDownList. Let’s see each one.

Create an enum, ActionType, under the Models folder, as in the following code snippet.

namespace DropdownExample.Models
{
    public enum ActionType
    {
        Create=1,
        Read=2,
        Update=3,
        Delete=4
    }
}

Approach 1: Populate DropDownList by SelecteListItem using Enum

I populate the DropDownList using a SelectListItem type list. So we need to first create a list from an enum and thereafter that list binds with the DropDownListFor method of the HTML Helper class on the view. Create a model (ActionModel class) under the Models folder.

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
namespace DropdownExample.Models
{
    public class ActionModel
    {
        public ActionModel()
        {
            ActionsList = new List<SelectListItem>();
        }
        [Display(Name="Actions")]
        public int ActionId { get; set; }
        public IEnumerable<SelectListItem> ActionsList { get; set; }       
    }
}

Now create a controller action method in the Action Controller (ActionController.cs) that returns a view that binds with the model.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using DropdownExample.Models;
namespace DropdownExample.Controllers
{
    public class ActionController : Controller
    {
        public ActionResult Index()
        {
            ActionModel model = new ActionModel();
            IEnumerable<ActionType> actionTypes = Enum.GetValues(typeof(ActionType))
                                                       .Cast<ActionType>();
            model.ActionsList = from action in actionTypes
                                select new SelectListItem
                                {
                                    Text = action.ToString(),
                                    Value = ((int)action).ToString()
                                };
            return View(model);
        }
    }
}

Create a View (Index.cshtml) under the subfolder Action under the Views folder.

@model DropdownExample.Models.ActionModel
@{
    ViewBag.Title = "Index";
} 
@Html.LabelFor(model=>model.ActionId)
@Html.DropDownListFor(model=>model.ActionId, Model.ActionsList)

Run the application and we get the results as in Figure 1.1.

Creating a DropDownList for Enums in ASP.NET MVC
Figure 1.1 Populate DropDownList by Enums

Approach 2: Populate the DropDownList by HTML Helper method for the Enum

I create an HTML Helper extension method to populate a dropdown list using an enum. Create an extension method EnumDropDownListFor in the Extension class under the Models folder.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Web.Mvc;
using System.Web.Mvc.Html; 
namespace DropdownExample.Models
{
    public static class Extension
    { 
        public static MvcHtmlString EnumDropDownListFor<TModel, TProperty, TEnum>(
                    this HtmlHelper<TModel> htmlHelper,
                    Expression<Func<TModel, TProperty>> expression, 
                    TEnum selectedValue)
        {
            IEnumerable<TEnum> values = Enum.GetValues(typeof(TEnum))
                                        .Cast<TEnum>(); 
            IEnumerable<SelectListItem> items = from value in values
                                                select new SelectListItem()
                                                {
                                                    Text = value.ToString(),
                                                    Value = value.ToString(),
                                                    Selected = (value.Equals(selectedValue))
                                                }; 
            return SelectExtensions.DropDownListFor(htmlHelper,expression, items);
        }
    }
}

Create a model (ActionTypeModel class) under the Models folder.

using System.ComponentModel.DataAnnotations;
namespace DropdownExample.Models
{
    public class ActionTypeModel
    {
        [Display(Name = "Actions")]
        public int ActionId { get; set; }
        public ActionType ActionTypeList { get; set; }
    }
}

Now create a controller action method ActionTypes() in the Action Controller (ActionController.cs) that returns a view that binds with the model.

public ActionResult ActionTypes()
{
     ActionTypeModel model = new ActionTypeModel();
     return View(model);
}

Create a View (ActionTypes.cshtml) under the subfolder Action under the Views folder

@model DropdownExample.Models.ActionTypeModel
@using DropdownExample.Models;
@{
    ViewBag.Title = "Action Types";
}
@Html.LabelFor(model => model.ActionId)
@Html.EnumDropDownListFor(model => model.ActionId,Model.ActionTypeList)

Run the application and we get the same result as in Figure 1.1.

Conclusion

Finally we have created an HTML helper extension method for a dropdown list that populates by enum type.

In Use

@Html.DropDownList("DisplayFlag", Enum.GetNames(typeof(DLUProject.Domain.DisplayFlagSlider)).Select(e => new SelectListItem { Text = e }), "--ALL--", htmlAttributes: new { @style = "width:150px", @class = "form-control" })

Source: http://www.codeproject.com/Articles/662968/Creating-a-DropDownList-for-Enums-in-ASP-NET-MVC

CRUD using Ajax in ASP.NET MVC

Trong quá trình học và làm lập trình, bạn thường nghe nói nhiều đến Ajax, được khuyên dùng Ajax trong nhiều câu trả lời. Vậy ajax là gì? Ứng dụng ajax vào có khó hay không? Trong video dưới đây mình sẽ hướng dẫn các bạn cách thêm, xóa, sửa, lấy dữ liệu bằng Ajax trong ASP.NET MVC (Các bạn hoàn toàn có thể ứng dụng vào cho ngôn ngữ lập trình khác như PHP chằng hạn…)

Video Demo CRUD using Ajax in ASP.NET MVC

Tóm tắt Video
  • Ajax là gì?
  • Tạo Cơ sở dữ liệu bảng Student (lưu thông tin sinh viên)
  • Tạo dự án ASP.NET MVC mới
  • Tạo class xử lý thêm, xóa sửa
  • Tạo form thêm sinh viên
  • Viết code cho Controller
  • Viết code cho file javascript
Bạn hoàn toàn có thể ứng dụng Ajax trong nhiều trường hợp: đăng nhập, đăng ký, tìm kiếm thông tin, giỏ hàng….
Nếu bạn đã hoàn thành theo hướng dẫn mà vẫn gặp khó khăn, hãy tải mã nguồn ứng dụng tại đây:  Download

Cảm ơn bạn đọc và mình luôn đánh giá cao phản hồi của bạn.

IIS 7.5 error: Handler “PageHandlerFactory-Integrated”

IIS 7.5 error: Handler “PageHandlerFactory-Integrated” has a bad module “ManagedPipelineHandler” in its module list

Today I installed Clean Windows Web Server 2008 R2 64-bit with IIS 7.5. To my surprise opening .NET 4.0 application I received the following error:

http-error-500.21-pagehandlerfactory-integrated


IIS 7.5 Detailed Error - 500.21 - Internal Server Error


Server Error in Application "DEFAULT WEB SITE"
Internet Information Services 7.5


[Error Summary]
HTTP Error 500.21 - Internal Server Error
Handler "PageHandlerFactory-Integrated" has a bad module "ManagedPipelineHandler" in its module list


[Detailed Error Information]
Module IIS Web Core
Notification ExecuteRequestHandler
Handler PageHandlerFactory-Integrated
Error Code 0x8007000d
Requested URL http://localhost:80/default.aspx
Physical Path C:\inetpub\wwwroot\default.aspx
Logon Method Anonymous
Logon User Anonymous


[Most likely causes:]
•Managed handler is used; however, ASP.NET is not installed or is not installed completely.
•There is a typographical error in the configuration for the handler module list.


[Things you can try:]
•Install ASP.NET if you are using managed handler.
•Ensure that the handler module's name is specified correctly. Module names are case-sensitive and use the format modules="StaticFileModule, DefaultDocumentModule, DirectoryListingModule".


[Links and More Information]
IIS core does not recognize the module.
View more information »

As it turns out, some glitch caused this problem, and somehow .NET was not registered with IIS.

Running the following commands solved this issue:

%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_regiis.exe -i
%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_regiis.exe -i

Javascript Popup Window to return value to Parent Window

Chào các bạn.
Khi lập trình, hay thiết kế web chúng ta có nhu cầu lấy dữ liệu từ một trang thứ 2 mà không muốn load lại trang chính. Chúng ta có thể dùng popup windows. Ví dụ như chọn một sản phẩm từ danh sách sản phẩm, chọn một nhân viên từ danh sách…. Tất nhiên cũng ta vẫn còn có nhiều cách khác nhau.

Javascript Popup Window to return value to parent window
Javascript Popup Window to return value to parent window

Hướng dẫn sau cho phép bạn tạo một trang popup và lấy dữ liệu đưa vào form của chúng ta. Đây chỉ là code HTML và Javascript, vậy nên bạn có thể áp dụng bất cứ chỗ nào bạn muốn (PHP, ASP.NET, MVC….).

Chúng ta cần 2 file. 1 file chứa form (parent) và 1 file chứa dữ liệu chúng ta muốn lấy (child).

Code trang parent.html

<body>
    <div class="container">
        <h3>Javascript Popup Window to return value to parent Window</h3>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Họ tên:&nbsp;
                </td>

                <td>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Chọn nhân viên..." id="txtName">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" onclick="SelectName()">Chọn...</button>
                        </span>
                    </div><!-- /input-group -->
                </td>
            </tr>
        </table>
        <br />
        <p>            
            <a href="http://tuanitpro.comjavascript-popup-window-to-return-value-to-parent-window">Hướng dẫn lấy dữ liệu từ Popup Javascript.</a>
        </p>
        <script type="text/javascript">
            var popup;
            function SelectName() {
                popup = window.open("/Home/Popup", "Popup", "width=400,height=300"); // Thay dường dẫn file bạn muốn mở
                popup.focus();
            }
        </script>
    </div>

Code file child.html

<body>
    <div>
        <h3>Danh sách nhân viên</h3>
        Click vào tên nhân viên để chọn
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td><a href="#" onclick="return SetName('Ngọc Trinh');">Ngọc Trinh</a></td>
                    <td>Otto</td>
                    <td>mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td><a href="#" onclick="return SetName('Phương Trinh');">Phương Trinh</a></td>
                    <td>Thornton</td>
                    <td>fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td><a href="#" onclick="return SetName('Lệ Rơi');">Lệ Rơi</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td><a href="#" onclick="return SetName('Bà Tưng');">Bà Tưng</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td><a href="#" onclick="return SetName('Kenny Sang');">Kenny Sang</a></td>
                    <td>the Bird</td>
                    <td>twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        function SetName(value) {
            if (window.opener != null && !window.opener.closed) {
                var txtName = window.opener.document.getElementById("txtName"); // ID này là của parent form
                txtName.value = value;
            }
            window.close();
        }
    </script>
</body>

Chúc các bạn thành công.