01/10/2018, 09:11

Set background của body trong ASP.NET MVC

Mình có bố cục 1 project MVC như hình. Nhưng mọi nỗ lực set background-image cho body đều thất bại.
Bạn nào chỉ mình phát.

Chien Dang viết 11:11 ngày 01/10/2018

Trong razor mình thường dùng url là dạng “~/” sẽ trỏ về thư mục gốc thay vì “…/” để trở về thư mục cha giống linux của bạn. Nên trong trường hợp của bạn thử thay link thành ‘~/Views/Images/back.jpg’ xem sao?

Văn Dương viết 11:17 ngày 01/10/2018

Mình đã thử và vẫn không thành công bạn ạ

Chien Dang viết 11:14 ngày 01/10/2018

Bạn bật Inspect element lên xem cái body của bạn có height khác 0 hay ko? Body để trống ko có element con có khi nó có height=0 nên ko xem đc ảnh. Hoặc trong thẻ style đó bạn thêm height: 100px xem sao? Làm sao mà lại ko đc vụ này đc

Văn Dương viết 11:14 ngày 01/10/2018

Mình tưởng cái body chính nó trải toàn bộ trang chứ nhỉ ?
Bởi vì nếu mình set background cho nó bằng solid color thì nó vẫn được

Chien Dang viết 11:27 ngày 01/10/2018

Ra rồi, bạn thay về như thế này là được:

background-image: url('Views/Images/back.jpg');

Cốt yếu của cái này là nó sẽ gán cái url này bằng link đến index + url trong background-image kia.
Tức là nếu trang của bạn là localhost:xxxxx/ thì link đến ảnh background sẽ là ‘localhost:xxxxx/Views/Images/back.jpg’
Bạn điền cái url làm sao để khi bật link kia lên browse ra đc cái ảnh là ok. Mình đã thử rồi. Để test bạn bật console lên xem có báo lỗi 404 not found ko nhé!

Văn Dương viết 11:21 ngày 01/10/2018

Mình tìm thấy một vấn đề.
Index.cshtml của mình nằm trong Root/Views/Home/index.cshtml nhưng khi chạy địa chỉ Web lại là http:localhost:xxxxx/Home/Index -> tức là nó nhận localhost:xxxxx/Home làm thư mục gốc.
Nhưng localhost:xxxxx/Home không hề tồn tại ? Mình đoán do đó toàn bộ những đường dẫn ảnh mình thay đều không tìm thấy.

Mình phải tạo một thư mục Home rồi đưa ảnh vào đó thì mới được ?

Đăng Trần viết 11:19 ngày 01/10/2018

Sao không viết hẵn 1 style bạn. Làm kiểu này khó chỉnh sửa lắm. Mà path …/ là sai (… trong path redirect ra 1 lv so với trang hiện tại). root là / nên file index của bạn trên url vậy là đúng (toàn bộ các views giao diện đều nằm trong thư mục Views nên phải tính root theo view). Ngoài ra cần tạo thêm master templete. Lấy project mẫu về làm theo rất nhanh thôi cậu.

Chien Dang viết 11:27 ngày 01/10/2018

Thực ra đây chính là vấn đề của thằng ASP.NET, khi trước mình có làm việc với thằng này thì cũng gặp lỗi tương tự (nhưng là với video), khiến mình phải tạo symbolic link. Tuy nhiên nó đã được khắc phục ở bản mới nhất của dòng asp là asp .net core, hiện giờ mình đang làm việc với nó. Cấu trúc thư mục và file của .net core là rõ ràng hơn so với asp .net.
Bây giờ bạn tạo thư mục Images trong Root rồi thay url thành ‘Images/back.jpg’ mình nghĩ sẽ được. Nếu bạn mới bắt đầu tìm hiểu mình khuyên bản chuyển sang asp .net core luôn, nó là mới nhất và khắc phục được những điểm yếu của .net.

Sao không viết hẵn 1 style bạn. Làm kiểu này khó chỉnh sửa lắm. Mà path …/ là sai (… trong path redirect ra 1 lv so với trang hiện tại). root là / nên file index của bạn trên url vậy là đúng (toàn bộ các views giao diện đều nằm trong thư mục Views nên phải tính root theo view). Ngoài ra cần tạo thêm master templete. Lấy project mẫu về làm theo rất nhanh thôi cậu.

Theo mình nên tự làm trước rồi tối ưu dần để hiểu đc nguyên lý/cách làm. Rồi tham khảo dần các template để nâng cao tay nghề

Văn Dương viết 11:18 ngày 01/10/2018

Mình mới làm nên chưa biết nhiều mấy cái đó. StackoverFlow chỉ vậy mình làm theo thôi.
Vậy là root là Views hả bạn.

Mình có thử 2 trường hợp:
TH1:

ảnh đặt tại root.
trong index.cshtml viết như sau :

<body style="background-image: url('/back.jpg')">
</body>

Kết quả OK.

TH2:
-Tạo 1 thư mục Images trong Views và đặt ảnh vào đó

index.cshtml:

<body style="background-image: url('Images/back.jpg')">
</body>

<body style="background-image: url('/Images/back.jpg')">
</body>

<body style="background-image: url('~/Images/back.jpg')">
</body>

<body style="background-image: url('/Views/Images/back.jpg')">
</body>

<body style="background-image: url('~/Views/Images/back.jpg')">
</body>

<body style="background-image: url('../Images/back.jpg')">
</body>

<body style="background-image: url('../Views/Images/back.jpg')"> // cais dấu ../ là VS gợi ý
</body>

thì tất cả các trường hợp đều không được.

Văn Dương viết 11:24 ngày 01/10/2018

Mình đã thay như bài trên đều fail

Đăng Trần viết 11:18 ngày 01/10/2018

/image/filename. Chỉ cần nhiu thôi cậu.

Chien Dang viết 11:14 ngày 01/10/2018

Bạn bật console lên xem nó báo gì?

Văn Dương viết 11:17 ngày 01/10/2018

Mình chưa biết cách bật. Bạn chỉ giúp mình với
Nhưng đây là kết quả (mình đã F5 mấy lần ) :

Đăng Trần viết 11:26 ngày 01/10/2018

Tính mình nóng lắm với lại làm cũng 1 mình không giống nhiều anh em, vài ngày mà tiến độ như rùa thì bị nhắc nhở rồi. Nên không có thời gian mài dũa được. Với lại mình thấy nguyên tắc hoạt động của nó cũng đơn giản thôi chẳng cần mài dũa gì.

Minh Đức Nguyễn viết 11:18 ngày 01/10/2018

Ặc ặc. Lập trình web thì phải F12 lên xem nó lỗi như thế nào hay để còn test, sửa JS, CSS chứ?
Với Chrome thì bạn chuột phải vào trang -> inspect. Firefox tương tự

Chien Dang viết 11:11 ngày 01/10/2018

@Duong_Act: Ở trang web của bạn, bạn ấn F12 rồi chọn console, nó sẽ hiện ra lỗi mà bạn đang mắc phải.
@Tran_Dang: khi bạn nắm được rồi thì đương nhiên là dễ rồi . Nói chung mỗi người có 1 cách học phù hợp với mình, bạn Dương mới tìm hiểu thì mĩnh nghĩ cứ từ từ.

Đăng Trần viết 11:19 ngày 01/10/2018

Kiểm tra mã nguồn trang trên trình duyệt tập tùy chỉnh giao diện trên đó luôn.

Văn Dương viết 11:11 ngày 01/10/2018

@Chien_Dang, @Minh_Duc_Nguyen, @Tran_Dang :
Mình đã làm theo cách các bạn hướng dẫn và có tìm thấy 1 lỗi 404 : không tìm thấy ảnh tại đường dẫn :
http://localhost:xxxx/Images/back.jpg.

Mình tưởng là Views là root thì nó phải tính từ root trở đi tức là mình chèn link :
‘/Images/back.jpg’
thì nó phải hiểu là
localhost:xxxxx/Views/Images/back.jpg chứ nhỉ ?

Mình vào trong index.cshtml sửa lại link thành:
‘/Views/Images/back.jpg’
với để cho nó nhận đúng thì nó lại báo lỗi đường dẫn ảnh khi này thành :
'http://localhost:58949/Home/Views/Images/back.jpg

Chien Dang viết 11:17 ngày 01/10/2018

Ko phải, views là root thì nó sẽ tính view là ‘/’ bạn nhé, rồi mới đến các thư mục con. Việc bây giờ của bạn là “thí nghiệm” xem đường dẫn nào nó tìm đc ảnh là ok

Văn Dương viết 11:19 ngày 01/10/2018

Mình có 2 ảnh đặt tại :
Views/back.jpg
Views/Images/back.jpg

Mình dùng đường dẫn ‘/back.jpg’ thì nó chỉ tới ảnh 1 và load OK.
Mình dùng đường dẫn ‘/Images/back.jpg’ để chỉ tới ảnh thứ 2 thì nó báo đường dẫn đúng là đã chỉ đến ảnh thứ 2 :
'http://localhost:58949/Images/back.jpg

Nhưng ảnh 2 không load được

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Văn Dương

0 chủ đề

0 bài viết

Tác giả nổi bật