Scribd
Upload
4 views50 pages

Core MVC 6.0 - Chapter 9

The document provides a comprehensive guide on implementing search and report functionalities in ASP.NET Core MVC 6.0. It includes detailed code snippets for creating search actions in the Admin controller, designing search and report views, and utilizing DataTables for enhanced table features. Additionally, it covers the integration of jQuery and DataTables scripts to facilitate data manipulation and presentation in the application.

Uploaded by

alhamzahaudie255
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views50 pages

Core MVC 6.0 - Chapter 9

The document provides a comprehensive guide on implementing search and report functionalities in ASP.NET Core MVC 6.0. It includes detailed code snippets for creating search actions in the Admin controller, designing search and report views, and utilizing DataTables for enhanced table features. Additionally, it covers the integration of jQuery and DataTables scripts to facilitate data manipulation and presentation in the application.

Uploaded by

alhamzahaudie255
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 50

ASP.NET Core MVC 6.

0
Education and Training Solutions 2023
Chapter 1
1 Search

Model
2 DataTables

3 Reports
View Controller
Search
Create Search Action in Admin Controller

[HttpGet]
public IActionResult Search()
{
var modelContext =
_context.ProductCustomers.Include(p =>
p.Customer).Include(p => p.Product).ToList();
return View(modelContext);
}
Create Search Action in Admin Controller

[HttpPost]
public async Task<IActionResult> Search(DateTime?
stratDate, DateTime? endDate)
{

var modelContext =
_context.ProductCustomers.Include(p =>
p.Customer).Include(p => p.Product);

if (stratDate == null && endDate == null)


{
return View(modelContext);
Create Search Action in Admin Controller

}
else if (stratDate == null && endDate != null)
{

var result = await modelContext.Where(x =>


x.DateFrom.Value.Date == endDate).ToListAsync();
return View(result);
}

else if (stratDate != null && endDate == null)


{
Create Search Action in Admin Controller

var result = await modelContext.Where(x =>


x.DateFrom.Value.Date == stratDate).ToListAsync();
return View(result);
}
else
{
var result = await modelContext.Where(x =>
x.DateFrom >= stratDate && x.DateFrom <=
endDate).ToListAsync();
return View(result);
}
}
Create a Search view

12 April 2021
Tahaluf Training Centre
In the Search view create a form that searches between two dates
and a table to show the result

@model IEnumerable<ProductCustomer>
@{
ViewData["Title"] = "Search";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<div class="row">
<div class="col-6">
<form action="Search" method="post">
<input type="date" class="form-control"
name="stratDate" placeholder="Start Date">
In the Search view create a form that searches between two dates
and a table to show the result

<input type="date" class="form-control"


name="endDate" placeholder="End Date">

<button type="submit" class="btn


btn-dark">Search</button>

</form>
</div>
</div>
<div class="row">
<div class="col-10">
In the Search view create a form that searches between two dates
and a table to show the result

<table class="table example">


<thead>
<tr>
<th>Customer First Name </th>
<th>Customer Last Name </th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Date From</th>
<th>Date To</th>
</tr>
</thead>
In the Search view create a form that searches between two dates
and a table to show the result

<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Customer.Fname)
</td>
<td>
@Html.DisplayFor(modelItem => item.Customer.Lname)
</td>
In the Search view create a form that searches between two dates
and a table to show the result

<td>
@Html.DisplayFor(modelItem => item.Product.Namee)
</td>
<td>
@Html.DisplayFor(modelItem => item.Quantity)
</td>
<td>
@(item.Quantity * item.Product.Price)
</td>
In the Search view create a form that searches between two dates
and a table to show the result

<td>
@Html.DisplayFor(modelItem => item.DateFrom)
</td>
<td>
@Html.DisplayFor(modelItem => item.DateTo)
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
The Result

12 April 2021
Tahaluf Training Centre
DataTables
DataTables is a plug-in for the jQuery Javascript library. It's a powerful tool that
adds a lot of advanced features to any HTML table such as Pagination, Instant
search, and Multi-column ordering

12 April 2021
Tahaluf Training Centre
In JoinTable view add the attribute Id = “example” in the start tag
of the table

12 April 2021
Tahaluf Training Centre
Add the following link to the top of the Join Table view

<link
href="https://cdn.datatables.net/1.11.1/css/jquery.d
ataTables.min.css" rel="stylesheet" />
<link
href="https://cdn.datatables.net/buttons/2.0.0/css/b
uttons.dataTables.min.css" rel="stylesheet" />
Add the following Scripts to the end of the JoinTable view

<script src="https://code.jquery.com/jquery-
3.5.1.js"></script>
<script
src="https://cdn.datatables.net/1.11.1/js/jquery.da
taTables.min.js" defer></script>

<script
src="https://cdn.datatables.net/buttons/2.0.0/js/da
taTables.buttons.min.js" defer></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3
.1.3/jszip.min.js"></script>
Add the following Scripts to the end of the JoinTable view

<script
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake
/0.1.53/pdfmake.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake
/0.1.53/vfs_fonts.js"></script>
<script
src="https://cdn.datatables.net/buttons/2.0.0/js/bu
ttons.html5.min.js" defer></script>
Add the following Scripts to the end of the JoinTable view

<script>
$(document).ready(function () {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
}); });
</script>
The Result

12 April 2021
Tahaluf Training Centre
Reports
Exercise

Create a View called Report that Contains what you learned in the
previous two lectures.

Hint: Search, Tuple, DateTable, Join

12 April 2021
Tahaluf Training Centre
Create Report action in the Admin controller.

[HttpGet]
public IActionResult Report()
{
var customer = _context.Customers.ToList();
var procustomers =
_context.ProductCustomers.ToList();
var products = _context.Products.ToList();
var categoreys = _context.Categories.ToList();
var multiTable = from c in customer
join pc in procustomers on c.Id equals
pc.CustomerId
Create Report action in the Admin controller.

join p in products on pc.ProductId equals p.Id


join cat in categoreys on p.CategoryId equals
cat.Id
select new JoinTables { Product = p, Customer = c,
ProductCustomer = pc, Category = cat };

var modelContext =
_context.ProductCustomers.Include(p =>
p.Customer).Include(p => p.Product).ToList();
ViewBag.TotalQuantity = modelContext.Sum(x =>
x.Quantity);

}
Create Report action in the Admin controller.

ViewBag.TotalPrice = modelContext.Sum(x =>


x.Product.Price * x.Quantity);
var model3 = Tuple.Create<IEnumerable<JoinTables>,
IEnumerable<ProductCustomer>>(multiTable,
modelContext);
return View(model3);
Create Report action in the Admin controller.

[HttpPost]
public async Task<IActionResult> Report(DateTime?
stratDate, DateTime? endDate)
{
var customer = _context.Customers.ToList();
var procustomers =
_context.ProductCustomers.ToList();
var products = _context.Products.ToList();
var categoreys = _context.Categories.ToList();
var multiTable = from c in customer
Create Report action in the Admin controller.

join pc in procustomers on c.Id equals


pc.CustomerId
join p in products on pc.ProductId equals p.Id
join cat in categoreys on p.CategoryId equals
cat.Id
select new JoinTables { Product = p, Customer = c,
ProductCustomer = pc, Category = cat };
var modelContext =
_context.ProductCustomers.Include(p =>
p.Customer).Include(p => p.Product);

if (stratDate == null && endDate == null)


{
Create Report action in the Admin controller.

ViewBag.TotalQuantity = modelContext.Sum(x =>


x.Quantity);
ViewBag.TotalPrice = modelContext.Sum(x =>
x.Product.Price * x.Quantity);
var model3 = Tuple.Create<IEnumerable<JoinTables>,
IEnumerable<ProductCustomer>>(multiTable, await
modelContext.ToListAsync());
return View(model3);

}
else if (stratDate == null && endDate != null)
{
Create Report action in the Admin controller.

ViewBag.TotalQuantity = modelContext.Where(x =>


x.DateFrom.Value.Date == endDate).Sum(x =>
x.Quantity);
ViewBag.TotalPrice = modelContext.Where(x =>
x.DateFrom.Value.Date == endDate).Sum(x =>
x.Product.Price * x.Quantity);
var model3 = Tuple.Create<IEnumerable<JoinTables>,
IEnumerable<ProductCustomer>>(multiTable, await
modelContext.Where(x => x.DateFrom.Value.Date ==
endDate).ToListAsync());
return View(model3);
}
Create Report action in the Admin controller.

else if (stratDate != null && endDate == null)


{
ViewBag.TotalQuantity = modelContext.Where(x =>
x.DateFrom.Value.Date == stratDate).Sum(x =>
x.Quantity);
ViewBag.TotalPrice = modelContext.Where(x =>
x.DateFrom.Value.Date == stratDate).Sum(x =>
x.Product.Price * x.Quantity);
var model3 = Tuple.Create<IEnumerable<JoinTables>,
IEnumerable<ProductCustomer>>(multiTable, await
modelContext.Where(x => x.DateFrom.Value.Date ==
Create Report action in the Admin controller.

stratDate).ToListAsync());
return View(model3);
}
else
{
ViewBag.TotalQuantity = modelContext.Where(x =>
x.DateFrom >= stratDate && x.DateFrom <=
endDate).Sum(x => x.Quantity);
ViewBag.TotalPrice = modelContext.Where(x =>
x.DateFrom >= stratDate && x.DateFrom <=
endDate).Sum(x => x.Product.Price * x.Quantity);
Create Report action in the Admin controller.

var model3 = Tuple.Create<IEnumerable<JoinTables>,


IEnumerable<ProductCustomer>>(multiTable, await
modelContext.Where(x => x.DateFrom >= stratDate &&
x.DateFrom <= endDate).ToListAsync());
return View(model3);
}
Create a Report View
Add the following to the report view

@model Tuple<IEnumerable<JoinTables>,
IEnumerable<ProductCustomer>>

@{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
<link
href="https://cdn.datatables.net/1.11.1/css/jquery.
dataTables.min.css" rel="stylesheet" />
<link
Add the following to the report view

href="https://cdn.datatables.net/buttons/2.0.0/
css/buttons.dataTables.min.css" rel="stylesheet" />
<div class="container">

<div class="p-3 mb-2 bg-dark text-white text-center


font-weight-bold">Report 1</div>

<div class="row">
<div class="col-6">
<form action="Report" method="post">
<input type="date" class="form-control"
Add the following to the report view

name="stratDate" placeholder="Start Date">


<input type="date" class="form-control"
name="endDate" placeholder="End Date">
<button type="submit" class="btn btn-
dark">Search</button>
</form>
</div>
</div>
<div class="row">
<div class="col-10">
<table class="table example">
<thead>
Add the following to the report view

<tr>
<th>
Customer First Name
</th>
<th>
Customer Last Name
</th>
<th>
Product Name
</th>
<th>
Quantity
Add the following to the report view

</th>
<th>
Price
</th>
<th>
Date From
</th>
<th>
Date To
</th>
</tr>
</thead>
Add the following to the report view

<tbody>
@foreach (var item in Model.Item2)
{
<tr>
<td> @Html.DisplayFor(modelItem =>
item.Customer.Fname)</td>
<td> @Html.DisplayFor(modelItem =>
item.Customer.Lname)</td>
<td> @Html.DisplayFor(modelItem =>
item.Product.Namee)</td>
<td> @Html.DisplayFor(modelItem =>
item.Quantity)</td>
Add the following to the report view

<td> @(item.Quantity * item.Product.Price)</td>


<td> @Html.DisplayFor(modelItem =>
item.DateFrom)</td>
<td> @Html.DisplayFor(modelItem =>
item.DateTo)</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<td>Total Quantity</td>
<td>@ViewBag.TotalQuantity</td>
<td></td>
Add the following to the report view

<td></td>
<td></td>
</tr>
<tr>
<td>Total Price</td>
<td>@ViewBag.TotalPrice</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
Add the following to the report view

</div>
</div>
<div class="p-3 mb-2 bg-dark text-white text-center
font-weight-bold">Report 2</div>
<div class="row">
<div class="col-10">
<table class="table example">
<thead>
<tr>
<th>Customer Name</th>
<th>Product Name</th>
<th>Category Name</th>
Add the following to the report view

<th>Product Price</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Item1)
{
<tr>
<td>@item.Customer.Fname</td>
<td>@item.Product.Sale</td>
<td>@item.Category.CategoryName</td>
<td>@item.Product.Price</td>
</tr>}
Add the following to the report view

</tbody>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-
3.5.1.js"></script>
<script
src="https://cdn.datatables.net/1.11.1/js/jquery.da
taTables.min.js" defer></script>
Add the following to the report view

<script
src="https://cdn.datatables.net/buttons/2.0.0/js/da
taTables.buttons.min.js" defer></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3
.1.3/jszip.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake
/0.1.53/pdfmake.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake
/0.1.53/vfs_fonts.js"></script>
Add the following to the report view

<script
src="https://cdn.datatables.net/buttons/2.0.0/js/bu
ttons.html5.min.js" defer></script>
<script>
$(document).ready(function () {
$('.example').DataTable({
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5']});});</script>
The Result

You might also like