MVC (layered variant)
This commit is contained in:
Boris Milašinović
@@ -0,0 +1,10 @@
|
||||
@{
|
||||
ViewData["Title"] = "Home";
|
||||
}
|
||||
|
||||
<section class="card border-0 shadow-sm">
|
||||
<div class="card-body p-4">
|
||||
<h1 class="h3 mb-3">Events</h1>
|
||||
<p class="mb-0">This sample demonstrates how to create a simple CRUD ASP.NET Core MVC application using data from Person table</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,15 @@
|
||||
@model PersonForm
|
||||
@{
|
||||
ViewData["Title"] = "Add person";
|
||||
ViewData["FormAction"] = "Create";
|
||||
}
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2 class="h4 mb-0">Add person</h2>
|
||||
</div>
|
||||
|
||||
<partial name="_PersonForm" model="Model" />
|
||||
|
||||
@section Scripts {
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@model PersonForm
|
||||
@{
|
||||
ViewData["Title"] = "Edit person";
|
||||
ViewData["FormAction"] = "Edit";
|
||||
}
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2 class="h4 mb-0">Edit person</h2>
|
||||
</div>
|
||||
|
||||
<partial name="_PersonForm" model="Model" />
|
||||
|
||||
@section Scripts {
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
@using Microsoft.AspNetCore.Mvc.ViewFeatures
|
||||
@model PagedList<PersonInfo>
|
||||
@{
|
||||
ViewData["Title"] = "People";
|
||||
}
|
||||
<h2>People list</h2>
|
||||
|
||||
@{
|
||||
(string PropertyName, string Title, bool Sortable)[] columns =
|
||||
[
|
||||
(nameof(PersonInfo.FirstNameTranscription), "First Name", true),
|
||||
(nameof(PersonInfo.LastNameTranscription), "Last Name", true),
|
||||
(nameof(PersonInfo.OriginalName), "Original Name", false),
|
||||
(nameof(PersonInfo.BirthDate), "Birth Date", true),
|
||||
(nameof(PersonInfo.CountryName), "Country Name", true)
|
||||
];
|
||||
|
||||
var personRowViewData = new ViewDataDictionary(ViewData)
|
||||
{
|
||||
{ Constants.ViewDataKeys.PagingInfo, Model.PagingInfo }
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
<section class="card border-0 shadow-sm" id="people-list">
|
||||
<div class="card-body">
|
||||
<form asp-action="Index" method="get"
|
||||
class="d-flex justify-content-between align-items-start gap-3 flex-wrap flex-lg-nowrap mb-4">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="pageSize" value="@Model.PagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
|
||||
<div class="d-flex align-items-center gap-3 pt-2">
|
||||
<h2 class="h5 mb-0">People list</h2>
|
||||
<span class="badge text-bg-light">@(Model.PagingInfo.IsFiltered ? $"{Model.PagingInfo.FilteredItemsCount} / {Model.PagingInfo.TotalItemsCount}" : Model.PagingInfo.TotalItemsCount.ToString())</span>
|
||||
<a asp-action="Create"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.Sorts"
|
||||
asp-route-searchText="@Model.PagingInfo.SearchText"
|
||||
class="btn btn-primary">
|
||||
Add
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center gap-2 flex-nowrap ms-auto">
|
||||
<input id="searchText"
|
||||
name="searchText"
|
||||
value="@Model.PagingInfo.SearchText"
|
||||
class="form-control"
|
||||
placeholder="Search by country or full name"
|
||||
aria-label="Filter by country or full name" />
|
||||
|
||||
<button type="submit" class="btn btn-outline-primary">Filter</button>
|
||||
@if (Model.PagingInfo.IsFiltered)
|
||||
{
|
||||
<a asp-action="Index"
|
||||
asp-route-page="1"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@Model.PagingInfo.Sorts"
|
||||
class="btn btn-outline-secondary">
|
||||
Clear
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm table-hover" id="table-people">
|
||||
<thead>
|
||||
<tr>
|
||||
@foreach (var column in columns)
|
||||
{
|
||||
<th>
|
||||
@if (column.Sortable)
|
||||
{
|
||||
<a asp-action="Index"
|
||||
asp-route-page="@Model.PagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@Model.PagingInfo.ItemsPerPage"
|
||||
asp-route-searchText="@Model.PagingInfo.SearchText"
|
||||
asp-route-sorts="@Model.PagingInfo.ToggleSort(column.PropertyName)"
|
||||
class="link-dark link-underline-opacity-0">
|
||||
@column.Title@(Model.PagingInfo.IsSortedBy(column.PropertyName) ? (Model.PagingInfo.IsDescending() ? " ?" : " ?") : "")
|
||||
</a>
|
||||
}
|
||||
else
|
||||
{
|
||||
@column.Title
|
||||
}
|
||||
</th>
|
||||
}
|
||||
<th class="text-end"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@if (Model.Data.Count == 0)
|
||||
{
|
||||
<tr>
|
||||
<td colspan="6" class="text-body-secondary">No data to display.</td>
|
||||
</tr>
|
||||
}
|
||||
else
|
||||
{
|
||||
@foreach (var person in Model.Data)
|
||||
{
|
||||
<partial name="_PersonRow" model="person" view-data="personRowViewData" />
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mt-4 gap-3 flex-wrap">
|
||||
<div class="d-flex align-items-center gap-2 flex-wrap">
|
||||
<small class="text-body-secondary">Page @Model.PagingInfo.CurrentPage of @Model.PagingInfo.TotalPages</small>
|
||||
<form asp-action="Index" method="get" class="d-inline-flex align-items-center gap-2">
|
||||
<input type="hidden" name="page" value="1" />
|
||||
<input type="hidden" name="sorts" value="@Model.PagingInfo.Sorts" />
|
||||
<input type="hidden" name="searchText" value="@Model.PagingInfo.SearchText" />
|
||||
<select name="pageSize" class="form-select form-select-sm" style="width: auto;" aria-label="Items per page" onchange="this.form.requestSubmit()">
|
||||
@{
|
||||
int[] pageSizeOptions = [10, 20, 50, 100];
|
||||
}
|
||||
@foreach (var option in pageSizeOptions)
|
||||
{
|
||||
<option value="@option" selected="@(Model.PagingInfo.ItemsPerPage == option)">@option</option>
|
||||
}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<pager page-info="@Model.PagingInfo"
|
||||
page-action="Index"
|
||||
page-title="Enter a page number and press Enter">
|
||||
</pager>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,100 @@
|
||||
@using Microsoft.AspNetCore.Mvc.Rendering
|
||||
@model PersonForm
|
||||
|
||||
@{
|
||||
var formAction = ViewData["FormAction"]?.ToString() ?? "Create";
|
||||
var countries = ViewBag.Countries as SelectList ?? new SelectList(Array.Empty<SelectListItem>());
|
||||
}
|
||||
|
||||
<form asp-action="@formAction" asp-route-id="@Model.Id" method="post" class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div asp-validation-summary="ModelOnly" class="text-danger mb-3"></div>
|
||||
|
||||
<input type="hidden" asp-for="Id" />
|
||||
<input type="hidden" asp-for="Page" />
|
||||
<input type="hidden" asp-for="PageSize" />
|
||||
<input type="hidden" asp-for="Sorts" />
|
||||
<input type="hidden" asp-for="SearchText" />
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label asp-for="FirstNameTranscription" class="form-label"></label>
|
||||
<input asp-for="FirstNameTranscription" class="form-control" />
|
||||
<span asp-validation-for="FirstNameTranscription" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="LastNameTranscription" class="form-label"></label>
|
||||
<input asp-for="LastNameTranscription" class="form-control" />
|
||||
<span asp-validation-for="LastNameTranscription" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="FirstName" class="form-label"></label>
|
||||
<input asp-for="FirstName" class="form-control" />
|
||||
<span asp-validation-for="FirstName" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="LastName" class="form-label"></label>
|
||||
<input asp-for="LastName" class="form-control" />
|
||||
<span asp-validation-for="LastName" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="BirthDate" class="form-label"></label>
|
||||
<input asp-for="BirthDate" type="date" class="form-control" />
|
||||
<span asp-validation-for="BirthDate" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="DocumentNumber" class="form-label"></label>
|
||||
<input asp-for="DocumentNumber" class="form-control" />
|
||||
<span asp-validation-for="DocumentNumber" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label asp-for="CountryCode" class="form-label"></label>
|
||||
<select asp-for="CountryCode" asp-items="countries" class="form-select">
|
||||
<option value="">Select country</option>
|
||||
</select>
|
||||
<span asp-validation-for="CountryCode" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="Email" class="form-label"></label>
|
||||
<input asp-for="Email" class="form-control" />
|
||||
<span asp-validation-for="Email" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="ContactPhone" class="form-label"></label>
|
||||
<input asp-for="ContactPhone" class="form-control" />
|
||||
<span asp-validation-for="ContactPhone" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="AddressLine" class="form-label"></label>
|
||||
<input asp-for="AddressLine" class="form-control" />
|
||||
<span asp-validation-for="AddressLine" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="PostalCode" class="form-label"></label>
|
||||
<input asp-for="PostalCode" class="form-control" />
|
||||
<span asp-validation-for="PostalCode" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<label asp-for="City" class="form-label"></label>
|
||||
<input asp-for="City" class="form-control" />
|
||||
<span asp-validation-for="City" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label asp-for="AddressCountry" class="form-label"></label>
|
||||
<input asp-for="AddressCountry" class="form-control" />
|
||||
<span asp-validation-for="AddressCountry" class="text-danger"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer bg-white d-flex justify-content-end gap-2">
|
||||
<a asp-action="Index"
|
||||
asp-route-page="@Model.Page"
|
||||
asp-route-pageSize="@Model.PageSize"
|
||||
asp-route-sorts="@Model.Sorts"
|
||||
asp-route-searchText="@Model.SearchText"
|
||||
class="btn btn-outline-secondary">
|
||||
Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -0,0 +1,42 @@
|
||||
@model PersonInfo
|
||||
@{
|
||||
var pagingInfo = ViewData[Constants.ViewDataKeys.PagingInfo] as PagingInfo ?? new PagingInfo();
|
||||
}
|
||||
|
||||
<tr>
|
||||
<td>@Model.FirstNameTranscription</td>
|
||||
<td>@Model.LastNameTranscription</td>
|
||||
<td>@Model.OriginalName</td>
|
||||
<td>@Model.BirthDate.ToString("dd.MM.yyyy.")</td>
|
||||
<td>@Model.CountryName</td>
|
||||
<td class="text-end">
|
||||
<div class="d-inline-flex gap-2">
|
||||
<a
|
||||
asp-action="Edit"
|
||||
asp-route-id="@Model.Id"
|
||||
asp-route-page="@pagingInfo.CurrentPage"
|
||||
asp-route-pageSize="@pagingInfo.ItemsPerPage"
|
||||
asp-route-sorts="@pagingInfo.Sorts"
|
||||
asp-route-searchText="@pagingInfo.SearchText"
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
|
||||
<form
|
||||
asp-action="Delete"
|
||||
asp-route-id="@Model.Id"
|
||||
method="post"
|
||||
class="d-inline">
|
||||
<input type="hidden" name="page" value="@pagingInfo.CurrentPage" />
|
||||
<input type="hidden" name="pageSize" value="@pagingInfo.ItemsPerPage" />
|
||||
<input type="hidden" name="sorts" value="@pagingInfo.Sorts" />
|
||||
<input type="hidden" name="searchText" value="@pagingInfo.SearchText" />
|
||||
<button type="submit"
|
||||
class="btn btn-sm btn-outline-danger delete">
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -0,0 +1,43 @@
|
||||
@model IEnumerable<PersonInfo>
|
||||
@{
|
||||
ViewData["Title"] = "People";
|
||||
}
|
||||
<h2>People list</h2>
|
||||
|
||||
<table class="table table-sm table-hover" id="table-people">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Original name</th>
|
||||
<th>Birth date</th>
|
||||
<th>Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var person in Model)
|
||||
{
|
||||
<tr>
|
||||
<td class="text-center">@person.FirstNameTranscription</td>
|
||||
<td class="text-left">@person.LastNameTranscription</td>
|
||||
<td class="text-center">@person.OriginalName</td>
|
||||
<td class="text-center">@person.BirthDate.ToString("yyy-MM-dd")</td>
|
||||
<td class="text-center">@person.CountryName</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@section styles{
|
||||
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.7/css/dataTables.bootstrap5.min.css" />
|
||||
}
|
||||
|
||||
@section scripts{
|
||||
<script src="https://cdn.datatables.net/2.3.7/js/dataTables.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/2.3.7/js/dataTables.bootstrap5.min.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
new DataTable('#table-people');
|
||||
});
|
||||
</script>
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
@using System.Text.Json
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@ViewData["Title"] - Events</title>
|
||||
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||
@RenderSection("Styles", required: false)
|
||||
</head>
|
||||
<body class="bg-body-tertiary">
|
||||
<header class="border-bottom bg-white shadow-sm">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-semibold" asp-controller="Home" asp-action="Index">Home</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="mainNav">
|
||||
<ul class="navbar-nav ms-auto gap-lg-2">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="PeopleSimple" asp-action="Index">People (simple version)</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-controller="People" asp-action="Index">People</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="container py-4">
|
||||
@RenderBody()
|
||||
</main>
|
||||
|
||||
<div class="toast-container position-fixed top-0 end-0 p-3">
|
||||
<div id="app-toast" class="toast border-0 shadow-sm" role="status" aria-live="polite" aria-atomic="true">
|
||||
<div id="app-toast-header" class="toast-header">
|
||||
<strong id="app-toast-title" class="me-auto">Notification</strong>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div id="app-toast-body" class="toast-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="~/lib/jquery/jquery.min.js"></script>
|
||||
<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="~/js/site.js" asp-append-version="true"></script>
|
||||
<script src="~/js/pager.js" asp-append-version="true"></script>
|
||||
<script>
|
||||
@if (TempData[Constants.TempDataKeys.ToastMessage] is string toastMessage)
|
||||
{
|
||||
var initialToastJson = JsonSerializer.Serialize(new
|
||||
{
|
||||
variant = TempData[Constants.TempDataKeys.ToastVariant] as string ?? Constants.ToastVariants.Success,
|
||||
title = TempData[Constants.TempDataKeys.ToastTitle] as string ?? Constants.ToastTitles.Notification,
|
||||
message = toastMessage
|
||||
});
|
||||
@:showAppToast(@Html.Raw(initialToastJson));
|
||||
}
|
||||
</script>
|
||||
@RenderSection("Scripts", required: false)
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,2 @@
|
||||
<script src="~/lib/jquery-validate/jquery.validate.min.js"></script>
|
||||
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
|
||||
@@ -0,0 +1,5 @@
|
||||
@using MVC_SimpleCRUD_Layered.Application.Models
|
||||
@using MVC_SimpleCRUD_Layered.Application.People
|
||||
@using MVC_SimpleCRUD_Layered.Web
|
||||
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
||||
@addTagHelper *, MVC-SimpleCRUD-Layered.Web
|
||||
@@ -0,0 +1,3 @@
|
||||
@{
|
||||
Layout = "_Layout";
|
||||
}
|
||||
Reference in New Issue
Block a user