Embedded Files
I. Thiết kế layout
I. Thiết kế layout
Hướng dẫn Sử dụng template: Chefer-1.0.0.zip.
Bước 0: Copy file Chefer-1.0.0.zip vào thư mục wwwroot, giải nén
Bước 1: Tạo mới Razor Layout có tên _CustomerLayout.cshtml.
Bước 2: Chèn nội dung CSS vào _CustomerLayout.cshtml.
Mở file index.html, sao chép nội dung bên trong thẻ <head> và dán vào thẻ <head> của _CustomerLayout.cshtml.
Chỉnh sửa đường dẫn cho đúng: ~/Chefer-1.0.0/....
Bước 3: Chèn nội dung JavaScript vào _CustomerLayout.cshtml.
Mở file index.html, sao chép nội dung phần JavaScript ở cuối thẻ <body> và dán vào cuối thẻ <body> của _CustomerLayout.cshtml.
Chỉnh sửa đường dẫn cho đúng: ~/Chefer-1.0.0/....
Bước 4: Chèn các phần giống nhau vào phần body (ví dụ header, footer....)
Nhận thấy phần header của các trang giống nhau, xác định phần giống nhau bằng cách nhấp chuột phải vào nội dung cần xác định khối HTML chứa, chọn Inspect và xác định khối chứa.
Mở trang index.html, sao chép phần khối chung và dán vào _CustomerLayout.cshtml.
Bước 5: Chạy thử project để xem thay đổi
Bước 6: Thực hiện các action trong Home tương ứng với các trang html đã thiết kế sẵn
index.html ==> /Home/Index
about.html ==> /Home/About
contact.html ==> /Home/Contact
menu.html ==> /Home/Menu
feature.html ==> /Home/Features
team.html ==> /Home/Team
testimonial.html ==> /Home/Testimonial
II. Areas
II. Areas
Areas provide a way to partition an ASP.NET Core Web app into smaller functional groups, each with its set of Razor Pages, controllers, views, and models. An area is effectively a structure inside an app. In an ASP.NET Core web project, logical components like Pages, Model, Controller, and View are kept in different folders. The ASP.NET Core runtime uses naming conventions to create the relationship between these components. For a large app, it may be advantageous to partition the app into separate high-level areas of functionality. For example, consider an e-commerce app that has multiple business units, including checkout, billing, and search. Each of these units has its area to contain views, controllers, Razor Pages, and models.
Consider using Areas in a project when:
The app is made of multiple high-level functional components that can be logically separated.
You aim to divide the application into distinct functional areas for independent work.
Create a new area
Create a new area
To add a new Area, Right Click on application name from solution explorer -> Select Add -> Select New Scaffolded Item -> select MVC Area from middle pane of dialog box -> Enter Name of Area -> Click Ok.
If you already have Areas folder in the application, you can just right-click on Areas folder -> Add -> Area -> You will see a template -> from common -> select MVC Area -> give the area name (for example: Employee) and click Ok.
For example, we create 2 areas are: Department and Employee,
ASP.NET Core MVC Area Route
ASP.NET Core MVC Area Route
The default route is added to the application. To redirect the client to the correct Area you will have to create endpoint routes.
We should add a new route as suggested in ScaffoldingReadMe.txt and place it in Program.cs before the default route.
app.MapControllerRoute(
name: "areas",
pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}"
);
Assume we created a new controller Sales inside the department area. The above code will redirect requests to the Sales controller of the Department area. Following URL patterns will be redirected to it.
http://domainname.com/department
http://domainname.com/department/sales
http://domainname.com/department/sales/index
Create Models
Create Models
In this step, we will add models to Department and Employee Area. Right-click on Areas -> Department -> Models folder and add a new class file with the name Location.cs and add the following code to it. This model will be used for the Sales Department location.
namespace AreaDemo.Areas.Departments.Models
{
public class Location
{
public int ID { get; set; }
public string Address { get; set; }
public string City { get; set; }
}
}
To add Employee model right-click on Areas -> Department -> Models and a new class with file name Employee.cs. A View from Employee area will be using this model to show employees from a specific location of the sales department.
Add the following code in Employee.cs to define the Employee model
namespace AreaDemo.Areas.Employee.Models
{
public class Employee
{
public int ID { get; set; }
public string Name { get; set; }
public string Designation { get; set; }
public int LocationID { get; set; }
}
}
Areas specific Controller and Action Method
Areas specific Controller and Action Method
As Area is meant to partition large Web applications into smaller logical groups. So Department related functionality will be added to Department Area and Employee related functionality will be added to Employee Area.
You can add multiple controllers, views, and models that are related to the specific features. Here add SalesController that is related to Department Area.
Add SalesController under Areas -> Department -> Controllers folder. You will have a default MVC Action method with name Index in SalesController.cs file
Similarly, add a controller under the Areas -> Employee -> Controllers folder with the name EmployeeController.
Add following code to SalesController. This code creates and bind list of model objects.
namespace AreaDemo.Areas.Departments.Controllers
{
[Area("Department")]
public class SalesController : Controller
{
public IActionResult Index()
{
var salesLocation = new List<Location>
{
new Location{ID=1, Address="Nguyễn Hữu Thọ", City="Tân Phong" },
new Location{ID=2, Address="An Dương Vương", City="Chợ Quán" },
new Location{ID=3, Address="Tạ Quang Bửu", City="Chánh Hưng" },
new Location{ID=4, Address="Đống Đa", City="Tân Sơn Hòa" }
};
return View(salesLocation);
}
}
}
In the Employee area add a controller with the name SalesEmployeeController.cs. This controller will have an Action method to display employee lists from a specific location. This action method will be called from different areas.
Add the following code to SalesEmployeeController.
namespace AreaDemo.Areas.Employee.Controllers
{
[Area("Employee")]
public class SalesEmployeeController : Controller
{
[HttpGet]
public IActionResult GetEmployeeListByLocation(int locationID)
{
var employees = new List<Models.Employee>
{
new Models.Employee
{
ID = 1, Name = "Robert",
Designation="Manager",LocationID=1
},
new Models.Employee
{
ID = 2, Name = "Steve",
Designation="Developer", LocationID=1
},
new Models.Employee
{
ID = 3, Name = "Rajan",
Designation="CEO", LocationID=2
},
};
Models.Employee[] empList = employees.Where(item => item.LocationID == locationID).ToArray();
return View(empList);
}
}
}
Area Specific Views
Area Specific Views
In this step, you will add views for Department and Employee Area. Department Area View will display the list of sales locations with the link to see employees that belong to a specific locations.
Add a view under Areas -> Department -> Views -> Sales folder with name Index.cshtml. Add following HTML code to it.
@model IEnumerable<AreaDemo.Areas.Departments.Models.Location>
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers
@{
Layout = "~/Views/Shared/_layout.cshtml";
}
<div class="table-responsive">
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th>ID</th>
<th>Address</th>
<th>City</th>
<th>Employee List</th>
</tr>
</thead>
<tbody>
@foreach (var p in Model)
{
<tr>
<td>@p.ID</td>
<td>@p.Address</td>
<td>@p.City</td>
<td>
<a asp-area="Employee"
asp-controller="SalesEmployee"
asp-action="GetEmployeeListByLocation"
asp-route-locationID=@p.ID>
View Employee List
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
if you redirect to http://localhost:<port number>/department/sales. You will see the following output.
Notice the link "View Employee List" links to the different areas using the asp-area attribute of the anchor tag. The asp-route-locationID passes locationID to Action method of Employee Area.
To display the Employee List from a specific sales location, add a view under Areas -> Employee -> Views -> SalesEmployee folder. The name of the view should be the same as the action method created in the Employee controller. So name it as GetEmployeeListByLocation.cshtml.
Add the following HTML code to it.
@model IEnumerable<AreaDemo.Areas.Employee.Models.Employee>
@{
Layout = "~/Views/Shared/_layout.cshtml";
}
<div class="table-responsive">
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th>ID</th>
<th>Name</th>
<th>Designation</th>
<th>LocationID</th>
</tr>
</thead>
<tbody>
@foreach (var p in Model)
{
<tr>
<td>@p.ID</td>
<td>@p.Name</td>
<td>@p.Designation</td>
<td>@p.LocationID</td>
</tr>
}
</tbody>
</table>
</div>
Multiple Area file structure will look like this.
Call Area specific Action method
Call Area specific Action method
There are multiple ways you can call an action method from a different or same Areas. All of the following ways call an Action method Index from the Home controller of the Admin Area.
<a asp-area="admin" asp-controller="Home" asp-action="index">Go to Admin Area</a>
<a href="@Url.Action("index","home",new {Area="admin"})">Go to Admin Area</a>
<a href="/admin/Home/index">Go to Admin Area</a>
You can also redirect to any action method from same or different Area. The following code redirects current action method to Home controller's, index action method, of Admin Area.
public RedirectToActionResult RedirectToActionResultTest()
{
//Redirects to Index Action Method from Home Controller of Admin Area
return RedirectToAction(actionName: "Index", controllerName: "Home",
new { area = "Admin" });
}
Google Sites
Report abuse