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.
Set background của body trong ASP.NET MVC
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?
1 Like
Mình đã thử và vẫn không thành công bạn ạ 
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 
1 Like
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 
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é!
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 ?
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.
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.
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ề 
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.
Mình đã thay như bài trên đều fail
/image/filename. Chỉ cần nhiu thôi cậu.
Bạn bật console lên xem nó báo gì?
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ì.
Ặ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ự
1 Like
@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ừ.
1 Like
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.
@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
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 
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?
