How to display pagination on View of action Index?

How to display pagination on View of action Index? - javascript

I work on asp.net core 5 vs 2019 i face issue I can't display Pagination of view action Index of controller Cinemas .
what I try is
1- create custom view model for Cinemas as below :
public class CinmaPageViewModel
{
public IEnumerable<CinimaViewModels> Cinmas { get; set; }
public Pager Pager { get; set; }
}
public class CinimaViewModels
{
public string Logo { get; set; }
public string Name { get; set; }
public string Description { get; set; }
}
public class Pager
{
public int NumberOfPages { get; set; }
public int CurrentPage { get; set; }
public int TotalRecords { get; set; }
}
2-create service and implementation class inheritance
public interface ICinemasService:IEntityBaseRepository<Cinema>
{
IQueryable<CinimaViewModels>GetAllCinimas();
}
public class CinemasService:EntityBaseRepository<Cinema>, ICinemasService
{
private readonly AppDbContext _context;
public CinemasService(AppDbContext context) : base(context)
{
_context = context;
}
public CinemasService(AppDbContext context) : base(context)
{
_context = context;
}
public IQueryable<CinimaViewModels> GetAllCinimas()
{
var response = _context.Cinemas.Select(x => new CinimaViewModels() { Logo = x.Logo, Name = x.Name,Description=x.Description });
return response;
}
3- on controller I return custom model view CinmaPageViewModel
[AllowAnonymous]
public IActionResult Index(int pageNumber = 1)
{
var allCinemas = _service.GetAllCinimas();
var result = _pageHelper.GetPage(allCinemas.AsQueryable(), pageNumber);
var cinimas = new CinmaPageViewModel
{
Cinmas = result.Items,
Pager = result.Pager
};
return View(cinimas);
}
4-I create view Index as Index.cshtml for action Index as below
<div class="row">
<div class="col-md-8 offset-md-2">
<table class="table">
<thead>
<tr class="text-center">
<th>logo</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Cinmas)
{
<tr>
<td class="align-middle">
<img class="rounded-circle" src="#item.Logo" alt="#item.Name" style="max-width: 150px" />
</td>
<td class="align-middle">
#Html.DisplayFor(modelItem => item.Name)
</td>
<td class="align-middle">
#Html.DisplayFor(modelItem => item.Description)
</td>
</tr>}
</tbody>
</table>
</div>
</div>
How to display pagination on index.cshtml view for action Index
controller name Cinemas

There are many methods to achieve pagination, Here I will show a simple demo about how to display pagination, Hope it can give you some help.
First add two properties in Pager model:
public class Pager
{
public int NumberOfPages { get; set; }
public int CurrentPage { get; set; }
public int TotalRecords { get; set; }
public bool HasPreviousPage { get; set; }
public bool HasNextPage { get; set; }
}
In your code, there are some methods you don't provide. From the name of
_service.GetAllCinimas(); , I think this method is to get all Cinimas. Then I write my own GetPage() method:
static CinmaPageViewModel GetPage(List<CinimaViewModels> model,int currentpage)
{
var totalrecode = model.Count();
//I set each page can show 3 recods;
var pagesize = 3;
//Get cinimals
var result = model.Skip(pagesize*(currentpage-1)).Take(pagesize);
var TotalPages = (int)Math.Ceiling(totalrecode / (double)pagesize);
Pager page = new Pager();
page.CurrentPage = currentpage;
page.TotalRecords = totalrecode;
page.NumberOfPages = TotalPages;
page.HasPreviousPage = (currentpage > 1);
page.HasNextPage = (currentpage < TotalPages);
CinmaPageViewModel resultmodel = new CinmaPageViewModel()
{
Cinmas = result.ToList(),
Pager = page
};
return resultmodel;
}
Action
public IActionResult Show(int pageNumber = 1)
{
var cinimalsAll = _service.GetAllCinimas();
var result = GetPage(cinimalsAll,pageNumber)
return View(result);
}
View
#model CinmaPageViewModel
<div class="row">
<div class="col-md-8 offset-md-2">
<table class="table">
<thead>
<tr class="text-center">
<th>logo</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Cinmas)
{
<tr>
<td class="align-middle">
<img class="rounded-circle" src="#item.Logo" alt="#item.Name" style="max-width: 150px" />
</td>
<td class="align-middle">
#Html.DisplayFor(modelItem => item.Name)
</td>
<td class="align-middle">
#Html.DisplayFor(modelItem => item.Description)
</td>
</tr>
}
</tbody>
</table>
#{
var prevDisabled = !Model.Pager.HasPreviousPage ? "disabled" : "";
var nextDisabled = !Model.Pager.HasNextPage ? "disabled" : "";
}
<a asp-action="Show"
asp-route-pageNumber="#(Model.Pager.CurrentPage -1 )"
class="btn btn-default #prevDisabled">
Previous
</a>
#Model.Pager.CurrentPage/#Model.Pager.NumberOfPages
<a asp-action="Show"
asp-route-pageNumber="#(Model.Pager.CurrentPage + 1)"
class="btn btn-default #nextDisabled">
Next
</a>
</div>
</div>
Demo
Update:
#{
var prevDisabled = !Model.Pager.HasPreviousPage ? "disabled" : "";
var nextDisabled = !Model.Pager.HasNextPage ? "disabled" : "";
}
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a asp-action="Show" asp-route-pageNumber="#(Model.Pager.CurrentPage -1 )" class="btn btn-default #prevDisabled">Previous</a>
</li>
#for (int i = 0; i < Model.Pager.NumberOfPages; i++)
{
<li class="page-item"><a class="page-link" asp-action="Show" asp-route-pageNumber="#(i+1)">#(i+1)</a></li>
}
<li class="page-item">
<a asp-action="Show" asp-route-pageNumber="#(Model.Pager.CurrentPage + 1)" class="btn btn-default #nextDisabled">Next</a>
</li>
</ul>
</nav>
demo:

Related

Autofill input textboxes from clicking a hyperlink on a partial view

please refer to the image, when I click on the link on the left partial table, instead of having the values display on a separate partial table view as shown, I'd like the values to be autofilled in the bottom 2 textboxes to avoid having to click and drag the values and to have the date formatted to 01312000 format
index.cshtml
#page "{id?}"
#model IndexModel
#{ViewData["Title"] = "Test";}
<div class="container">
<div class="row">
<div class="text-center">
<h1 class="display-4">#Model.PageTitle</h1>
</div>
</div>
<div class="row">
<form class="mt-0" method="get">
<div class="row">
<div class="col-3 offset-1" id="ApplicationResult">
</div>
<div class="col-4" id="ApplicationOwnerResult">
</div>
<div class="col-3" id="ApplicationDmvResult">
</div>
</div>
</form>
</div>
<div class="row">
<form class="mt-0" method="post">
<div class="row">
<label class="col-2 offset-4 col-form-label">Date of Birth:</label>
<div class="col-2">
<input class="form-control" title="Date of birth" oninput="validate()" asp-for="DateOfBirth">
<span asp-validation-for="DateOfBirth"></span>
</div>
</div>
<br>
<div class="row">
<label class="col-2 offset-4 col-form-label">Driver's License Number:</label>
<div class="col-2">
<input class="form-control" title="Driver's license number" oninput="validate()" asp-for="DriversLicenseNumber">
<span asp-validation-for="DriversLicenseNumber"></span>
</div>
</div>
<br>
<div class="row">
<button class="btn btn-outline-dark col-1 offset-5" type="submit" id="Submit" disabled asp-page-handler="Submit">Submit</button>
<button class="btn btn-outline-dark col-1" type="button" id="Reset" onclick="clearAll()">Reset</button>
</div>
<br>
</form>
</div>
</div>
#section Scripts {
<script>
// Any exemption applications found will be displayed when the page initially loads. On POST request GET form will be hidden
$(document).ready(function () {
if ("#Model.Exist" == "DivIsVisible") {
$.ajax({
url: "Index/?handler=Display",
type: "GET",
data: { value: #Model.Id },
headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
success: function (data) { $("#ApplicationResult").html(data); }
});
}
else {
$("#ApplicationResult").hide();
}
});
</script>
}
index.cshtml.cs
using DMVServiceReference;
using DMV.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Net.Http;
using System.Runtime.Serialization;
using System.Threading.Tasks;
namespace DMV.Pages
{
public class IndexModel : PageModel
{
public Assess50Context _context;
// Id property refers to checking the PropertyId value for the URL
[BindProperty(SupportsGet = true)] public int Id { get; set; }
// Exist property refers to checking if GetDivs exist on POST request
[BindProperty] public string PageTitle { get; set; } = "Residency Check";
public ResidencyCheckCriteria CheckCriteria { get; set; }
[BindProperty, DataMember, MaxLength(8, ErrorMessage = " "), MinLength(8, ErrorMessage = " "), RegularExpression(#"^([0-9]{8}$)", ErrorMessage = " "), Required(ErrorMessage = " ")] public string DateOfBirth { get => CheckCriteria.DateOfBirth; set => CheckCriteria.DateOfBirth = value; }
[BindProperty, DataMember, MaxLength(13, ErrorMessage = " "), MinLength(13, ErrorMessage = " "), RegularExpression(#"^([A-Za-z0-9]{13}$)", ErrorMessage = " "), Required(ErrorMessage = " ")] public string DriversLicenseNumber { get => CheckCriteria.DriverLicenseNumber; set => CheckCriteria.DriverLicenseNumber = value; }
[BindProperty(SupportsGet = true)] public string Exist { get; set; } = "DivIsVisible";
public IndexModel(Assess50Context context)
{
_context = context;
CheckCriteria = new ResidencyCheckCriteria();
}
// Reads all exemption application table information by property id
public PartialViewResult OnGetDisplay(int value) => Partial("_DisplayApplicationPartial", _context.ExemptionApplications.Where(x => x.PropertyId == value).ToList());
// Reads all exemption application owner information by exemption application id
public PartialViewResult OnGetDisplayOwner(int value) => Partial("_DisplayOwnerPartial", _context.ExemptionApplicationOwners.Where(x => x.ExemptionApplicationId == value).GroupBy(x => x.ExemptionApplicationOwnerId).Select(x => x.First()).ToList());
// Reads the dmv information by application owner ID
public PartialViewResult OnGetDisplayOwnerInfo(int value) => Partial("_DisplayDMVPartial", _context.ExemptionApplicationDmvinformations.Where(x => x.ExemptionApplicationOwnerId == value).ToList());
DbContext.cs
using Microsoft.EntityFrameworkCore;
namespace DMV.Models
{
public partial class Assess50Context : DbContext
{
public virtual DbSet<ExemptionApplication> ExemptionApplications { get; set; } = null!;
public virtual DbSet<ExemptionApplicationDmvinformation> ExemptionApplicationDmvinformations { get; set; } = null!;
public virtual DbSet<ExemptionApplicationOwner> ExemptionApplicationOwners { get; set; } = null!;
public Assess50Context() {}
public Assess50Context(DbContextOptions<Assess50Context> options) : base(options) {}
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
}
partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
}
}
Application.cs model
using System;
using System.ComponentModel.DataAnnotations;
namespace DMV.Models
{
public partial class ExemptionApplication
{
public int PropertyId { get; set; }
[Display(Name = "Year")] public short YearId { get; set; }
[Display(Name = "App ID")] public int ExemptionApplicationId { get; set; }
[Display(Name = "Reference Number")] public string? ApplicationReference { get; set; }
}
}
Owner.cs model
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace DMV.Models
{
public partial class ExemptionApplicationOwner
{
public int PropertyId { get; set; }
public int ExemptionApplicationId { get; set; }
[Display(Name = "Application Owner ID")] public int ExemptionApplicationOwnerId { get; set; }
[Display(Name = "Owner ID")] public int? OwnerId { get; set; }
public string? FirstName { get; set; }
public string? LastName { get; set; }
[Display(Name = "Name")]public string? AssessProName { get; set; }
}
}
DmvInformation.cs model
using SoapCore.ServiceModel;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace DMV.Models
{
public partial class ExemptionApplicationDmvinformation
{
public int PropertyId { get; set; }
public int ExemptionApplicationId { get; set; }
public int ExemptionApplicationOwnerId { get; set; }
[Display(Name = "DOB")] public DateTime? DmvDob { get; set; }
[Display(Name = "Driver's License #")] public string? DriverLicense { get; set; }
}
}
_DisplayApplicationPartial.cshtml
#model IEnumerable<Models.ExemptionApplication>
#if (Model.Count() != 0)
{
<div id="ExemptionApplicationNav">
<table class="PartialTable">
<thead>
<tr>
<th class="PartialTableRowData" colspan="3">Exemption Applications</th>
</tr>
</thead>
<tbody>
<tr>
<td class="PartialTableRowCategoryData">#Html.DisplayNameFor(m => m.YearId)</td>
<td class="PartialTableRowCategoryData">#Html.DisplayNameFor(m => m.ApplicationReference)</td>
<td class="PartialTableRowCategoryData">#Html.DisplayNameFor(m => m.ExemptionApplicationId)</td>
</tr>
#foreach (Models.ExemptionApplication item in Model)
{
<tr>
<td class="PartialTableRowData">#item.YearId</td>
<td class="PartialTableRowData">#item.ApplicationReference</td>
<td class="PartialTableRowData">
<a class="DMVLabelsTexts" href="Index/?handler=DisplayOwner&value=#item.ExemptionApplicationId">#item.ExemptionApplicationId</a>
</td>
</tr>
}
</tbody>
</table>
</div>
}
else
{
<p>No exemption applications found for this Property ID</p>
}
<script>
$('#ExemptionApplicationNav a').click(function (e) {
$('#ApplicationOwnerResult').hide().load($(this).attr('href'), function () {
$('#ApplicationOwnerResult').show()
})
return false
})
</script>
_DisplayOwnerPartial.cshtml
#model IEnumerable<Models.ExemptionApplicationOwner>
#if (Model.Count() != 0)
{
<div id="OwnerNav">
<table class="PartialTable">
<thead>
<tr>
<th class="PartialTableRowData" colspan="3">Owner Information</th>
</tr>
</thead>
<tbody>
<tr>
<td class="PartialTableRowCategoryData">#Html.DisplayNameFor(m => m.ExemptionApplicationOwnerId)</td>
<td class="PartialTableRowCategoryData" colspan="2">#Html.DisplayNameFor(m => m.AssessProName)</td>
</tr>
#foreach (Models.ExemptionApplicationOwner item in Model)
{
<tr>
<td class="PartialTableRowData">
<a class="DMVLabelsTexts" href="Index/?handler=DisplayOwnerInfo&value=#item.ExemptionApplicationOwnerId">#item.ExemptionApplicationOwnerId</a>
</td>
<td class="PartialTableRowMultipleData">#item.FirstName</td>
<td class="PartialTableRowMultipleData">#item.LastName</td>
</tr>
}
</tbody>
</table>
</div>
}
else
{
<p>No owner data available</p>
}
<script>
$('#OwnerNav a').click(function (e) {
$('#ApplicationDmvResult').hide().load($(this).attr('href'), function () {
$('#ApplicationDmvResult').show()
})
return false
})
</script>
_DisplayDMVPartial.cshtml
#model IEnumerable<Models.ExemptionApplicationDmvinformation>
#if (Model.Count() != 0)
{
<div id="DmvNav">
<table style=" border: 1px solid black;">
<thead>
<tr>
<th colspan="2" style="border: 1px solid black; text-align: center;">DMV Information</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid black; font-weight: bold; text-align: center;">#Html.DisplayNameFor(m => m.DmvDob)</td>
<td style="border: 1px solid black; font-weight: bold; text-align: center;">#Html.DisplayNameFor(m => m.DriverLicense)</td>
</tr>
#foreach (Models.ExemptionApplicationDmvinformation item in Model)
{
<tr>
<!-- <td style="border: 1px solid black; text-align: center;">item.DmvDob.Value.ToString("MMddyyyy")</td> -->
<td style="border: 1px solid black; text-align: center;">#item.DmvDob</td>
<td style="border: 1px solid black; text-align: center;">#item.DriverLicense</td>
</tr>
}
</tbody>
</table>
</div>
}
else
{
<p>No owner data available</p>
}

Before check the demo, you need to know one thing, if your DateOfBirth is type of Datetime, you need be sure or convert it to format yyyy-MM-ddThh:mm. Otherwise, you could only set value for the type=datetime-local input without displaying the value.
Here is a simple demo about how to autofill the textbox value by clicking your table link:
Index.cshtml:
#page
#model IndexModel
<form class="mt-0" method="get">
<div class="row">
<div class="col-4" id="ApplicationOwnerResult">
</div>
</div>
</form>
<div class="row">
<form class="mt-0" method="post">
<div class="row">
<label class="col-2 offset-4 col-form-label">Date of Birth:</label>
<div class="col-2">
<input class="form-control" title="Date of birth" oninput="validate()" asp-for="DateOfBirth">
<span asp-validation-for="DateOfBirth"></span>
</div>
</div>
<br>
<div class="row">
<label class="col-2 offset-4 col-form-label">Driver's License Number:</label>
<div class="col-2">
<input class="form-control" title="Driver's license number" oninput="validate()" asp-for="DriversLicenseNumber">
<span asp-validation-for="DriversLicenseNumber"></span>
</div>
</div>
</form>
</div>
#section Scripts
{
<script>
//used to render the partial view _DisplayOwnerPartial.cshtml....
$(function(){
$.ajax({
url: "/Index?handler=DisplayOwner",
type: "Get",
//headers: { RequestVerificationToken: $('input: hidden[name="__RequestVerificationToken"]').val() },
success: function (data) { $("#ApplicationOwnerResult").html(data); }
});
})
//auto fill the inputs...
function DisplayInfo(id) {
$.ajax({
url: "Index/?handler=DisplayOwnerInfo&value="+id,
type: "Get",
success: function (data) {
$("#DateOfBirth").val(data.dateOfBirth);
$("#DriversLicenseNumber").val(data.driversLicenseNumber);
}
})
}
</script>
}
_DisplayOwnerPartial.cshtml:
#model IEnumerable<Models.ExemptionApplicationOwner>
#if (Model.Count() != 0)
{
<div id="OwnerNav">
<table class="PartialTable">
<tbody>
#foreach (Models.ExemptionApplicationOwner item in Model)
{
<tr>
<td class="PartialTableRowData">
<a class="DMVLabelsTexts" onclick="DisplayInfo('#item.ExemptionApplicationOwnerId')" >#item.ExemptionApplicationOwnerId</a>
</td>
</tr>
}
</tbody>
</table>
</div>
}
Index.cshtml.cs:
For easy testing, I just hard-coded the data. You can get the data from database.
public class IndexModel : PageModel
{
public DateTime DateOfBirth { get; set; }
public int DriversLicenseNumber { get; set; }
public List<ExemptionApplicationOwner> ExemptionApplicationOwners { get; set; }= new List<ExemptionApplicationOwner>()
{
new ExemptionApplicationOwner(){ExemptionApplicationOwnerId=1,DateOfBirth=new DateTime(1987,3,12),DriversLicenseNumber=124},
new ExemptionApplicationOwner(){ExemptionApplicationOwnerId=2,DateOfBirth=new DateTime(1997,2,11),DriversLicenseNumber=332},
new ExemptionApplicationOwner(){ExemptionApplicationOwnerId=3,DateOfBirth=new DateTime(1987,5,23),DriversLicenseNumber=445}
};
public void OnGet()
{
}
public IActionResult OnGetDisplayOwner()
{
return Partial("_DisplayOwnerPartial", ExemptionApplicationOwners);
}
public JsonResult OnGetDisplayOwnerInfo(int value)
{
var data = ExemptionApplicationOwners.Where(a => a.ExemptionApplicationOwnerId == value).First();
return new JsonResult(new { DateOfBirth =data.DateOfBirth.ToString("yyyy-MM-ddThh:mm"), DriversLicenseNumber=data.DriversLicenseNumber });
}
}

I made the adjustments per Renas comments and I'm still having an issue with the values not autofilling. When I run the page, and click on the value in the partial table nothing happens with the onclick event. I set the style of the anchor element to cursor: pointer, below are the changes I made. Debugging the code as shown in the images, the values populate correctly they just do not appear in the textboxes
index.cshtml
#page "{id?}"
#model IndexModel
#{ViewData["Title"] = "Test";}
<div class="container">
<div class="row">
<div class="text-center">
<h1 class="display-4">#Model.PageTitle</h1>
</div>
</div>
<div class="row">
<form class="mt-0" method="get">
<div class="row">
<div class="col-3 offset-1" id="ApplicationResult">
</div>
<div class="col-4" id="ApplicationOwnerResult">
</div>
<div class="col-3" id="ApplicationDmvResult">
</div>
</div>
</form>
</div>
<div class="row">
<form class="mt-0" method="post">
<div class="row">
<label class="col-2 offset-4 col-form-label">Date of Birth:</label>
<div class="col-2">
<input class="form-control" title="Date of birth" oninput="validate()" asp-for="DateOfBirth">
<span asp-validation-for="DateOfBirth"></span>
</div>
</div>
<br>
<div class="row">
<label class="col-2 offset-4 col-form-label">Driver's License Number:</label>
<div class="col-2">
<input class="form-control" title="Driver's license number" oninput="validate()" asp-for="DriversLicenseNumber">
<span asp-validation-for="DriversLicenseNumber"></span>
</div>
</div>
<br>
<div class="row">
<button class="btn btn-outline-dark col-1 offset-5" type="submit" id="Submit" disabled asp-page-handler="Submit">Submit</button>
<button class="btn btn-outline-dark col-1" type="button" id="Reset" onclick="clearAll()">Reset</button>
</div>
<br>
</form>
</div>
</div>
#section Scripts {
<script>
// Any exemption applications found will be displayed when the page initially loads. On POST request GET form will be hidden
$(document).ready(function () {
if ("#Model.Exist" == "DivIsVisible") {
$.ajax({
url: "Index/?handler=Display",
type: "GET",
data: { value: #Model.Id },
headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
success: function (data) { $("#ApplicationResult").html(data); }
});
}
else {
$("#ApplicationResult").hide();
}
});
// autofill the inputs
function displayOwnerInfo(id) {
$.ajax({
url: "Index/?handler=DisplayOwnerInfo&value=" + id,
type: "GET",
success: function (data) { $("#DateOfBirth").val(data.DateOfBirth); $("#DriversLicenseNumber").val(data.DriversLicenseNumber); }
});
}
</script>
}
index.cshtml.cs
using DMVServiceReference;
using DMV.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Net.Http;
using System.Runtime.Serialization;
using System.Threading.Tasks;
namespace DMV.Pages
{
public class IndexModel : PageModel
{
public Assess50Context _context;
// Id property refers to checking the PropertyId value for the URL
[BindProperty(SupportsGet = true)] public int Id { get; set; }
// Exist property refers to checking if GetDivs exist on POST request
[BindProperty] public string PageTitle { get; set; } = "Residency Check";
public ResidencyCheckCriteria CheckCriteria { get; set; }
[BindProperty, DataMember, MaxLength(8, ErrorMessage = " "), MinLength(8, ErrorMessage = " "), RegularExpression(#"^([0-9]{8}$)", ErrorMessage = " "), Required(ErrorMessage = " ")] public string DateOfBirth { get => CheckCriteria.DateOfBirth; set => CheckCriteria.DateOfBirth = value; }
[BindProperty, DataMember, MaxLength(13, ErrorMessage = " "), MinLength(13, ErrorMessage = " "), RegularExpression(#"^([A-Za-z0-9]{13}$)", ErrorMessage = " "), Required(ErrorMessage = " ")] public string DriversLicenseNumber { get => CheckCriteria.DriverLicenseNumber; set => CheckCriteria.DriverLicenseNumber = value; }
[BindProperty(SupportsGet = true)] public string Exist { get; set; } = "DivIsVisible";
public IndexModel(Assess50Context context)
{
_context = context;
CheckCriteria = new ResidencyCheckCriteria();
}
// Reads all exemption application table information by property id
public PartialViewResult OnGetDisplay(int value) => Partial("_DisplayApplicationPartial", _context.ExemptionApplications.Where(x => x.PropertyId == value).ToList());
// Reads all exemption application owner information by exemption application id
public PartialViewResult OnGetDisplayOwner(int value) => Partial("_DisplayOwnerPartial", _context.ExemptionApplicationOwners.Where(x => x.ExemptionApplicationId == value).GroupBy(x => x.ExemptionApplicationOwnerId).Select(x => x.First()).ToList());
// Reads the dmv information by application owner ID
// public PartialViewResult OnGetDisplayOwnerInfo(int value) => Partial("_DisplayDMVPartial", _context.ExemptionApplicationDmvinformations.Where(x => x.ExemptionApplicationOwnerId == value).ToList());
public JsonResult OnGetDisplayOwnerInfo(int value)
{
ExemptionApplicationDmvinformation data = _context.ExemptionApplicationDmvinformations.Where(x => x.ExemptionApplicationOwnerId == value).First();
return new JsonResult(new { DateOfBirth = data.DmvDob.ToString(), DriversLicenseNumber = data.DriverLicense });
}
DbContext.cs
using Microsoft.EntityFrameworkCore;
namespace DMV.Models
{
public partial class Assess50Context : DbContext
{
public virtual DbSet<ExemptionApplication> ExemptionApplications { get; set; } = null!;
public virtual DbSet<ExemptionApplicationDmvinformation> ExemptionApplicationDmvinformations { get; set; } = null!;
public virtual DbSet<ExemptionApplicationOwner> ExemptionApplicationOwners { get; set; } = null!;
public Assess50Context() {}
public Assess50Context(DbContextOptions<Assess50Context> options) : base(options) {}
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
}
partial void OnModelCreatingPartial(ModelBuilder modelBuilder);
}
}
Application.cs model
using System;
using System.ComponentModel.DataAnnotations;
namespace DMV.Models
{
public partial class ExemptionApplication
{
public int PropertyId { get; set; }
[Display(Name = "Year")] public short YearId { get; set; }
[Display(Name = "App ID")] public int ExemptionApplicationId { get; set; }
[Display(Name = "Reference Number")] public string? ApplicationReference { get; set; }
}
}
Owner.cs model
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace DMV.Models
{
public partial class ExemptionApplicationOwner
{
public int PropertyId { get; set; }
public int ExemptionApplicationId { get; set; }
[Display(Name = "Application Owner ID")] public int ExemptionApplicationOwnerId { get; set; }
[Display(Name = "Owner ID")] public int? OwnerId { get; set; }
public string? FirstName { get; set; }
public string? LastName { get; set; }
[Display(Name = "Name")]public string? AssessProName { get; set; }
}
}
DmvInformation.cs model
using SoapCore.ServiceModel;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
namespace DMV.Models
{
public partial class ExemptionApplicationDmvinformation
{
public int PropertyId { get; set; }
public int ExemptionApplicationId { get; set; }
public int ExemptionApplicationOwnerId { get; set; }
[Display(Name = "DOB")] public DateTime? DmvDob { get; set; }
[Display(Name = "Driver's License #")] public string? DriverLicense { get; set; }
}
}
_DisplayApplicationPartial.cshtml
#model IEnumerable<Models.ExemptionApplication>
#if (Model.Count() != 0)
{
<div id="ExemptionApplicationNav">
<table class="PartialTable">
<thead>
<tr>
<th class="PartialTableRowData" colspan="3">Exemption Applications</th>
</tr>
</thead>
<tbody>
<tr>
<td class="PartialTableRowCategoryData">#Html.DisplayNameFor(m => m.YearId)</td>
<td class="PartialTableRowCategoryData">#Html.DisplayNameFor(m => m.ApplicationReference)</td>
<td class="PartialTableRowCategoryData">#Html.DisplayNameFor(m => m.ExemptionApplicationId)</td>
</tr>
#foreach (Models.ExemptionApplication item in Model)
{
<tr>
<td class="PartialTableRowData">#item.YearId</td>
<td class="PartialTableRowData">#item.ApplicationReference</td>
<td class="PartialTableRowData">
<a class="DMVLabelsTexts" href="Index/?handler=DisplayOwner&value=#item.ExemptionApplicationId">#item.ExemptionApplicationId</a>
</td>
</tr>
}
</tbody>
</table>
</div>
}
else
{
<p>No exemption applications found for this Property ID</p>
}
<script>
$('#ExemptionApplicationNav a').click(function (e) {
$('#ApplicationOwnerResult').hide().load($(this).attr('href'), function () {
$('#ApplicationOwnerResult').show()
})
return false
})
</script>
_DisplayOwnerPartial.cshtml
#model IEnumerable<Models.ExemptionApplicationOwner>
#if (Model.Count() != 0)
{
<div id="OwnerNav">
<table class="PartialTable">
<thead>
<tr>
<th class="PartialTableRowData" colspan="3">Owner Information</th>
</tr>
</thead>
<tbody>
<tr>
<td class="PartialTableRowCategoryData">#Html.DisplayNameFor(m => m.ExemptionApplicationOwnerId)</td>
<td class="PartialTableRowCategoryData" colspan="2">#Html.DisplayNameFor(m => m.AssessProName)</td>
</tr>
#foreach (Models.ExemptionApplicationOwner item in Model)
{
<tr>
<td class="PartialTableRowData">
<a class="DMVLabelsTexts" onclick="displayOwnerInfo('#item.ExemptionApplicationOwnerId')">#item.ExemptionApplicationOwnerId</a>
<!-- <a class="DMVLabelsTexts" href="Index/?handler=DisplayOwnerInfo&value=#item.ExemptionApplicationOwnerId">#item.ExemptionApplicationOwnerId</a> -->
</td>
<td class="PartialTableRowMultipleData">#item.FirstName</td>
<td class="PartialTableRowMultipleData">#item.LastName</td>
</tr>
}
</tbody>
</table>
</div>
}
else
{
<p>No owner data available</p>
}
<!--
<script>
$('#OwnerNav a').click(function (e) {
$('#ApplicationDmvResult').hide().load($(this).attr('href'), function () {
$('#ApplicationDmvResult').show()
})
return false
})
</script>
-->
_DisplayDMVPartial.cshtml
#model IEnumerable<Models.ExemptionApplicationDmvinformation>
#if (Model.Count() != 0)
{
<div id="DmvNav">
<table style=" border: 1px solid black;">
<thead>
<tr>
<th colspan="2" style="border: 1px solid black; text-align: center;">DMV Information</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid black; font-weight: bold; text-align: center;">#Html.DisplayNameFor(m => m.DmvDob)</td>
<td style="border: 1px solid black; font-weight: bold; text-align: center;">#Html.DisplayNameFor(m => m.DriverLicense)</td>
</tr>
#foreach (Models.ExemptionApplicationDmvinformation item in Model)
{
<tr>
<!-- <td style="border: 1px solid black; text-align: center;">item.DmvDob.Value.ToString("MMddyyyy")</td> -->
<td style="border: 1px solid black; text-align: center;">#item.DmvDob</td>
<td style="border: 1px solid black; text-align: center;">#item.DriverLicense</td>
</tr>
}
</tbody>
</table>
</div>
}
else
{
<p>No owner data available</p>
}

How to bind dynamic table's from html to asp.net Razor Pages model

I am creating a Razor-Pages application and i need to bind a dynamic HTML table with some items into a List in the model, so i have the following codes:
Asp.net Code
public class SolicitacaoDescarteColeta
{
public int SolicitacaoDescarteColetaID { get; set; }
public int IDDescartador { get; set; }
public int IDEcoponto { get; set; }
public string TipoDoMaterial { get; set; }
public IList<ItemDescarte> ItensDescarte { get; set; }
public DateTime? DataDeEntrega { get; set; }
}
public class ItemDescarte
{
public int ItemDescarteID { get; set; }
public string TipoDoItem { get; set; }
public string DescricaoDoItem { get; set; }
public int SolicitacaoDescarteColetaID { get; set; }
public SolicitacaoDescarteColeta SolicitacaoDescarteColeta { get; set; }
}
Razor Pages cshtml
<div class="col-md-4">
<label class="control-label">Tipo de item</label>
<select id="tipo_item" class="form-select form-control dropdown" required>
<option id="" selected value="">Selecione</option>
<option class="itens_reciclaveis" value="Plástico">Plastico</option>
<option class="itens_reciclaveis" value="Metal">Metal</option>
<option class="itens_reciclaveis" value="Vidro">Vidro</option>
<option class="itens_reciclaveis" value="Papel">Papel</option>
</select>
</div>
<div class="col-md-7">
<label class="control-label">Descrição do Item</label>
<input type="text" name="" id="item_descricao" class="form-control" required>
<i class="bi bi-plus-square"></i>
</div>
<table class="table table-striped" id="tabela_itens">
<thead>
<tr>
<th scope="col">Nº Item</th>
<th scope="col">Tipo</th>
<th scope="col">Descrição</th>
</tr>
</thead>
<tbody id="tabela_itens_body">
</tbody>
</table>
Dynamic table show: AddItems
I am still new at asp.net, i want each line of my table binding a new item in my ItensDescarte List, is there some way i can do this?
Ps.: Forgive me for my bad english tho

.Net Core Radio Button always returns false

I am sending a List to the view.
Trying to submit each item in the list through a form.
Model:
public partial class Model
{
public int Id { get; set; }
public string UId { get; set; }
public int WId { get; set; }
public bool IsEnabled { get; set; }
public virtual AspNetUsers User { get; set; }
public virtual WModel W { get; set; }
}
Controller:
public IActionResult UWC()
{
List<Model> uW = db.UW.Include(x => x.U).Include(x=>x.W).ToList();
return View(uW);
}
[HttpPost]
public IActionResult UWC(Model uW)
{
var s = ModelState.ErrorCount;
return RedirectToAction("UWC");
}
View
#model List<Model>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model[0].W.Name)
</th>
<th>
#Html.DisplayNameFor(model => model[0].W.Type)
</th>
<th>
#Html.DisplayNameFor(model => model[0].W.Description)
</th>
<th>
#Html.DisplayNameFor(model => model[0].W.IsActive)
</th>
</tr>
</thead>
<tbody>
#for (var item = 0; item < Model.Count(); item++)
{
<tr>
<td>
#Html.DisplayFor(model => model[item].W.Name)
</td>
<td>
#Html.DisplayFor(model => model[item].W.Type)
</td>
<td>
#Html.DisplayFor(model => model[item].W.Description)
</td>
<td>
<form asp-action="UserWidgetConfiguration" asp-controller="UserManagement" method="post">
#Html.RadioButtonFor(model => model[item].IsEnabled, true, new { #Name = "IsEnabled",, id = "enabled_" + item } })<label>True</label>
#Html.RadioButtonFor(model => model[item].IsEnabled, false, new { #Name = "IsEnabled" ,, id = "disabled_" + item }})<label>False</label>
<input type="hidden" asp-for="#Model[item].Id" value="#Model[item].Id" name="Id" />
<input type="hidden" asp-for="#Model[item].WidgetId" value="#Model[item].WidgetId" name="WidgetId" />
<input type="hidden" asp-for="#Model[item].UserId" value="#Model[item].UserId" name="UserId" />
</form>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
#section Scripts{
<script>
$(function () {
$('input[type=radio]').change(function () {
$(this).closest('form').submit();
});
});
</script>
}
The above is the complete code.
The radio button is always binding to false.
However,
I am using a script to submit the form onchange of radio button value:
<script>
$(function () {
$('input[type=radio]').change(function () {
var data = JSON.stringify($(this).closest('form').serializeArray());
console.log(data);
$(this).closest('form').submit();
});
});
</script>
The console gives the proper value for the radio button.
[{"name":"[0].IsEnabled","value":"True"},{"name":"Id","value":"1"},{"name":"WId","value":"1"},{"name":"UId","value":"a"},{"name":"__RequestVerificationToken","value":"CfDJ8FLfqW1-k2hNlQsGtRBQVqOKRWmlkQYWTMrEQNcJHWGd7_LPvHfjw3V5gxYAnLjwz7HvjExZDXgmbSMQ1DnEONg7EJfu5OqYm7xntqXIe4IMkD1HD4SHRtihdyzDXHrKu7jNXUwuN1B6H-565O0J0oZsGVCopZqy180oPco29vqyvpcZkZnWEOmVQX6_V3T6AQ"}]
When I am expecting a true value for IsEnabled in the controller I am getting a false value.
But the value is true as expected when the form is serialized and displayed in the console.
Is this because of the event handler?

The array prefix in the name of the radio inputs ([0].IsEnabled) causes the inputs not to be mapped in the model, as the name is expected to be IsEnabled.
As simple workaround you could just create the inputs manually without the HTML Helpers, e.g.:
<input type="radio" name="IsEnabled" value="True"/> <label>True</label>
<input type="radio" name="IsEnabled" value="False"/> <label>False</label>
See the source of the helper for additional details.

how to add multiple of model in one view

I want to add my class model in my index view because I need ClassID for dropdown to show classes in my view but don't know how to.
This is my index:
#using opr.Models;
#using PagedList;
#using PagedList.Mvc;
#model PagedList.IPagedList<opr.Data.C_QuestionTable>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div class="alert-success form-control m-auto w-75 custom-form">
<div class="col-6 pb-3 input-control">
<label for="ex3"> Select Class:</label>
#Html.DropDownListFor(model => model.ClassID, (SelectList)ViewBag.dataForDropDowns, new { #class = "form-control select2ddl" })
</div>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
QuestionText
</th>
</tr>
#foreach (var item in Model)
{
foreach (var answer in item.C_AnswerTable)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.QuestionText)
#Html.RadioButton("searchBy", answer.Options, true)
<text>#answer.Options</text>
</td>
</tr>
}
}
<tr>
<div class="pagination pull-left">
<hr />
<td colspan="3">#Html.PagedListPager(Model, page => Url.Action("Index", new { page = page }))</td>
</div>
</tr>
</table>
</div>
This is my Controller:
examsEntities db = new examsEntities();
public ActionResult Index(int?page)
{
var mod1 = db.myclasses.Select(s => new { s.ID, s.C_name }).ToList();
SelectList sList = new SelectList(mod1, "ID", "C_name");
ViewBag.dataForDropDown = sList;
var pageNumber = page ?? 1;
var pageSize = 3;
var question = db.C_QuestionTable.OrderBy(x => x.QuestionText).ToPagedList(pageNumber, pageSize);
return View(question);
}

namespace OMS.Models
{
public class AbcModel
{
public int Id { get; set; }
public string Name{ get; set; }
public Classmodel classmodel{ get; set; }
}
}
bind class model into Index model(Abc model) and now in view
#using opr.Models;
#using PagedList;
#using PagedList.Mvc;
#model PagedList.IPagedList<opr.Data.C_QuestionTable>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div class="alert-success form-control m-auto w-75 custom-form">
<div class="col-6 pb-3 input-control">
<label for="ex3"> Select Class:</label>
#Html.DropDownListFor(model => model.classmodel.ClassID,
(SelectList)ViewBag.dataForDropDowns, new { #class = "form-control
select2ddl" })
</div>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
QuestionText
</th>
</tr>
#foreach (var item in Model)
{
foreach (var answer in item.C_AnswerTable)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.QuestionText)
#Html.RadioButton("searchBy", answer.Options, true)
<text>#answer.Options</text>
</td>
</tr>
}
}
<tr>
<div class="pagination pull-left">
<hr />
<td colspan="3">#Html.PagedListPager(Model, page => Url.Action("Index", new { page = page }))</td>
</div>
</tr>
</table>
</div>
Hope it will help you

display details in collapsible div

I have an object:
public class Person {
public string FirstName {get; set;}
public string LastName{get; set;}
public int Age {get; set;}
public List<Car> Cars {get; set;}
}
public class Car{
public string Name {get; set;}
public DateTime Manufactured {get; set;}
}
Inside razor view I'm iterating over list of person objects and display its properties
#foreach (var item in Model){
<tr id="#item.Id">
<td>#item.FirstName </td>
<td>#item.LastName</td>
<td>#item.Age </td>
</tr>
}
How can I display list of cars in collapsible div when user clicks on a tr?

I just made this in Notepad. Maybe you can use this as an inspiration:
#foreach (var item in Model){
<tr id="person-#item.Id" class="person">
<td>#item.FirstName </td>
<td>#item.LastName</td>
<td>#item.Age </td>
</tr>
#if (item.Cars != null && item.Cars.Count > 0) {
<tr class="cars" id="cars-for-person-#item.Id" style="display: none;">
<td colspan="3">
#foreach (var car in item.Cars){
<div class="each-car">
<span class="name">#car.Name</span>
<span class="name">#car.Manufactured </span>
</div>
}
</td>
</tr>
}
}
<script>
$(function() {
var table = $("table");
table.on("click", "tr.person", function() {
$(this).next("tr.cars").toggle();
});
});
</script>
Please note I changed your id attribute on your tr to have person- as prefix, as its not valid HTML to have id's as integers alone.
Here is a fiddle: http://jsfiddle.net/06f8czLL/

Develop Reference

JavaScript is the programming language of the Web.

How to display pagination on View of action Index? - javascript

Related

Autofill input textboxes from clicking a hyperlink on a partial view

How to bind dynamic table's from html to asp.net Razor Pages model

.Net Core Radio Button always returns false

how to add multiple of model in one view

display details in collapsible div

Categories

Resources