by oclockvn at 11:53 PM 01/18/2017

asp.net mvc 5 p4: xây dựng layout front-end

Nội dung bài viết này tập trung vào việc xây dựng UI cho ứng dụng. Không có kỹ thuật gì mới, chủ yếu là sử dụng html/css để build lên layout. Bạn chỉ cần 1 chút kỹ năng front-end cho bài này. Nếu bạn đã biết (ý mình là rành) về front-end thì bạn có thể tham khảo để xem style của mình, còn nếu chưa rành, bạn cũng có thể tự mình gõ theo từng dòng code mình quay trong clip để học hỏi.

Chuẩn bị

Như bài trước đã đề cập, nếu bạn muốn làm theo những hướng dẫn của mình trong bài này thì bạn phải cài đặt nodejs.

Sau khi cài đặt nodejs, bạn có thể sử dụng npm để cài đặt các packages cho việc run task thông qua gulp:

Các packages dùng cho styles: (js và images sẽ đề cập sau)

0. gulp là 1 task runner. Hiểu đơn giản là nó là tool giúp bạn thực hiện các việc (task) compile scss, concat, uglify js....

  1. gulp-ruby-sass dùng để compile *.scss thành *.css. Nếu bạn chưa biết scss thì có thể tham khảo bài viết trên blog cũ của mình tại đây.
  2. gulp-postcss + autoprefixer: parse css, thêm vender-prefix...
  3. gulp-notify: notify message sau khi hoàn thành task. Có thể cài đặt hoặc không.

Xem clip ở cuối bài viết.

Lưu ý: nếu bạn chưa cài git và không có git bash, bạn hoàn toàn có thể làm tương tự với cmd như trong video. Nhớ trỏ về cùng thư mục hoặc có thể bấm Shift + R-click và chọn Open command window here.

github repo: didongexpress

Nếu bạn thấy sử dụng gulp là quá bất tiện cho việc compile scss, add vender prefix.. thì bạn bạn có thể sử dụng codepen như 1 tool để thực hiện các việc đó.

Videos

Trong suốt playlist là các video thực hiện phần giao diện của website. Ở đây mình không copy cấu trúc (html structure) như của website gốc mà tự viết riêng để các bạn áp dụng bootstrap vào 1 responsive webapp (responsive styles sẽ được cập nhật sau). Không có gì mới trong các video này nên nếu bạn không muốn xem về front-end thì có thể bỏ qua.

Nhắc lại 1 số khái niệm/kỹ thuật đã áp dụng trong videos:

  1. Có thể dễ dàng "tách" 1 phần html ra bằng cách sử dụng partial view. Nếu là html tĩnh thì chỉ cần sử dụng @Html.Partial("Partial-View-Name"). Nếu partial view đó được sử dụng nhiều lần và nhiều nơi, bạn có thể đặt trong folder Shared, các trường hợp còn lại thì có thể đặt ngay trong thư mục view của controller đó.

header-partial

Partial view đặt trong thư mục riêng chỉ sử dụng trong phạm vi controller đó:

internal partial view

2. Tận dụng sức mạnh của cú pháp razor:

razor syntax

(1): thực hiện 1 vòng lặp như hệt C#. Hãy tưởng tượng bạn có 1 list các sản phẩm, vào bạn có thể for hoặc foreach để in ra danh sách sản phẩm đó. 2 điểm mấu chốt là @for (...) và cặp dấu {} để thể hiện phạm vi của vòng lặp.

(2): 1 html helper gọi đến action Detail của ProductController. Sức mạnh của việc sử dụng html mình cũng đã nói, và sẽ nhắc lại sau này khi sử dụng custom route.

(3): yeah, có thể sử dụng cú pháp inline để thực hiện các tính toán logic đơn giản.

3. Dễ dàng override layout bằng cách set Layout = null và viết riêng 1 layout mới. Bạn có thể xem đây là cách fake layout, chính vì vậy bạn không cần phải viết @RenderBody trong fake layout này.

fake layout

Xem clip full HD không che tại đây:

Github repo

Up-to-date tại didongexpress

relate posts
by {{relate.UpdatedBy}} at 02/21/2018

{{relate.Title}}

  • {{relate.TotalComment}}
  • {{relate.View}}
  • {{relate.AveragePoint}}
[{{postCtrl.comments.length}}] comments
all comments {{ postCtrl.isHiddenComment ? 'show comments' : 'hide comments' }}
what do you want to say?

(*) markdown supported with html disabled