Bài viết mới:

Thứ Tư, 18 tháng 12, 2019

Hướng dẫn cài đặt DatePicker ngôn ngữ tiếng Việt cho web

Comment
Sử dụng plugin DatePicker bằng tiếng Anh thôi đã hay rồi nhưng dùng bản DatePicker Tiếng Việt thì nó như 1 vụ nổ vậy :)).

Bước 1: Tải plugin DatePicker ở link sau https://github.com/teenboylaanh/DatePicker và giải nén vào project của bạn. Ở đây mình đặt vào thư mục js của project mình.

 Bước 2: Khai báo các lệnh sau vào thẻ <head></head> . Các bạn sửa lại đường dẫn cho đúng nhé.

<link rel="stylesheet" href="/js/DatePicker/themes/jquery-ui.css">
<script src="/js/DatePicker/jquery-ui.js"></script>
<script src="/js/DatePicker/jquery.ui.datepicker-vi.js"></script>

Bước 3: Thêm tag sau vào nơi muốn hiện datepicker.

<input type="text" class="datepicker" />

Bước 4: Khai báo thẻ script sau vào bất kỳ nơi nào trong tag <body></body> để áp dụng datepicker.

<script type="text/javascript">
    $(function() {
       $( ".datepicker" ).datepicker( $.datepicker.regional[ "vi" ] );
    });
</script>

Kết quả:




Nén HTML trong ASP.NET MVC 5 với package RazorHtmlMinifier.Mvc5

Comment

Ngoài nén Javascript, CSS ra thì việc nén mã HTML cũng là một việc hết sức quan trọng nếu bạn muốn cải thiện tốc độ web và giảm lượng băng thông cho website của bạn.
Bài viết sau hướng dẫn bạn sử dụng package RazorHtmlMinifier.Mvc5 để giảm thiểu mã HTML. Điều đặc biệt là những thay đổi này chỉ có tác dụng khi chúng ta thực hiện biên dịch (compile) ứng dụng web chứ không làm ảnh hưởng đến hiệu năng của web trong thời gian chạy.

Bước 1: Cài đặt package RazorHtmlMinifier.Mvc5 với lệnh sau trong màn hình Console Package Install-Package RazorHtmlMinifier.Mvc5

 Bước 2: Mở file Views/Web.config thay thế đoạn mã dạng giống như sau
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

thành đoạn mã này
<host factoryType="RazorHtmlMinifier.Mvc5.MinifyingMvcWebRazorHostFactory, RazorHtmlMinifier.Mvc5, Version=1.3.0.0, Culture=neutral, PublicKeyToken=a517a17e203fcde4" />

Bước 3: Mở file Web.config ở thư mục gốc của project và tìm đến đoạn mã dạng giống như sau
<compilation debug="true" targetFramework="4.7.2" />
Giữ nguyên giá trị targetFramework và thay thế thành lệnh sau

<compilation debug="true" targetFramework="4.7.2">
    <buildProviders>
        <add extension=".cshtml" type="RazorHtmlMinifier.Mvc5.MinifyingRazorBuildProvider, RazorHtmlMinifier.Mvc5" />
    </buildProviders>
</compilation>
Vậy là xong. Đây là kết quả test của mình trước và sau khi nén HTML.
Trước khi nén

Sau khi nén

Mình so sánh tổng số dòng thì trước khi nén là 1747 dòng và sau khi nén thì chỉ còn 1634 dòng. Như vậy là bạn đã thấy được sự khác biết của nó rồi. Xin nhắc lại là những thay đổi này đều chỉ có tác dụng khi chúng ta compiler project chứ không ảnh hưởng gì đến hiệu năng trong quá trình chạy. Đó là điểm mình thích nhất của package này. Chúc bạn áp dụng thành công.

Chủ Nhật, 17 tháng 2, 2019

Export excel với jqueryTable To Excel (XSL) Converter

Comment
Đây là bộ thư viện jquery hỗ trợ việc xuất dữ liệu website ra file excel.Với bộ thư viện này thì việc xuất dữ liệu ra file excel sẽ trở lên đơn giản hơn bao giờ hết. 
Link demo: http://chuyenlaptrinh.net/pages/table-excel-xsl-converter/

Sau đây là các bước sử dụng jquery Table To Excel (XSL) Converter.

 Bước 1: Tải bộ source tại link sau https://www.jqueryscript.net/table/table-excel-xsl-converter.html

 Bước 2: Khai báo 2 file script sau ở thẻ <head></head>:

1<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3        crossorigin="anonymous">
4</script>
5<script src="jquery.tableToExcel.js"></script>

 Bước 3: Tạo danh sách dữ liệu thông qua thẻ <table></table>. Ví dụ như dưới:

01<table class="table table-bordered table-striped">
02  <thead>
03    <tr>
04      <th>Firstname</th>
05      <th>Lastname</th>
06      <th>Email</th>
07    </tr>
08  </thead>
09  <tbody>
10    <tr>
11      <td>John</td>
12      <td>Doe</td>
13      <td>john@example.com</td>
14    </tr>
15    <tr>
16      <td>Mary</td>
17      <td>Moe</td>
18      <td>mary@example.com</td>
19    </tr>
20    <tr>
21      <td>July</td>
22      <td>Dooley</td>
23      <td>july@example.com</td>
24    </tr>
25  </tbody>
26</table>

Bước 4: Kích hoạt hàm thực thi export excel bằng lệnh sau:
$('table').tblToExcel();
Bạn có thể đặt lệnh này trong event onclick của button để khi click vào button đó thì file excel sẽ được tải xuống.
Ví dụ:
<button type="button" onclick="$('table').tblToExcel();">Export To Excel</button>
Chúc các bạn thành công.
Đăng ký: Bài đăng (Atom)