Trong thời đại số hóa ngày càng phát triển, việc sở hữu một website bán hàng chuyên nghiệp là yếu tố quan trọng giúp doanh nghiệp tiếp cận khách hàng và mở rộng thị trường. ASP.NET, một nền tảng phát triển web mạnh mẽ do Microsoft phát triển, mang lại giải pháp tối ưu cho việc xây dựng các trang web thương mại điện tử.
Bài viết này sẽ hướng dẫn bạn từng bước trong quy trình xây dựng website bán hàng bằng ASP.NET, từ việc thiết kế giao diện đến triển khai các tính năng như giỏ hàng, thanh toán trực tuyến, và quản lý sản phẩm. Hãy cùng khám phá cách tạo nên một trang web bán hàng chuyên nghiệp và hiệu quả, đáp ứng nhu cầu kinh doanh hiện đại.
Ví dụ chúng ta có một website bán xe đạp như hình dưới và mình sẽ phân tích và xây dựng website này bằng Asp net cho các bạn.
- Đầu tiên ta cần Cài đặt danh sách các gói NuGet cần thiết sau đây từ nguồn cấp dữ liệu Telerik NuGet:
Telerik.Reporting.Services.AspNetCore
Telerik.Reporting.WebServiceDataSource
Telerik.Reportin.OpenXmlRendering
- Cấu hình Dịch vụ REST báo cáo trong tệp Program.cs:
using Telerik.Reporting.Cache.File;
using Telerik.Reporting.Services;
using Services.Interfaces;
using Services;
var builder = WebApplication.CreateBuilder(args);
…
builder.Services.TryAddSingleton<IReportServiceConfiguration>(sp => new ReportServiceConfiguration
{
ReportingEngineConfiguration = sp.GetService<IConfiguration>(),
HostAppId = "Html5ReportViewerDemo",
Storage = new FileStorage(),
ReportSourceResolver = new UriReportSourceResolver(
System.IO.Path.Combine(GetReportsDir(sp)))
});
…
static string GetReportsDir(IServiceProvider sp)
{
var iwhe = sp.GetService<IWebHostEnvironment>();
if (iwhe == null)
{
throw new ArgumentNullException(nameof(sp));
}
return Path.Combine(iwhe.ContentRootPath, "Reports");
}
Tiếp theo tạo ReportsController:
namespace Web.Controllers
{
using Telerik.Reporting.Services.AspNetCore;
using Telerik.Reporting.Services;
using Microsoft.AspNetCore.Mvc;
using System.Net.Mail;
using System.Net;
[Route("api/reports")]
public class ReportsController : ReportsControllerBase
{
public ReportsController(IReportServiceConfiguration reportServiceConfiguration)
: base(reportServiceConfiguration)
{ }
}
}
Tiếp theo Shared View (“/Shared/ReportViewer.cshtml”) chứa Report Viewer, mục đích là hiển thị Telerik Reports và cho phép người dùng tương tác với chúng. Đây là một cách tiếp cận tuyệt vời vì cùng một View có thể được sử dụng lại cho tất cả các báo cáo ứng dụng. Bạn chỉ cần cấu hình các tùy chọn “serviceUrl” và “reportSource” trong telerik_ReportViewerphương pháp:
@{
ViewData["Title"] = "Report Viewer";
var parameter = Html.Raw(Json.Serialize(Model.Parameters));
}
@model Models.ViewModels.ReportSourceModel
<script src=" https://reporting.cdn.telerik.com/16.2.22.1109/js/telerikReportViewer.min.js"></script>
<div class="report-container">
<div id="reportViewer1">
loading...
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#reportViewer1")
.telerik_ReportViewer({
serviceUrl: "@Context.Request.PathBase.Value/api/reports",
reportSource: {
report: '@Model.ReportId',
parameters: @parameter
},
viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
scaleMode: telerikReportViewer.ScaleModes.FIT_PAGE_WIDTH,
scale: 0.6,
sendEmail: { enabled: true }
});
});
</script>
Danh mục sản phẩm:
Trên trang chủ của ứng dụng, danh mục sản phẩm có các danh mục và danh mục con có thể được mở thông qua Telerik Report Viewer.
Khi nhấp vào nút “Download Product Catalog”, một yêu cầu đến ProductCatalog Action trong Home Controller sẽ được gửi đi. ProductCatalog Action sẽ tải tệp .trdp có liên quan vào ReportViewer:
public IActionResult ProductCatalog()
{
var reportSource = new ReportSourceModel()
{
ReportId = "ProductCatalog.trdp"
};
return View("~/Views/Shared/ReportViewer.cshtml", reportSource);
}
* Đặt hàng hóa đơn:
Như đã mô tả trước đó trong bài đăng, người dùng có thể tạo đơn hàng mới, xem danh sách các đơn hàng đã mua, xem thông tin chi tiết cho từng đơn hàng và nhận hóa đơn cho từng đơn hàng.
Vào “Orders” và nhấp vào liên kết “View Order” cho một đơn hàng cụ thể. Sau đó, nhấp vào nút “View Invoice” được hiển thị bên dưới Grid chứa thông tin chi tiết về đơn hàng. Nhấp vào nút sẽ gửi yêu cầu đến Invoice Action trong Account Controller.
Việc triển khai Hành động hóa đơn tương tự như đối với ProductCatalog ở trên. Về cơ bản, tệp .trdp cần thiết (trong trường hợp này là “OrderInvocie.trdp”) sẽ được gửi đến ReportViewer để tạo báo cáo. Sự khác biệt là trong trường hợp này, một tham số có số hóa đơn cũng được gửi đến báo cáo. Do đó, ReportViewer sẽ sử dụng tham số đã gửi để truy xuất dữ liệu cho hóa đơn đã chọn và sẽ tạo báo cáo cho hóa đơn đó.
{
Dictionary<string, object> parameters = new Dictionary<string, object>();
parameters.Add("OrN", orderNumber);
var reportSource = new ReportSourceModel()
{
ReportId = "OrderInvoice.trdp",
Parameters = parameters
};
return View("~/Views/Shared/ReportViewer.cshtml", reportSource);
}
Xuất PDF:
Việc xuất tất cả các sản phẩm yêu thích ở định dạng PDF được thực hiện trên máy chủ theo cách sau:
- Lấy các sản phẩm yêu thích đã lưu của người dùng hiện đang đăng nhập từ cơ sở dữ liệu.
- Tạo UriReportSource và truyền dữ liệu sản phẩm yêu thích được tuần tự hóa dưới dạng tham số cho Report Source.
- Sử dụng phương thức RenderReport để hiển thị báo cáo ở định dạng PDF. Phương thức này chuyển đổi nội dung của báo cáo thành một mảng byte theo định dạng đã chỉ định, như được giải thích trong phần tạo báo cáo cục bộ trong tài liệu Telerik Reporting .
- Trả lại tài liệu đã tạo cho khách hàng:
[HttpGet]
public async Task<ActionResult> FavouritesReport()
{
var userEmail = User.FindFirstValue(ClaimTypes.Email);
var userDetails = await userService.GetUserPersonalDetails(userEmail);
var userName = userDetails.FirstName + " " + userDetails.LastName;
var reportData = new FavoriteUserProductViewModel()
{
UserName = userName,
FavoriteReportProducts = new List<FavoriteReportProductViewModel>()
};
var favoriteProductIds = HttpContext.Session.Get<List<int>>("_Favorites");
var favoriteProducts = userService.GetFavoriteProductsById(favoriteProductIds);
foreach (var favoriteProduct in favoriteProducts)
{
byte[]? largePhotoData = await productService.GetProductLargePhotoById((int)favoriteProduct.PhotoId);
reportData.FavoriteReportProducts.Add(new FavoriteReportProductViewModel
{
Id = favoriteProduct.Id,
ProductName = favoriteProduct.Name,
Price =(decimal)favoriteProduct.FinalPrice,
LargePhoto = largePhotoData
});
}
var reportProcessor = new Telerik.Reporting.Processing.ReportProcessor();
var reportSource = new Telerik.Reporting.UriReportSource();
reportSource.Uri = "./Reports/FavouritesNew.trdp";
string parameterValue = Newtonsoft.Json.JsonConvert.SerializeObject(reportData);
reportSource.Parameters.Add("JSONData", parameterValue);
Telerik.Reporting.Processing.RenderingResult result = reportProcessor.RenderReport("PDF", reportSource, null);
if (!result.HasErrors)
{
return File(result.DocumentBytes, "application/pdf", "favourites.pdf");
//use this code if you want to save the file locally
//string fileName = result.DocumentName + "." + result.Extension;
//string path = System.IO.Path.GetTempPath();
//string filePath = System.IO.Path.Combine(path, fileName);
//
//using (System.IO.FileStream fs = new System.IO.FileStream(filePath, System.IO.FileMode.Create))
//{
// fs.Write(result.DocumentBytes, 0, result.DocumentBytes.Length);
//}
}
return NotFound();
}