Sử dụng cache trong ASP.NET MVC với Redis Cache, Memory Cache

Khi lập trình ứng dụng chúng ta hay gặp vấn đề làm sao cho tối ưu tài nguyên của hệ thống, tăng tốc độ trải nghiệm từ phía end user. Đặc biệt là các ứng dụng web.

Cache là gì ? 
Lý thuyết: Cache là tên gọi của bộ nhớ đệm – nơi lưu trữ các dữ liệu nằm chờ các ứng dụng hay phần cứng xử lý. Mục đích của nó  để tăng tốc độ xử lý (có sẵn xài liền không cần tốn thời gian đi lùng sục tìm kéo về).

Thực tế: Cache là các dữ liệu trong phiên làm việc trước của các ứng dụng, chương trình mà hệ điều hành lưu lại nhằm giúp việc tải data trong các phiên làm việc sau được nhanh hơn.

Tip này hướng dẫn các bạn cách implement cache vào ứng dụng, sử dụng thư viện đã được wrap lại từ Memery Cache & Redis Cache

Đầu tiên tải về thư viện tại Nuget: https://www.nuget.org/packages/colorlife.tuanitpro.com/

Hoặc cài đặt trực tiếp trong Visual Studio

Tạo class Customer để test

public class Customer
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

Sử dụng Memory Cache

  private static void MemoryCache_Customer_Test()
        {
            ICacheProviderFactory cacheProvideractory = new CacheProviderFactory();
            IDataCacheProvider dataCacheProvider = cacheProvideractory.CreateFactory();
            Customer customer = new Customer
            {
                FirstName = "Tuan",
                LastName = "Le"
            };
            string cacheKey = "Memory_Cache_Customer";
            dataCacheProvider.Set(cacheKey, customer);
            Console.WriteLine("Before cache: " + customer.FirstName + " " + customer.LastName);
             
            Console.WriteLine("After Update: " + customer.FirstName + " " + customer.LastName);

            var customerInCache = dataCacheProvider.Get(cacheKey);

            Console.WriteLine("Get Customer In MemoryCache: " + customerInCache.FirstName + " " + customerInCache.LastName);
        }

Sử dụng Radis Cache
Đầu tiên tải Redis cho Windows & cài đặt tại: https://github.com/MicrosoftArchive/redis/releases

Code:

  private static void RedisCache_Customer_Test()
        {
            ICacheProviderFactory cacheProvideractory = new CacheProviderFactory(new CacheProviderOptions
            {
                SlidingExpiration = TimeSpan.FromSeconds(30),
                ConnectionString = "localhost:6379" // mặc định
            }, CacheType.Redis);
            IDataCacheProvider dataCacheProvider = cacheProvideractory.CreateFactory();
            Customer customer = new Customer
            {
                FirstName = "Tuan",
                LastName = "Le"
            };
            string cacheKey = "RedisCache_Customer";
            dataCacheProvider.Set(cacheKey, customer);
            Console.WriteLine("Before cache: " + customer.FirstName + " " + customer.LastName);
            Thread.Sleep(5000);
            customer.LastName = "Le_Updated";
            Console.WriteLine("After Update: " + customer.FirstName + " " + customer.LastName);

            var customerInCache = dataCacheProvider.Get(cacheKey);

            Console.WriteLine("Customer In RedisCache: " + customerInCache.FirstName + " " + customerInCache.LastName);
        }

Thư viện còn hỗ trợ một số chức năng nho nhỏ khác, sẽ nói trong bài viết khác. Chúc các bạn thành công 🙂

Cascading Dropdown Ajax

Chào các bạn

Khi lập trình các bạn hay gặp vấn đề khó khăn khi lấy dữ liệu giữa các Dropdown List khác nhau. Ví dụ: Từ tỉnh thành -> quận huyện -> Xã phường…

Đây là khó khăn của rất nhiều bạn sinh viên khi mới bắt đầu học lập trình. Video dưới đây sẽ hướng dẫn bạn cách giải quyết, khá là đơn giản. Hoàn toàn có thể áp dụng nhiều trường hợp khác nhau.

Video không có tiếng, do mình làm trong lúc ngẫu hứng ngoài quán cafe. Các bạn có thể theo dõi, hoặc tải mã nguồn về phân tích thêm.

Slide giới thiệuhttps://docs.google.com/presentation/d/1soxUWN7Xa6Z89Az-PNCtiyGgMVdVSgmqzp1bf7hdi50/edit?usp=sharing

Tài nguyên

SQL Data:
CSDL tên Quốc gia, tỉnh thành phố thị xã quận huyện, xã phường Việt Nam
Ajax là gì: http://tuanitpro.com/ajax-la-gi Jquery.com asp.net/mvc https://github.com/tuanitpro/cascading-dropdown-ajax-mvc

Demo

Cascading Dropdown Ajax

Code C#

 public class MyDbContext:DbContext
    {
        // Ở đây các bạn có thể khai báo trong Web.config.
        private const string sqlConnection = @"Data Source=.\SQLExpress; Initial Catalog = CountryDb; User Id=sa; Password = sa";

        public MyDbContext() : base(sqlConnection)
        {

        }
      
        public DbSet<Country> Countries { get; set; }
        public DbSet<Province> Provinces { get; set; }
        public DbSet<District> Districts { get; set; }
        public DbSet<Ward> Wards { get; set; }

    }

 

  public JsonResult GetAllCountries()
        {
            using(var db = new MyDbContext())
            {
                var data = db.Countries.OrderBy(x=>x.Name).ToList();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }
        /// <summary>
        /// Hàm lấy danh sách tỉnh thành theo CountryId. 
        /// Id = 237 là của Việt Nam. Do database mình quy định vậy
        /// Test OK
        /// </summary>
        /// <param name="id">Id của country</param>
        /// <returns></returns>
        public JsonResult GetAllProvinceByCountryId(int? id=237) 
        {
            using (var db = new MyDbContext())
            {               
                var data = db.Provinces.Where(x=>x.CountryId== id).OrderBy(x=>x.Name).ToList();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }
        /// <summary>
        /// Hàm lấy tất cả danh sách quận huyện
        /// Id = 1 là Hà Nội, do database mình quy định vậy
        /// Test OK
        /// </summary>
        /// <param name="id">Id = ProvinceId</param>
        /// <returns></returns>
        public JsonResult GetAllDistrictByProvinceId(int? id = 1)
        {
            using (var db = new MyDbContext())
            {
                var data = db.Districts.Where(x => x.ProvinceId == id).OrderBy(x=>x.Name).ToList();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }
        /// <summary>
        /// Hàm lấy danh sách xã phường theo quận huyện
        /// Id= 1 là Ba Đình. Do database quy định
        /// Test OK
        /// </summary>
        /// <param name="id"></param>
        /// <returns></returns>
        public JsonResult GetAllWardByDistrictId(int? id = 1)
        {
            using (var db = new MyDbContext())
            {
                var data = db.Wards.Where(x => x.DistrictId == id).OrderBy(x=>x.Name).ToList();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }

Code js

// File javascript để lấy dữ liệu

// Khai báo URL service của bạn ở đây
var baseService = "/Service";
var countryUrl = baseService + "/GetAllCountries";
var provinceUrl = baseService + "/GetAllProvinceByCountryId";
var districtUrl = baseService + "/GetAllDistrictByProvinceId";
var wardUrl = baseService + "/GetAllWardByDistrictId";
$(document).ready(function () {
    // load danh sách country
    _getCountries();
    $("#ddlCountry").on('change', function () {
        var id = $(this).val();
        if (id != undefined && id != '') {
            _getProvince(id);
        }
    });

    $("#ddlProvince").on('change', function () {
        var id = $(this).val();
        if (id != undefined && id != '') {
            _getDistrict(id);
        }
    });
    $("#ddlDistrict").on('change', function () {
        var id = $(this).val();
        if (id != undefined && id != '') {
            _getWard(id);
        }
    });
    $("#ddlWard").on('change', function () {
        var countryText = $("#ddlCountry option:selected").text();
        var provinceText = $("#ddlProvince option:selected").text();
        var districtText = $("#ddlDistrict option:selected").text();
        var wardText = $("#ddlWard option:selected").text();
        var html = "Quốc gia: " + countryText + " Tỉnh thành: " + provinceText + " " + "Quận huyện: " + districtText + " " + "Xã phường: " + wardText;
        html += "</br>Quê bạn thật là đẹp. Chúc mừng bạn!!!";
        $("#divResult").html(html);
    });
});
function _getCountries() {
    $.get(countryUrl, function (data) {
        if (data != null && data != undefined && data.length) {
            var html = '';
            html += '<option value="">--Không chọn--</option>';
            $.each(data, function (key, item) {
                html += '<option value=' + item.Id + '>' + item.Name + '</option>';
            });
            $("#ddlCountry").html(html);
        }
    });
}
// truyền id của country vào
function _getProvince(id) {
    $.get(provinceUrl + "/"+id, function (data) {
        if (data != null && data != undefined && data.length) {
            var html = '';
            html += '<option value="">--Không chọn--</option>';
            $.each(data, function (key, item) {
                html += '<option value=' + item.Id + '>' + item.Name + '</option>';
            });
            $("#ddlProvince").html(html);
        }
    });
}
// truyền id của province vào
function _getDistrict(id) {
    $.get(districtUrl + "/" + id, function (data) {
        if (data != null && data != undefined && data.length) {
            var html = '';
            html += '<option value="">--Không chọn--</option>';
            $.each(data, function (key, item) {
                html += '<option value=' + item.Id + '>' + item.Name + '</option>';
            });
            $("#ddlDistrict").html(html);
        }
    });
}
// truyền id của district vào
function _getWard(id) {
    $.get(wardUrl + "/" + id, function (data) {
        if (data != null && data != undefined && data.length) {
            var html = '';
            html += '<option value="">--Không chọn--</option>';
            $.each(data, function (key, item) {
                html += '<option value=' + item.Id + '>' + item.Name + '</option>';
            });
            $("#ddlWard").html(html);
        }
    });
}

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

Download GitHub

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

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")]


 

POST & GET trong lập trình web

Trong lập trình web có 2 phương thức rất quan trọng chúng ta thường dùng đó là POST & GET. Nó giống như cốt lỗi khi làm lập trình web. Bởi vì POST và GET cung cấp cho chúng ta cách lấy thông tin đầu vào từ phía client, sau đó gửi lên máy chủ Web Server để xử lý. Không có thông tin chúng ta không thể xử lý gì cả.

Nôm na thì nó như vầy:

POST & GET

GET

Phương thức GET dữ liệu sẽ được hiển thị trên thanh địa chỉ: VD: http://tuanitpro.com/?s=ajax. GET áp dụng khi dữ liệu chỉ đọc, không nên dùng khi ghi xuống CSDL. Bởi vì khi dùng GET thì thông tin quá lộ liễu. Dễ thấy nhất là khi tìm kiếm, lấy mẩu tin theo ID. http://tuanitpro.com/?id=1&categoryid=2&x=3&y=4. Khi dùng GET thì tất cả các field trong form đều hiển thị hết lên thanh địa chỉ.

GET Method

VD chúng ta có form đăng nhập như sau:

<form action="login.php" method="GET"> // Nếu chúng ta không quy định method, mặc định là GET
First name:<br>
<input type="text" name="username" value="tuanitpro">
<br>
Last name:<br>
<input type="password" name="password" value="123">
<br><br>
<input type="submit" value="Submit">
</form>

Khi chúng ta nhấn submit, nó sẽ gửi sang trang login.php như sau:
http://tuanitpro.com/login.php?username=tuanitpro&password=123. Như vậy quá nguy hiểm khi có ai đứng gần bạn.
Cách lấy dữ liệu.

PHP: $_GET["username"]
ASP.NET: Request.QueryString["tuanitpro"]
JAVA: request.getParameter("username");

Và có một điều quan trọng, các hacker rất thích dựa vào GET để khai thác tấn công SQL Injection. Nếu dùng GET các bạn nên mã hóa query string để an toàn hơn.

POST

Khác với GET, phương thức POST cũng gửi dữ liệu lên web server, nhưng nó chạy ngầm bên dưới, hoàn toàn không hiển thị. Các bạn thường thấy khi đăng ký thành viên, đăng nhập, thêm một bài mới. Tức là nó có can thiệp với cơ sở dữ liệu. Tất nhiên chúng ta hoàn toàn có thể dùng GET. Tuy nhiên vì lý do bảo mật (tất nhiên không hoàn toàn tuyệt đối), chúng ta nên dùng POST.

POST Method

Khi dùng POST

<form action="login.php" method="POST">
First name:<br>
<input type="text" name="username" value="tuanitpro"/>
<br>
Last name:<br>
<input type="password" name="password" value="123"/>
<br><br>
<input type="submit" value="Submit">
</form>

Dữ liệu cũng gửi lên Server để trang login.php xử lý, nhưng nó chạy ngầm, và không hiển thị gì cả. An toàn hơn GET rất nhiều. Bạn nào không tin thì login facebook.com thử.

Cách lấy dữ liệu.

PHP: $_POST["username"]
ASP.NET: var username = username.Text
JAVA: request.getParameter("username");

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

Phân trang trong ASP.NET với CollectionPager

Khi lập trình ứng dụng ASP.NET, để trình bày dữ liệu, chúng ta hay sử dụng các control như DataList hay Repater khá nhiều so với Gridview hay các control dữ liệu khác. Ưu điểm của những control trên thì khá rõ, tuy nhiên có hạn chế là nhiều bạn gặp khó khăn để phân trang dữ liệu cho nó. Vấn đề này đặc biệt quan trọng khi dữ liệu của các bạn nhiều lên như danh sách các sản phẩm, danh sách nhân viên…..

 

Thật may mắn khi ASP.NET hỗ trợ chúng ta viết các custom control khá mạnh, chính vì thế có một control hỗ trợ phân trang rất linh hoạt và hữu ích là CollectionPager. Nó cho phép chúng ta phân trang với DataList, Repater, hỗ trợ định dạng hiển thị mạnh mẽ…

Để sử dụng các bạn cần download thư viện CollectionPager về.

Đầu tiên cần add thư viện CollectionPager.dll vào thư mục bin của ứng dụng.

Phân trang trong ASP.NET với CollectionPager
Phân trang trong ASP.NET với CollectionPager

Tạo trang mới Pager.aspx

Các bạn chú ý thêm dòng này vào đầu trang

<%@ Register TagPrefix="cc1" Namespace="SiteUtils" Assembly="CollectionPager" %>
<!--/* FileName: Pager.aspx
Project Name: AjaxDemo
Date Created: 5/12/2015 8:49:08 PM
Description: Auto-generated
Version: 1.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: [email protected]
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 

*/
-->
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Pager.aspx.cs" Inherits="Pager" %>
<%@ Register TagPrefix="cc1" Namespace="SiteUtils" Assembly="CollectionPager" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Phân trang với ColelctionPager</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Phân trang trong ASP.NET với CollectionPager</h1>
            <table>
                <thead>
                    <tr>
                        <th>StudentId</th>
                        <th>Name</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <asp:Repeater ID="rptStudents" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td><%#Eval("StudentId") %></td>
                                <td><%#Eval("Name") %></td>
                               <td> <%#Eval("Status") %></td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3">
                             <cc1:CollectionPager ID="pager" runat="server" PageSize="20" ></cc1:CollectionPager>
                        </td>
                    </tr>
                </tfoot>
            </table>
            <hr />
           <a href="http://tuanitpro.com">http://tuanitpro.com</a>
        </div>
    </form>
</body>
</html>

Thêm dòng này vào sau DataList, Repater

 <cc1:CollectionPager ID="pager" runat="server" PageSize="20" ></cc1:CollectionPager>

Các thuộc tinh của CollectionPager

phan-trang-aspnet-collectionpager-2

Code trang Pager.aspx.cs

/* FileName: Pager.aspx.cs
Project Name: AjaxDemo
Date Created: 5/12/2015 8:49:08 PM
Description: Auto-generated
Version: 1.0.0.0
Author:	Lê Thanh Tuấn - Khoa CNTT
Author Email: [email protected]
Author Mobile: 0976060432
Author URI: http://tuanitpro.com
License: 

*/

using System;
using System.Data;
using System.Data.SqlClient;

public partial class Pager : System.Web.UI.Page
{
    string connectionString = @"Data Source = .\SQLEXPRESS; Initial Catalog = DemoDI; User ID=sa; Password=sa";
    // Code table Students
    string db = @"CREATE TABLE [dbo].[Students](
	                [StudentId] [int] IDENTITY(1,1) NOT NULL,
	                [Name] [nvarchar](max) NULL,
	                [Status] [nvarchar](max) NULL)";
    /// <summary>
    /// Get All Student form DB
    /// </summary>
    /// <returns></returns>
    public DataTable GetAllStudents()
    {
        using (SqlConnection cnn = new SqlConnection(connectionString))
        {
            cnn.Open();
            string sql = "Select * from Students";
            SqlCommand cmd = new SqlCommand(sql, cnn);
           
            DataTable table = new DataTable();
            table.Load(cmd.ExecuteReader());
            cnn.Close();
            return table;
        }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Set DataSource of Pager to Sample Data 
            pager.DataSource = GetAllStudents().DefaultView;

            pager.BindToControl = rptStudents;

            rptStudents.DataSource = pager.DataSourcePaged;
             
        }
    }
}

Kết quả

Phân trang ASP.NET với CollectionPager
Phân trang ASP.NET với CollectionPager

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

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.