Cách đưa một giao diện html css vào dụ án asp net core đã tạo
Show
Để phát triển ứng dụng Web (như Website) trước tiên hãy đảm bảo đã biết về các kiến trức:
Tạo ứng dụng ASP.NET Core 3.XTa sẽ bắt đầu
với ứng dụng ASP.NET đơn giản nhất, là một trang web - khi truy cập in ra lời chào. Tạo thư mục chứa dự án đặt tên là dotnet new web Sau đó mở thư mục dự án bằng Cấu trúc file, thư mục trong dự án như hình dưới, đầu tiên đang có thư mục Nếu không nhìn thấy thư mục Giờ để build ứng dụng gõ lệnh: dotnet build Kết quả build được lưu tại Để build và chạy ứng dụng luôn gõ dotnet run Như vậy thấy ứng dụng đang chạy, để kết thúc nhấn Ctrl + C Ứng dụng đang chạy với
cổng 5000, hãy truy cập Nếu muốn thiết lập chạy trên cổng khác mở file Ngoài ra để tự động build và chạy lại khi mã cập nhật sử dụng lệnh: dotnet watch run Như vậy, rất nhanh chóng đã tạo được ứng dụng Web đầu tiên! Kích hoạt SSL (truy cập với https) ở môi trường phát triểnThực hiện lệnh sau: dotnet dev-certs https --clean dotnet dev-certs https --trust Tùy biến trang đâu tiên của ASP.NET CoreỨng dụng web mặc đinh vừa tạo ra có hàm Main là điểm mồi chạy ứng dụng, với nội dung code như sau ( public class Program { public static void Main(string[] args) { // Build - tạo các dịch vụ đã đăng ký trả về WebHost // Run - chạy ứng dụng web CreateHostBuilder(args).Build().Run(); } public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { // webBuilder đối tượng lớp WebHostBuilder để cấu hình, đăng ký các dịch vụ ứng dụng Web // UseStartup chỉ ra lớp khởi chạy ứng dụng (đăng ký dịch vụ) webBuilder.UseStartup Phương thức Phương thức Lớp Starup mặc định được tạo ra ( using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
namespace HelloWorld
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
/*
Phương thức ConfigureServices cho phép truy cập đến các dịch vụ, dependency được Inject vào
Webhost. Hoặc bạn cũng có thể đưa thêm các dependency tại đây.
*/
}
//
app.UseRouting() thêm middleware app.UseEndpoints() : Thêm
Từ tham số app.UseEndpoints(endpoints => { // Điểm cuỗi của pipeline khi địa chỉ truy cập là /Abc endpoints.Map("/Abc", async context => { await context.Response.WriteAsync("Hello Abc"); }); // Điểm cuỗi của pipeline khi địa chỉ truy cập là / endpoints.MapGet("/", async context => { await context.Response.WriteAsync("Hello World!"); }); });
Các phương thức Giờ sẽ tùy biến trang đầu tiên app.UseEndpoints(endpoints => { endpoints.MapGet("/", async context => { string html = @" Kích hoạt truy cập file tĩnhTrang HTML của bạn trả về có thể chứa các URL dẫn đến các file tĩnh như các css, js, hình ảnh ... Thậm chí là một file html. Các file này đều chứa trong thư mục public void Configure(IApplicationBuilder app, IHostingEnvironment env) { /... // Thêm StaticFileMiddleware vào pipeline - kích hoạt truy cập file tĩnh trong wwwroot // file wwwroot/html/helloworld.html truy cập được http://localhost:5000/html/helloworld.html app.UseStaticFiles(); /... } Bạn có thể kiểm tra bằng cách tạo file HTML ví dụ
Mở Như vậy bạn đã có thể host các file tài nguyên tĩnh như JS, CSS, Image vào thư mục Tích hợp các thư viện JS, CSSCác loại thư viện như
Tích hợp CSS Bootstrap, JQuery vào ASP.NETTa sẽ sử dụng Trước tiên, nếu thư mục gốc dự án chưa có file { } Hoặc có thể gõ Tại thư mục dự án, gõ lệnh sau để lấy về Bootstrap npm install bootstrap Sau khi lệnh chạy xong, nó tải về bootstrap lưu trong thư mục npm install jquery npm i popper.js kết quả là mã nguồn của các thư viện trên được tích hợp vào: 1 cài đặt Bootstrap, 2 cài đặt JQuery, popper.js, 3 Nơi lưu mã nguồn thư viện tải về Sử dụng BuildBundlerMinifierCác thư viện trên, mã của chúng đều chứa
trong
Hãy gõ lệnh sau để cài đặt: dotnet add package BuildBundlerMinifier Giờ ta muốn, khi thi hành build thì BuildBundlerMinifier sẽ copy Tạo file [ { "outputFileName": "wwwroot/css/bootstrap.min.css", "inputFiles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css" ] }, { "outputFileName": "wwwroot/js/bootstrap.min.js", "inputFiles": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ] }, { "outputFileName": "wwwroot/js/jquery.min.js", "inputFiles": [ "node_modules/jquery/dist/jquery.min.js" ] }, { "outputFileName": "wwwroot/js/popper.min.js", "inputFiles": [ "node_modules/popper.js/dist/popper.min.js" ], "minify": { "enabled": false, "renameLocals": true } } ] Khi đã có file này, mỗi khi build dự án, thì nó sẽ copy và minify các file css, js cho bạn. Sửa lại code có trả về trang với Bootstrap app.Run(async (context) => { string html = @" Chạy thử Nếu muốn tùy biến hơn, sử dụng SASS, build javascript ... có thể sử dụng Grunt: sử dụng grunt Mã nguồn ASP_NET_CORE/01.helloworld hoặc tải về ex047 |