Bài viết mới:

Chủ Nhật, 14 tháng 10, 2018

Xuất file Excel trong ASP.NET MVC






Chức năng xuất file Excel rất thường được sử dụng trong trang quản trị với các chức năng như backup, thống kê, báo cáo. Bài viết này hướng dẫn bạn thực hiện chức năng này bằng cách sử dụng package ClosedXml trên nền tảng web ASP.NET MVC.




Tạo ASP.NET MVC Project


Để tạo ứng dụng ASP.NET MVC mới, hãy mở Visual Studio, chuyển đến menu File và chọn New < Project.

Cửa sổ “New Project” hiện ra. Sau đó bạn chọn Visual C # < Web và từ khung bên phải, chỉ cần chọn ASP.NET Web Application. Nhập tên của ứng dụng “ExportExcelDemo” và nhấn OK.




Sau đó check vào lựa chọn MVC và click OK.




Thêm Entity Class


Chúng ta sẽ lấy dữ liệu từ cơ sở dữ liệu. Đầu tiên chúng ta sẽ thêm một số entity classes and 1 database access class.

Để thêm 1 class Model mới, click chuột phải vào thư mục Models và chọn Add Class.
Vì vậy, mình sẽ thêm các lớp thực thể và các lớp DbContext sau đây.


Employee.cs

  
 using System;
        using System.ComponentModel.DataAnnotations;
        namespace ExportExcelDemo.Models
        {
            public class Employee
            {
                [Key]
                public int Id
                {
                    get;
                    set;
                }
                public string Name
                {
                    get;
                    set;
                }
                public string Email
                {
                    get;
                    set;
                }
                public int Age
                {
                    get;
                    set;
                }
                public string Address
                {
                    get;
                    set;
                }
                public int DepartmentId
                {
                    get;
                    set;
                }
            }
        }


Department.cs


using System.ComponentModel.DataAnnotations; 
namespace ExportExcelDemo.Models
{
    public class Department
    {
        [Key]
        public int DepartmentId
        {
            get;
            set;
        }
        public string DepartmentName
        {
            get;
            set;
        }
    }


DbAccessContext.cs


Ở bài viết này mình đang sử dụng phương pháp Entity Framework Code First để lấy dữ liệu.

using System.Data.Entity;
namespace ExportExcelDemo.Models
{
    public class DbAccessContext : DbContext
    {
        public DbAccessContext() : base("DefaultConnection") { }
        public DbSet<Employee> Employees
        {
            get;
            set;
        }
        public DbSet<Department> Departments
        {
            get;
            set;
        }
    }
}


EmployeeViewModel.cs


namespace ExportExcelDemo.Models
{
    public class EmployeeViewModel
    {
        public string Name
        {
            get;
            set;
        }
        public string Email
        {
            get;
            set;
        }
        public int Age
        {
            get;
            set;
        }
        public string Address
        {
            get;
            set;
        }
        public string Department
        {
            get;
            set;
        }
    }
}


Add ClosedXml Library


Để xuất dữ liệu vào tệp Excel, chúng ta sử dụng thư viện ClosedXml. Để thêm nó vào ứng dụng của bạn, nhấn chuột phải vào dự án của bạn và chọn NuGet Manager. Ở đây, bạn cần phải tìm kiếm như hình dưới và nhấp vào Install.




Đợi một vài phút để thư viện ClosedXml được cài tự động vào ứng dụng của bạn.




Add Controller


Mình tiến hành tạo EmployeeController. Ở đây, mình sẽ viết code để lấy dữ liệu từ cơ sở dữ liệu, sử dụng phương pháp tiếp cận Code First và khi click vào button, ứng dụng sẽ xuất dữ liệu sang tệp Excel.

EmployeeController.cs

using ClosedXML.Excel;
using ExportExcelDemo.Models;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ExportExcelDemo.Controllers
{
    public class EmployeeController : Controller
    {
        public IList<EmployeeViewModel> GetEmployeeList()
        {
            DbAccessContext db = new DbAccessContext();
            var employeeList = (from e in db.Employees
                                join d in db.Departments on e.DepartmentId equals d.DepartmentId
                                select new EmployeeViewModel {
                                    Name = e.Name,
                                    Email = e.Email,
                                    Age = (int)e.Age,
                                    Address = e.Address,
                                    Department = d.DepartmentName
                                }).ToList();
            return employeeList;
        }
        // GET: Employee 
        public ActionResult Index()
        {
            return View(this.GetEmployeeList());
        }
        public ActionResult ExportToExcel()
        {
            var gv = new GridView();
            gv.DataSource = this.GetEmployeeList();
            gv.DataBind();
            Response.ClearContent();
            Response.Buffer = true;
            Response.AddHeader("content-disposition", "attachment; filename=DemoExcel.xls");
            Response.ContentType = "application/ms-excel";
            Response.Charset = "";
            StringWriter objStringWriter = new StringWriter();
            HtmlTextWriter objHtmlTextWriter = new HtmlTextWriter(objStringWriter);
            gv.RenderControl(objHtmlTextWriter);
            Response.Output.Write(objStringWriter.ToString());
            Response.Flush();
            Response.End();
            return View("Index");
        }
    }
}


Add View


Bây giờ, đã đến lúc thêm view để hiển thị dữ liệu. Do đó, hãy thêm view Index.cshtml và thay thế mã trong view thành như sau.


Index.cshtml


@model IList 
<ExportExcelDemo.Models.EmployeeViewModel>
@{ 
ViewBag.Title = "Index"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
@using (Html.BeginForm("ExportToExcel", "Employee", FormMethod.Post)) 
<br /> 
<br /> 
<h2> 
   Export Data To Excel 
</h2>
<table style="background-color: white; width: 100%;">
   <tr>
      <th style="border: 1px solid black; text-align: left; width: 20%; padding-left: 20px;"> 
         Name 
      </th>
      <th style="border: 2px solid black; text-align: center; width: 20%"> 
         Email 
      </th>
      <th style="border: 2px solid black; text-align: center; width: 20%"> 
         Age 
      </th>
      <th style="border: 2px solid black; text-align: center; width: 20%"> 
         Address 
      </th>
      <th style="border: 2px solid black; text-align: center; width: 20%"> 
         Department 
      </th>
   </tr>
   @foreach (var itm in Model) 
   { 
   <tr>
      <td style="padding-left: 20px;"> 
         @Html.DisplayFor(m => itm.Name) 
      </td>
      <td style="padding-left: 20px;"> 
         @Html.DisplayFor(m => itm.Email) 
      </td>
      <td style="padding-left: 20px;"> 
         @Html.DisplayFor(m => itm.Age) 
      </td>
      <td style="padding-left: 50px;"> 
         @Html.DisplayFor(m => itm.Address) 
      </td>
      <td style="padding-left: 50px;"> 
         @Html.DisplayFor(m => itm.Department) 
      </td>
   </tr>
   } 
   <tr>
      <td colspan="4"> 
         <br /> 
         <br /> 
         <input type="submit" value="Export to Excel" class="button" /> 
      </td>
   </tr>
</table>
}


Web.Config


<connectionStrings> 
<add name = "DefaultConnection" connectionString="Data Source=my-computer;Initial Catalog=TestEmployee;Integrated Security=True; user id=mukesh; password=mukesh;" providerName="System.Data.SqlClient" /> 
</connectionStrings> 

Mọi thứ đã hoàn thành. Tiến hành chạy app. Trình duyệt sẽ hiện kết quả như hình sau.



Bảng dữ liệu được lấy từ CSDL và khi bạn nhấn nút "Export to Excel" thì ứng dụng sẽ tải file Excel chứa dữ liệu như bảng về máy tính bạn. Vậy là thành công rồi đó.

Mọi thắc mắc bạn bình luận dưới bài viết nhé. Chúc bạn thực hành thành công.

Chủ Nhật, 23 tháng 9, 2018

CSDL tên Quốc gia, tỉnh thành phố thị xã quận huyện, xã phường Việt Nam


  • Thông tin 245 quốc gia trên thế giới 
  • Thông tin 64 tỉnh thành phố Việt Nam 
  • Thông tin 697 quận huyện / thị xã 
  • Thông tin 11110 xã phường 

Nguồn tài liệu tham khảo: cổng thông tin điện tử các tỉnh thành, quận huyện, từ điển bách khoa toàn thư điện tử Wikipedia.

Định dạng dữ liệu: bảng cơ sở dữ liệu SQL

Mục đích: chia sẻ giúp các bạn webmaster đang muốn lấy một nguồn thông tin chuẩn mực về tên các đơn vị hành chính cho các dự án website, cổng thông tin điện tử ….

Download: link tại đây

Chúc các bạn thành công


Nguồn https://tuanitpro.com

Thứ Tư, 19 tháng 9, 2018

Làm quen với SignalR trên ASP.NET Core sử dụng Visual Studio


Bài viết này hướng dẫn bạn những điều cơ bản về xây dựng ứng dụng thời gian thực (real-time) bằng cách sử dụng thư viện SignalR. Bạn sẽ học làm thế nào để:

  • Tạo 1 ứng dụng web sử dụng SignalR trên ASP.NET Core.
  • Tạo 1 SignalR hub trên server.
  • Kết nối đến SignalR hub từ client thông qua Javascript.
  • Sử dụng hub để gửi tin nhắn từ máy khách bất kỳ đến tất cả máy khách đã kết nối với ứng dụng.
Cuối cùng, bạn sẽ có 1 ứng dụng chat trực tuyến như hình dưới:



Điều kiện tiên quyết



Tạo project


  • Từ Menu chọn File > New Project.
  • Trong hộp thoại New Project, chọn Installed > Visual C# > Web > ASP.NET Core Web Application. Đặt tên project là SignalRChat.


  • Chọn Web Application để tạo project sử dụng Razor Pages.
  • Chọn ASP.NET Core 2.1 và click OK


Thêm thư viện SignalR


Để thêm thư viện SignalR bạn phải sử dụng công cụ Library Manager (LibMan) có sẵn ở Visual Studio 2017 15.8 trở lên. 
  • Trong Solution Explorer, click phải vào project và chọn Add > Client-Side Library.
  • Trên hộp thoại Add Client-Side Library, chọn Provider unpk.
  • Ở ôLibrary, nhập @aspnet/signalr@1 và chọn phiên bản mới nhất không phải bản preview.


  • Chọn Choose specific files, mở rộng thư mục dist/browser và chọn 2 file signalr.jssignalr.min.js.
  • Nhập Target Location là wwwroot/lib/signalr/ và click Install.
LibMan sẽ tạo thư mục wwwroot/lib/signalr và sao chép các file vào đó.

Tạo SignalR hub


Hub là 1 class phía máy chủ đóng vai trò như một đường ống (pipeline) để xử lý việc giao tiếp giữa client và server. 
  • Từ project, tạo thư mục Hubs.
  • Trong thư mục Hubs, tạo file ChatHub.cs với nội dung như sau: 
using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

Class ChatHub kế thừa class Hub. Hub là class quản lý các kết nối, nhóm và nhắn tin.

Phương thức SendMessage có thể được gọi từ bất kỳ client nào đã kết nối. Nó sẽ gửi tin nhắn nhận được đến tất cả client. Mã SignalR là bất đồng bộ để cung cấp khả năng mở rộng tối đa.


Cấu hình project sử dụng SignalR


Chúng ta cần cấu hình SignalR trong file Startup.cs trước khi sử dụng.  Thêm các đoạn mã được tô vàng phía dưới vào file Startup.cs.
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using SignalRChat.Hubs;

namespace SignalRChat
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });


            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

            services.AddSignalR();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseCookiePolicy();
            app.UseSignalR(routes =>
            {
                routes.MapHub<ChatHub>("/chatHub");
            });
            app.UseMvc();
        }
    }
}

Tạo mã phía client


Thay thế nội dung ở trang Pages/Index.cshtml bằng nội dung sau:
@page
<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-6">&nbsp;</div>
        <div class="col-6">
            User..........<input type="text" id="userInput" />
            <br />
            Message...<input type="text" id="messageInput" />
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <hr />
        </div>
    </div>
    <div class="row">
        <div class="col-6">&nbsp;</div>
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

Giải thích bước trên:
  1. Chúng ta vừa tạo ra textbox namemessage và button submit.
  2. Tạo thêm 1 danh sách <ul></ul> với id="messageList" để hiển thị nội dung tin nhắn nhận được từ hub
  3. Khai báo các tập tin script signalr.js và tập tin chat.js mà ta sẽ tạo ở bước dưới.
  • Tạo tập tin chat.js đặt trong thư mục wwwroot/js với nội dung sau:
"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

connection.on("ReceiveMessage", function (user, message) {
    var msg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var encodedMsg = user + " says " + msg;
    var li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

connection.start().catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});
Giải thích bước trên:
  1. Tạo và khởi động kết nối đến hub ChatHub.
  2. Thêm xử lý cho nút submit bằng cách gửi tin nhắn đến hub.
  3. Thêm vào đối tượng connection một trình xử lý nhận các tin nhắn từ hub và thêm chúng vào danh sách.

Chạy ứng dụng


Nhấn CTRL + F5 để chạy ứng dụng ở chế độ không debug.
Sau đó mở trang web từ 2 trình duyệt khác nhau và thử chat qua nhau. Nếu thành công thì thành quả sẽ như hình dưới đây.


Mọi thắc mắc bạn có thể comment phía dưới bài viết nhé. Chúc bạn thành công.

Thứ Sáu, 7 tháng 9, 2018

Xây dựng Shopping Cart với Session trong ASP.NET CORE MVC


Giỏ hàng trực tuyến

Tạo Project ASP.NET Core MVC 


Từ Visual Studio, chọn tạo ASP.NET Core Web Application project


Chọn Empty Template


Click OK để hoàn tất.




Thêm Các Tệp Hình Ảnh


Tạo thư mục images trong thư mục wwwroot. Sao chép các hình ảnh sử dụng trong project vào thư mục.

Bổ Sung Configurations


Mở file Startup.cs và thêm các lệnh cấu hình mới như sau:

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;

namespace LearnASPNETCoreMVCWithRealApps
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            services.AddSession();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseSession();

            app.UseStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Demo}/{action=Index}/{id?}");
            });

        }
    }
}

Entities Class


Tạo thư mục tên Models. Trong thư mục này, tạo các class thực thể như bên dưới:

Product Entity

Tạo class Product.cs như sau:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace LearnASPNETCoreMVCWithRealApps.Models
{
    public class Product
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
        public string Photo { get; set; }
    }
}


Item Entity

Tạo class Entity.cs như sau:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace LearnASPNETCoreMVCWithRealApps.Models
{
    public class Item
    {
        public Product Product { get; set; }

        public int Quantity { get; set; }
    }
}

Tạo Session Helper


Tạo thư mục tên Helpers. Trong thư mục này, tạo class SessionHelper.cs như sau:

using Microsoft.AspNetCore.Http;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace LearnASPNETCoreMVCWithRealApps.Helpers
{
    public static class SessionHelper
    {
        public static void SetObjectAsJson(this ISession session, string key, object value)
        {
            session.SetString(key, JsonConvert.SerializeObject(value));
        }

        public static T GetObjectFromJson<T>(this ISession session, string key)
        {
            var value = session.GetString(key);
            return value == null ? default(T) : JsonConvert.DeserializeObject<T>(value);
        }
    }
}

Tạo thư mục tên Controllers. Trong thư mục này bạn tạo các controllers sau:

ProductController


Tạo class ProductController.cs nội dung như sau:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using LearnASPNETCoreMVCWithRealApps.Models;
using Microsoft.AspNetCore.Mvc;

namespace LearnASPNETCoreMVCWithRealApps.Controllers
{
    [Route("product")]
    public class ProductController : Controller
    {
        [Route("")]
        [Route("index")]
        [Route("~/")]
        public IActionResult Index()
        {
            ProductModel productModel = new ProductModel();
            ViewBag.products = productModel.findAll();
            return View();
        }
    }
}

CartController


Tạo class CartController.cs nội dung như sau:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using LearnASPNETCoreMVCWithRealApps.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using LearnASPNETCoreMVCWithRealApps.Helpers;

namespace LearnASPNETCoreMVCWithRealApps.Controllers
{
    [Route("cart")]
    public class CartController : Controller
    {
        [Route("index")]
        public IActionResult Index()
        {
            var cart = SessionHelper.GetObjectFromJson<List<Item>>(HttpContext.Session, "cart");
            ViewBag.cart = cart;
            ViewBag.total = cart.Sum(item => item.Product.Price * item.Quantity);
            return View();
        }

        [Route("buy/{id}")]
        public IActionResult Buy(string id)
        {
            ProductModel productModel = new ProductModel();
            if (SessionHelper.GetObjectFromJson<List<Item>>(HttpContext.Session, "cart") == null)
            {
                List<Item> cart = new List<Item>();
                cart.Add(new Item { Product = productModel.find(id), Quantity = 1 });
                SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
            }
            else
            {
                List<Item> cart = SessionHelper.GetObjectFromJson<List<Item>>(HttpContext.Session, "cart");
                int index = isExist(id);
                if (index != -1)
                {
                    cart[index].Quantity++;
                }
                else
                {
                    cart.Add(new Item { Product = productModel.find(id), Quantity = 1 });
                }
                SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
            }
            return RedirectToAction("Index");
        }

        [Route("remove/{id}")]
        public IActionResult Remove(string id)
        {
            List<Item> cart = SessionHelper.GetObjectFromJson<List<Item>>(HttpContext.Session, "cart");
            int index = isExist(id);
            cart.RemoveAt(index);
            SessionHelper.SetObjectAsJson(HttpContext.Session, "cart", cart);
            return RedirectToAction("Index");
        }

        private int isExist(string id)
        {
            List<Item> cart = SessionHelper.GetObjectFromJson<List<Item>>(HttpContext.Session, "cart");
            for (int i = 0; i < cart.Count; i++)
            {
                if (cart[i].Product.Id.Equals(id))
                {
                    return i;
                }
            }
            return -1;
        }

    }
}

Tạo View


Tạo thư mục Views. Trong thư mục này bạn tạo các views sau:

Product View

Tạo thư mục Product. Trong thư mục Views/Product, bạn tạo file Index.cshtml nội dung như sau:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>

    <h3>Products List</h3>
    <table cellpadding="2" cellspacing="2" border="1">
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Photo</th>
            <th>Price</th>
            <th>Buy</th>
        </tr>
        @foreach (var product in ViewBag.products)
        {
            <tr>
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td><img src="~/images/@product.Photo" width="60" /> </td>
                <td>@product.Price</td>
                <td align="center">
                    <a asp-controller="cart" asp-action="buy" asp-route-id="@product.Id">Buy Now</a>
                </td>
            </tr>
        }
    </table>

</body>
</html>

Cart View


Tạo thư mục Cart. Trong thư mục Views/Cart, bạn tạo file Index.cshtml nội dung như sau: 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>

    <h3>Cart Page</h3>
    <table cellpadding="2" cellspacing="2" border="1">
        <tr>
            <th>Option</th>
            <th>Id</th>
            <th>Name</th>
            <th>Photo</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Sub Total</th>
        </tr>
        @foreach (var item in ViewBag.cart)
        {
            <tr>
                <td><a asp-controller="cart" asp-action="remove" asp-route-id="@item.Product.Id">Remove</a></td>
                <td>@item.Product.Id</td>
                <td>@item.Product.Name</td>
                <td><img src="~/images/@item.Product.Photo" width="60" /> </td>
                <td>@item.Product.Price</td>
                <td>@item.Quantity</td>
                <td>@(item.Product.Price * item.Quantity)</td>
            </tr>
        }
        <tr>
            <td align="right" colspan="6">Sum</td>
            <td>
                @ViewBag.total
            </td>
        </tr>
    </table>
    <br>
    <a asp-controller="product" asp-action="index">Continue Shopping</a>

</body></html> 

Tạo Razor View Imports


Click phải thư mục Views chọn Add\New Item


Chọn Web\ASP.NET bên khung trái. Sau đó chọn Razor View Imports item và click Add để hoàn tất.


Trong file _ViewImports.cshtml thêm lệnh sau:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Toàn bộ cấu trúc của project sẽ như hình dưới:



Chạy Ứng Dụng


Tiến hành chạy ứng dụng web để xem kết quả. 

Trang Product/Index


Click Buy Now để mua sản phẩm và hiển thị trang giỏ hàng.

Trang Cart/Index