JavaScript trong cshtml asp net MVC

Question

Phần này cung cấp thông tin về tập lệnh tham chiếu từ CDN và Trình tạo tài nguyên tùy chỉnh (CRG) cho Syncfusion ASP. điều khiển NET MVC

Nội dung chính Show

Tham chiếu CDN
Tham khảo CDN cho tất cả các điều khiển
Kiểm soát cá nhân Tham khảo CDN
Trình quản lý gói nút (NPM)
Gói NPM đồng bộ hóa
Trình tạo tài nguyên tùy chỉnh
Tôi có thể sử dụng JavaScript trong Cshtml không?
Bạn có thể sử dụng JavaScript trong ASP NET MVC không?
Làm cách nào để sử dụng JavaScript trong MVC C#?
Làm cách nào để gọi hàm JavaScript từ bộ điều khiển trong MVC?

Tham chiếu CDN

Syncfusion lưu trữ mọi ASP. NET MVC dưới dạng gói nút riêng biệt trong CDN, từ đó có thể tải các tập lệnh và biểu định kiểu của gói riêng lẻ. Syncfusion cũng lưu trữ một gói nút duy nhất với tất cả ASP. NET MVC trên đó, từ đó tập lệnh và biểu định kiểu của tất cả các điều khiển có thể được tải dưới dạng tập lệnh và tệp kiểu

Ở đây, Syncfusion ASP. NET MVC CDN URL cho cả ASP cá nhân. Gói điều khiển NET MVC và Hoàn thành ASP. NET MVC gói điều khiển đã được giải thích

CẢNH BÁO
Các liên kết CDN không có phiên bản luôn duy trì các tập lệnh phiên bản mới nhất sẽ không được dùng nữa từ Tập 1 - 2022 năm 2022. 1 phiên bản. Các liên kết này có sẵn với 19. 4 tập lệnh phiên bản để tránh vi phạm các trang web và ứng dụng sử dụng liên kết không có phiên bản

Tham khảo CDN cho tất cả các điều khiển

Mục tiêu chính của tất cả các ASP. NET MVC controls là để giúp người mới bắt đầu với Syncfusion ASP. NET MVC bằng cách tham chiếu một dòng cho tập lệnh và kiểu mà không cần bận tâm đến biểu đồ phụ thuộc của ASP. điều khiển NET MVC

điều khiển Tham chiếu CDN Tham chiếu tập lệnh cho tất cả điều khiểnhttps. //cdn. đồng bộ hóa. com/ej2/20. 4. 48/dist/ej2. tối thiểu. tham chiếu jsStyles cho tất cả các điều khiểnhttps. //cdn. đồng bộ hóa. com/ej2/20. 4. 48/{THEME-NAME}. css

GHI CHÚ
Syncfusion sẽ không bao giờ đề xuất tất cả các điều khiển CDN cho các dự án thời gian thực. Bởi vì, kích thước của CDN này ảnh hưởng đến thời gian tải trang web/ứng dụng vì gói này bao gồm tất cả Syncfusion ASP. điều khiển NET MVC

Thêm tài nguyên phía máy khách EJ2 CDN vào phần tử của trang bố cục ~/Views/Shared/_Layout.cshtml

~/_Bố cục. cshtml

<head>
    ...
    
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" />

    
    <script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js">script>
head>

Kiểm soát cá nhân Tham khảo CDN

Mục tiêu chính của CDN kiểm soát riêng lẻ là tối ưu hóa thời gian tải và bộ nhớ của trang web/ứng dụng trong giai đoạn sản xuất. Thứ tự tải gói điều khiển riêng lẻ phải phù hợp với biểu đồ phụ thuộc của nó. CDN của Gói phụ thuộc phải được đưa vào theo cách thủ công trước CDN của gói kiểm soát riêng dự định

điều khiển Tham chiếu CDN Tham chiếu tập lệnh cho điều khiển riêng https. //cdn. đồng bộ hóa. com/ej2/20. 4. 48/{PACKAGE-NAME}/dist/global/{PACKAGE-NAME}. tối thiểu. tham chiếu jsStyles cho điều khiển cá nhânhttps. //cdn. đồng bộ hóa. com/ej2/20. 4. 48/{PACKAGE-NAME}/styles/{THEME-NAME}. css

Thêm tài nguyên phía máy khách CDN vào phần tử của trang bố cục ~/Views/Shared/_Layout.cshtml

Ví dụ: các tập lệnh và kiểu cho ASP. NET MVC Lịch kiểm soát được liệt kê dưới đây

~/_Bố cục. cshtml

<head>
    ...
    
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" />
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" />
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" />

    
    <script src="https://cdn.syncfusion.com/ej2/20.4.48/ej2-base/dist/global/ej2-base.min.js">script>
    <script src="https://cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/dist/global/ej2-calendars.min.js">script>
head>

Ngoài những điều trên, Syncfusion ASP. NET MVC cung cấp các tập lệnh và kiểu mới nhất trong CDN mà không cần lập phiên bản. Bạn có thể sử dụng điều này trong môi trường phát triển nếu bạn muốn luôn sử dụng phiên bản tập lệnh và kiểu mới nhất. Không nên sử dụng điều này trong môi trường sản xuất

điều khiển Tham chiếu CDN Tham chiếu tập lệnh cho tất cả điều khiểnhttps. //cdn. đồng bộ hóa. com/ej2/dist/ej2. tối thiểu. tham chiếu jsStyles cho tất cả các điều khiểnhttps. //cdn. đồng bộ hóa. com/ej2/{THEME-NAME}. css

Trình quản lý gói nút (NPM)

Một gói trong Node. js bao gồm một tập hợp các tệp cần thiết cho mô-đun JavaScript có thể được đưa vào bất kỳ ứng dụng web nào. NPM là trình quản lý gói phổ biến cho cả gói công khai và riêng tư

Gói NPM đồng bộ hóa

Tập lệnh và biểu định kiểu của Syncfusion ASP. NET MVC điều khiển có thể được bao gồm trong một ASP. NET MVC sử dụng các gói NPM, vì Syncfusion xuất bản ASP của nó. NET MVC dưới dạng gói phạm vi trong NPM

Cài đặt các gói NPM trong ASP. ứng dụng web NET MVC

1. Mở Source Explorer và nhấp chuột phải vào tên ứng dụng. Sau đó, chọn mục menu “Thêm mục mới” để mở cửa sổ “Thêm mục mới”

2. Chọn “Web” ở bên trái Chế độ xem dạng cây và chọn “Tệp cấu hình npm” trong cửa sổ “Thêm mục mới” sẽ bao gồm và định cấu hình “gói. json” trong thư mục gốc của ASP. ứng dụng web NET MVC

3. Mở Source Explorer và nhấp chuột phải vào tên ứng dụng. Sau đó, chọn “Mở thư mục trong File Explorer”

4. Mở Dấu nhắc lệnh cho vị trí này và cài đặt các gói Đồng bộ hóa được yêu cầu bằng cách sử dụng “npm install @syncfusion/{PACKAGE_NAME} –save”

CLI MẠNG

npm install @syncfusion/ej2-calendars --save

5. Có thể tìm thấy các gói đã cài đặt cùng với tất cả các phụ thuộc của nó trong thư mục “node_modules” như trong hình sau

Từ các gói đã cài đặt

Tập lệnh và biểu định kiểu của Syncfusion ASP. NET MVC từ các gói được cài đặt cục bộ có thể được bao gồm trong một ASP. NET MVC sử dụng hai phương pháp sau

GHI CHÚ
Các tệp trong thư mục Nội dung chỉ có thể được truy cập ở phía máy khách, do đó, các tập lệnh Syncfusion và biểu định kiểu nên được sao chép từ node_modules sang Nội dung

Bằng cách sử dụng một trong các phương pháp sau, Tài nguyên phía máy khách có thể được tải trong ASP. ứng dụng web NET MVC

Sao chép tập lệnh và kiểu bằng gulp
Tạo tập lệnh và kiểu bằng CRG (Trình tạo tài nguyên tùy chỉnh)

Sao chép bằng Gulp

Cài đặt Syncfusion ASP cần thiết. NET MVC như đã đề cập trong “”

1. Ngoài Syncfusion ASP. NET MVC, cài đặt các gói gulp và global bằng các lệnh bên dưới

GHI CHÚ
Cài đặt Gulp - npm cài đặt gulp –save

CLI MẠNG

npm install gulp@latest --save

GHI CHÚ
Cài đặt toàn cầu - npm cài đặt toàn cầu –save

CLI MẠNG

npm install glob@latest --save

2. Để thiết lập máy chủ, Công cụ → Trình quản lý gói NuGet → Quản lý các gói NuGet cho Giải pháp. Sau đó, tìm kiếm và cài đặt “Microsoft. AspNetCore. Tệp tĩnh” và “Microsoft. bản đánh máy. gói MSBuild”

3. Mở Source Explorer và nhấp chuột phải vào tên ứng dụng. Sau đó, chọn mục menu “Thêm mục mới” để mở cửa sổ “Thêm mục mới”

4. Chọn “ASP. NET Core” ở bên trái Tree View và chọn “JavaScript File” trong cửa sổ “Add New Item”. Nó sẽ bao gồm một tệp js trong thư mục gốc của ASP. ứng dụng web NET MVC. Đổi tên tệp js thành “gulpfile. js”

5. Sao chép đoạn mã sau và dán vào gulpfile. js để tự động sao chép tập lệnh và kiểu từ “node_modules” sang “Nội dung” trong khi xây dựng ứng dụng web

gulpfile. js

/// 
// nodejs requiring statement for importing and using the package in this js file
var gulp = require('gulp');
var glob = require('glob');
// gulp task for copying file form “node_modules” to “Content” directory
gulp.task("copy-client-resource", function (done) {
    let packagePath = './node_modules/@syncfusion/';
    let destCommonPath = 'Content/syncfusion'
    let installedPackages = glob.sync(`${packagePath}*`);
    for (let insPackage of installedPackages) {
        let packagename = insPackage.replace(packagePath, '');
        gulp.src(`${insPackage}/dist/global/**/*`)
            .pipe(gulp.dest(`${destCommonPath}/${packagename}/`));
        gulp.src(`${insPackage}/styles/**/*.css`)
            .pipe(gulp.dest(`${destCommonPath}/${packagename}/styles/`));
    }
    done();
});

6. Xây dựng ASP. NET MVC và nhận thấy rằng một thư mục mới có tên “Syncfusion” được tạo trong thư mục “Content”

7. Nhấp chuột phải vào thư mục “Syncfusion” và đưa vào dự án như bên dưới

8. Thêm tài nguyên phía máy khách vào phần tử của ~/Views/Shared/_Layout.cshtml. Ở đây, tập lệnh và kiểu của Syncfusion ASP. NET MVC Calendar đã được tải chẳng hạn

~/_Bố cục. cshtml

<head>
    
    @Styles.Render("~/Content/syncfusion/ej2-calendars/styles/calendar/material.css")
    @Styles.Render("~/Content/syncfusion/ej2-base/styles/material.css")
    @Styles.Render("~/Content/syncfusion/ej2-buttons/styles/button/material.css")
    
    @Scripts.Render("~/Content/syncfusion/ej2-base/ej2-base.min.js")
    @Scripts.Render("~/Content/syncfusion/ej2-calendars/ej2-calendars.min.js")
head>

Trình tạo tài nguyên tùy chỉnh

Đồng bộ hóa ASP. NET MVC cung cấp tùy chọn để tạo tập lệnh của điều khiển bằng công cụ Trình tạo tài nguyên tùy chỉnh (CRG) cho ASP. Điều khiển NET MVC. Để tạo các tập lệnh kiểm soát bên ngoài bằng CRG, hãy tham khảo tại đây

Tôi có thể sử dụng JavaScript trong Cshtml không?

Thật không may, quá trình quét dựa trên trình quản lý gói (chẳng hạn như NPM), vì vậy chúng tôi không quét JavaScript được nhúng vào lúc này, vì vậy việc nhúng Javascript vào các tệp CSHTML sẽ gây ra lỗi . , and cannot submit CSHTML files to the Javascript scan because it isn't in the list of support file extensions.

Bạn có thể sử dụng JavaScript trong ASP NET MVC không?

JavaScript có thể được sử dụng trong asp. net mvc . Nếu bạn đi cho Asp. NET Web, không cần phải hiểu chi tiết về HTML, CSS hoặc JavaScript vì nó trừu tượng hóa tất cả các chi tiết này và cung cấp hệ thống ống nước tự động.

Làm cách nào để sử dụng JavaScript trong MVC C#?

To include a JavaScript function, it is as simple as include a

programming javascript

Bài Viết Liên Quan

Bài tập anh van 10 chuong trinh thi diem năm 2024

JavaScript trong cshtml asp net MVC

Tham chiếu CDN

Tham khảo CDN cho tất cả các điều khiển

Kiểm soát cá nhân Tham khảo CDN

Trình quản lý gói nút (NPM)

Gói NPM đồng bộ hóa

Cài đặt các gói NPM trong ASP. ứng dụng web NET MVC

Từ các gói đã cài đặt

Sao chép bằng Gulp

Trình tạo tài nguyên tùy chỉnh

Tôi có thể sử dụng JavaScript trong Cshtml không?

Bạn có thể sử dụng JavaScript trong ASP NET MVC không?

Làm cách nào để sử dụng JavaScript trong MVC C#?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội