@model LocationsIndexViewModel
@{
ViewData["Title"] = "Countries and Cities";
}
<div class="conatiner">
<div class="row">
<div class="col-9">
<h4>@ViewData["Title"] (Inner Join)</h4>
</div>
<div class="col-3 text-end">
<a asp-action="LeftJoinIndex">Countries and Cities (Left Join)</a>
</div>
</div>
<hr />
</div>
@if (Model is not null)
{
<form asp-action="InnerJoinIndex" autocomplete="off" method="get"> @* sends form data as query string to InnerJoinIndex get action *@
<div class="conatiner">
<div class="row mb-3">
<div class="col-2">
<label asp-for="QueryRequest.PageNumber"></label>
</div>
<div class="col-4">
@* "pagenumber" CSS class added to submit the form when changed as below with jQuery *@
<select asp-for="QueryRequest.PageNumber" class="form-select pagenumber" asp-items="Model.PageNumberSelectList"></select>
</div>
<div class="col-2">
<label asp-for="QueryRequest.CountPerPage"></label>
</div>
<div class="col-4">
@* "countperpage" CSS class added to submit the form when changed as below with jQuery *@
<select asp-for="QueryRequest.CountPerPage" class="form-select countperpage" asp-items="Model.CountPerPageSelectList"></select>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label asp-for="QueryRequest.OrderEntityPropertyName"></label>
</div>
<div class="col-4">
@* "orderentitypropertyname" CSS class added to submit the form when changed as below with jQuery *@
<select asp-for="QueryRequest.OrderEntityPropertyName" class="form-select orderentitypropertyname" asp-items="Model.OrderSelectList"></select>
</div>
<div class="col-2">
@* for HTML attribute added with the id HTML attribute value of the check box to trigger the click event when the label is clicked *@
<label asp-for="QueryRequest.IsOrderDescending" for="isorderdescending"></label>
</div>
<div class="col-4">
@* "isorderdescending" id added to submit the form when clicked as below with jQuery, also to be clicked when its label is clicked *@
<input class="form-check-input" asp-for="QueryRequest.IsOrderDescending" id="isorderdescending" />
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<label asp-for="QueryRequest.CountryName"></label>
</div>
<div class="col-4">
@* "countryname" CSS class added to be checked if empty in Search submit button's click event *@
<input asp-for="QueryRequest.CountryName" class="form-control countryname" placeholder="All country names" />
</div>
<div class="col-2">
<label asp-for="QueryRequest.CityName"></label>
</div>
<div class="col-4">
@* "cityname" CSS class added to be checked if empty in Search submit button's click event *@
<input asp-for="QueryRequest.CityName" class="form-control cityname" placeholder="All city names" />
</div>
</div>
<div class="row mb-3">
<div class="offset-2 col-10">
<button type="submit" class="btn btn-success">Search</button>
<a asp-action="InnerJoinIndex" class="btn btn-warning">Clear</a>
</div>
</div>
@if (Model.List.Any())
{
<div class="row mb-3">
<div class="col-12 text-success">
@Model.QueryRequest.TotalCountForPaging record(s) found.
</div>
</div>
<table class="table table-striped table-secondary">
<thead>
<tr>
<th>
@* Since the model.List property's type is List, we get the first element to display the property's display name *@
@Html.DisplayNameFor(model => model.List.First().CountryName)
</th>
<th>
@Html.DisplayNameFor(model => model.List.First().CityName)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.List) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.CountryName)
</td>
<td>
@Html.DisplayFor(modelItem => item.CityName)
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p class="text-danger">No records found.</p>
}
</div>
</form>
}
@section Scripts {
<script>
@* Way 1: after the DOM elements are loaded *@
//$(document).ready(function () {
@* Way 2: *@
$(function () {
@* Way 1: when the value is changed, submit the form *@
//$(".pagenumber").change(function () {
@* Way 2: *@
$(document).on('change', '.pagenumber', function () { // .pagenumber: get the element(s) with pagenumber class
$("form").submit(); // form: get the element(s) with form tag
});
$(document).on('change', '.countperpage', function () {
$('.pagenumber').val("1"); // reset page number to 1
$("form").submit();
});
$(document).on('change', '.orderentitypropertyname', function () {
$("form").submit();
});
@* Way 1: when clicked, submit the form *@
//$("#isorderdescending").click(function () {
@* Way 2: *@
$(document).on('click', '#isorderdescending', function () { // #isorderdescending: get the element with isorderdescending id
$("form").submit();
});
$(document).on("click", "button", function (event) {
// if country name or city name is entered, reset the page number and count per page then submit the form
if (!($(".countryname").val().trim() == "" && $(".cityname").val().trim() == "")) {
event.preventDefault(); // prevent the default button click event to execute the code below
$('.pagenumber').val("1");
$(".countperpage").val("0");
$("form").submit();
}
});
});
</script>
}