We Keep Coding

Want to display a value of a loop outside of the loop as a heading in Razor pages

I want to display #s.CARDNAME that is used in the for each loop inside the else statement outside the loop as a heading:
<div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">#ViewData["0"]</span> </h4> </div>
Razor Page Code
<div class="container">
<div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">#ViewData["0"]</span> </h4> </div>
#if ((Convert.ToInt32(ViewData["hascard"])) == 2)
{
<h1>#ViewData["message"]</h1>
}
else
{
<div class="Debit-Card-Boxes">
#foreach (var s in ViewData["card"] as IEnumerable<DebitCardListingResponeDTOCardInfo>)
{
<div class="Debit-Card">
<div class="credit-card">
<img class="Abl-Logo" src="~/images/ABL-Logo.webp" />
<div class="chip"><img src="~/images/chip-logo-black-and-white.png" alt="chip"></div>
<div class="numbers">#s.ACCOUNTNUMBER</div>
<div class="name-and-expiry">
<span>#s.CARDNAME</span>
<span>#s.CARDEXPIRYDATE</span>
</div>
</div>
<a class="activatebtn" href="#modal">Activate</a>
<div class="modal" id="modal" tabindex="1">
<div class="modal__content">
×
<h1 id="genotpheading">OTP Generation</h1>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
Pin:
</td>
<td>
<input type="password" id="txtPin" />
</td>
</tr>
<tr>
<td>
Confirm Pin:
</td>
<td>
<input type="password" id="txtConfirmPin" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
</div>
</div>
</div>
}
</div>
}

I suppose #s.CARDNAME is the same for all records, right? if that is not the case you will have to decide which cardname to use since there are many. Anyway if they are the same and you can't change your DTO to separate this property from an IEnumerable.
You can simply cast your viewdata item to IEnumrable and show the first(or last) item's cardname like
<h1>Your Card: #(((IEnumerable<DebitCardListingResponeDTOCardInfo>)ViewData["card"]).First().CARDNAME)</h1>
also, review this dotnetfiddle for a working example
P.S: You can also .Last() simply use any function of LINQ including ElementAt as you wish

Try to use the following code:
<div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">#(((List<Index3Model>) ViewData["card"])[0].CARDNAME)</span> </h4> </div>

HTTP ERROR : 405(This page isn't working) When I Refresh The Page(ASP.Net Core MVC)

I am working on an ASP.Net Core MVC website where I have a page with datatable which has a button for every record which leads to further details of that record. When I click that details button, it works fine but when I refresh the details page, I encounter the above mentioned error. There are no any debugging errors as per my knowledge. Please help me out!!
Here is the code for the page with the datatable :
#model Derawala.Models.ViewModels.ParentForApply
#{
Layout = "_Layout";
}
<form method="post">
<div class="container p-3">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-success">Application List</h2>
</div>
</div>
<br /><br />
#if (Model.AppList.Any())
{
<table id="myTable" class="table table-hover align-middle table-bordered table table-striped" style="width:100%">
<thead>
<tr>
<th class="text-center">
Applicant Name
</th>
<th class="text-center">
Contact No
</th>
<th class="text-center">
Institute Name
</th>
<th class="text-center">
Institute Contact
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var obj in Model.AppList)
{
<tr>
<td class="text-center text-primary" style="font-weight:bold;">#obj.FirstName</td>
<td class="text-center text-primary" style="font-weight:bold;">#obj.Contact</td>
<td class="text-center text-primary" style="font-weight:bold;">#obj.Institute</td>
<td class="text-center text-primary" style="font-weight:bold;">#obj.InstCnt</td>
<td class="text-center">
<div class="w-75 btn-group" role="group">
<button type="submit" asp-action="Details" asp-route-Id="#obj.Id" class="btn btn-primary mx-2">
<i class="fas fa-list"></i>
</button>
<a asp-action="Delete" asp-route-Id="#obj.Id" class="btn btn-danger mx-2">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p>No Application Exists!</p>
}
</div>
</form>
This is the view of page with the datatable
When I click on the Details button(blue button), it leads to the details page shown below :
Here is the code for the Details Page :
#model Derawala.Models.ViewModels.ParentForApply
#{
ViewData["Title"] = "Details";
Layout = "_Layout";
}
<form method="post">
<input asp-for="#Model.Apply.PofId" hidden />
<div class="container backgroundWhite pt-4">
<div class="card" style="border:1px solid #000000; ">
#*<div class="card-header bg-dark text-light ml-0 row container" style="border-radius: 0px;">*#
<div class="card-header" style="background-color:black;">
<div class="row">
<div class="col-12 col-md-6 align-self-start">
<h1 class="text-white">#Model.Apply.FirstName #Model.Apply.LastName</h1>
</div>
<div class="col-12 col-md-6 align-self-end">
<h1 class="text-warning">Application Id :#Model.Apply.AppId</h1>
</div>
</div>
</div>
<div class="card-body">
<div class="container rounded p-2">
<div class="row">
<div class="col-12 col-lg-4 p-1 text-center">
<img src="#WC.ImagePath[0]#Model.Apply.Photo" class="rounded w-25" />
</div>
<div class="col-12 col-lg-8">
<div class="row pl-3">
<div class="col-12">
<span class="badge p-3 border" style="background-color:lightpink">#Model.Apply.Qualification</span>
<span class="badge p-3 border" style="background-color:lightskyblue">#Model.Apply.BankName</span>
<h3 class="text-success"></h3>
<p class="text-secondary">#Model.Apply.Description</p>
</div>
</div>
<div class="row pl-3">
<div class="col-12">
Download Id Proof : <button type="submit" class="btn-primary" asp-route-id="#Model.Apply.PofId" asp-action="DownloadFile">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer bg-dark">
<div class="row">
<div class="col-12 col-md-6 ">
<a asp-action="RemoveFromCart" class="btn btn-primary btn-square form-control btn-lg" style="height:50px;">Donate Now <i class="fas fa-hand-holding-medical"></i></a>
</div>
<div class="col-12 col-md-6">
<button type="submit" asp-action="" class="btn btn-danger form-control btn-lg" style="height:50px;">Delete This Application <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
This is the view of details page :
and when I refresh this details page it gives me this HTTP 405 error :

Your Details action probably has [HttpPost] attribute and you call it using your submit button. But when you are trying to refresh the browser calls Get method. So you have to remove [HttpPost] from the details action, or create another one with [HttpGet].

Display a list and add new item in on list asp.net core

I want to create a view that will display a list in a table above and below a form to input new items to the same list, but I get this error:
InvalidOperationException: The model item passed into the ViewDataDictionary is of type 'System.Collections.Generic.List`1[NAOC_ROW.Models.tbContPaymentHist]', but this ViewDataDictionary instance requires a model item of type 'NAOC_ROW.Models.tbContPaymentHist'.
Here is the view
#model IEnumerable<NAOC_ROW.Models.tbContPaymentHist>
#{
ViewData["Title"] = "Payment List";
<section class="content">
<div class="container-fluid">
<h3> Payment History</h3>
<hr />
<div class="row">
<div class="col-md-12">
<div class="card card-primary card-outline">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-edit"></i>
Last Completed Payments
</h3>
</div>
<div class="card-body pad table-responsive">
#if (Model.Count() > 0)
{
#*scrolling bootstarp table, check css in top of this page*#
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-bordered table-striped mb-0">
<thead>
<tr>
<th scope="col">
#Html.DisplayNameFor(model => model.Datepaid)
</th>
<th scope="col">
#Html.DisplayNameFor(model => model.Amtpaid)
</th>
<th scope="col">
#Html.DisplayNameFor(model => model.Balance)
</th>
</tr>
</thead>
<tbody>
</div>
}
else
{
<h5>No payments completed yet</h5>
}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card card-cyan card-outline">
<div class="card-header">
<h3 class="card-title">
<i class="fas fa-edit"></i>
Add New Payment
</h3>
</div>
<div class="card-body pad table-responsive">
<p><strong>Monthly payments:</strong> ₦#String.Format("{0:#,##0.00}", #ViewBag.expected)</p>
<p><strong>Current balance:</strong> ₦#String.Format("{0:#,##0.00}", #ViewBag.bal)</p>
#*<input type="hidden" asp-for="#Model.ContractId" />*#
<hr />
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-info">
<div class="modal-dialog">
<div class="modal-content bg-info">
<div class="modal-header">
<h4 class="modal-title">Info Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
<input type="hidden" value="#ViewBag.bal" name="AmtExpected" />
<partial name="_AddNewPayment" />
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-outline-light" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-outline-light">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</section>
#section Scripts{
#{
<partial name="_ValidationScriptsPartial" />
}
}
I created a partial view as you can see in the script hoping to loose the error, but still did not work. I took out some parts of the code to reduce your time having to read the code. I left the necessary code.
Any help is welcome.

According to the error message, you pass the value of type List<Model> to Paritl view and use #model.xxx.Model in the partial view . so you can change some code like this:
The first way : you can use #model IEnumerable<NAOC_ROW.Models.tbContPaymentHist> in partial view;
The second way : you need to pass a model to the partial view
<partial name="_AddNewPayment" model="new tbContPaymentHist()"/>

Add/edit Comments field value in a dynamic table

I'm getting data from a SQL table and showing it in a partial view, via the below HTML table:
<div class="panel panel-primary">
<h3>Disclosure of Incentives Form</h3>
<br />
<table class="table table-condensed table-striped table-bordered" style="width:100%" id="DIFQuestions">
<thead>
<tr>
<th> Question</th>
<th> Outcome</th>
<th> Comments</th>
</tr>
</thead>
<tbody>
#For Each d In Model.DIFQuestions
#<tr>
<td hidden>#d.ID</td>
<td width="40%" >#d.Description</td>
<td width="10%">
<form id="outcomeRadios">
<input type="radio" name="DIFPassFail" id="outcomePass" value="True" /> Pass
<input type="radio" name="DIFPassFail" id="outcomeFail" value="Fail" /> Fail
</form>
</td>
<td>
<a href="#" class="difcomment" title="Add DIF Information">
<span class="fa fa-pencil"></span>
</a> Some text here
</td>
<td hidden>#d.Order</td>
</tr>
Next
</tbody>
</table>
<br />
<div class="col-md-12">
<button class="btn btn-success submitDIFAnswers">Submit</button>
</div>
<br>
As can be seen, I'm showing 3 fields: 'Question', 'Outcome' and 'Comments'. 'Question' comes from the SQL table, whereas 'Outcome' and 'Comments' are created dynamically via the for loop.
The font awesome pencil button on the 'Comments' field calls the below modal:
<div class="modal fade" id="addeditdifcomments" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add Comments</h3>
</div>
<div class="modal-body">
<div class="row alert">
<div class="col-md-6">
<textarea class="difinfo form-control" rows="3" id="difinfo" placeholder="Add DIF information" style="min-width: 200%;"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<Button type="button" Class="btn btn-success submitdifcomment">Submit</Button>
</div>
</div>
</div>
I'm having trouble submitting individual notes via the modal for each question. Below is the JQuery that shows the modal, and the one that's meant to save the note text for each row:
$(document).ready(function () {
$(".difcomment").click(function () {
$("#addeditdifcomments").modal('show');
});
$(".submitdifcomment").click(function () {
var difInfo = $(".difinfo").val();
$(".difcomment").val(difInfo);
$("#addeditdifcomments").modal('hide');
});
});
I hope all of this makes sense. Let me know if I need to provide further information.
Any sort of input would be appreciated. Thank you.

I've managed to do this by assigning the #d.ID as an id for my span tag, so each Comment would then have a unique id against it.
I would then save the id into a global variable, which I would reassign each time I'm clicking the pencil button on my Comment rows.
JQuery below:
// open modal to submit dif comment
$(".difcomment").click(function () {
questionID = $(this).parent('td').find('span').prop('id')
$('#addeditdifcomments').modal('show');
});
// submit comment
$(".submitdifcomment").click(function () {
var difInfo = $(".difinfo").val();
var path = "span#" + questionID;
$(path).text(difInfo);
$(".difinfo").val('');
$("#addeditdifcomments").modal('hide');
});

How to delete a value

I want to display the name of the value before deleting it.
Have no idea how to data bind in angular.
1.Angular html.
<div *ngIf="pnlItemType" class="col-12">
<table class="table table-bordered table-hover">
<thead class="thead-dark">
<th scope="col">Item Type Name</th>
<th scope="col" colspan="2"></th>
</thead>
<tbody class="bg-white">
<tr *ngFor="let itemType of itemTypes">
<td class="valign-middle">{{itemType.ItemTypeName}}</td>
<td class="w-80 text-center">
<button type="button" class="btn btn-outline-primary"
title="Edit" (click)="editItemType(itemType)"><i class="fas fa-
pen"></i></button>
</td>
<td class="w-80 text-center">
<button type="button" class="btn btn-outline-
secondary" title="Delete" (click)="deleteItemType()"> <i
class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
/div>
2.Modal view of delete box.
<ng-template #mdlDeleteItemType>
<div class="modal-header">
<h4 class="modal-title"> Confirm to delete this item</h4>
<button type="button" class="close" aria-label="Close" (click) =
"hideModal();">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span> Are you sure you want to delete this item? </span>
<b>{{itemType?.ItemTypeName}}</b>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary">
Delete</button>
<button type="button" class="btn btn-outline-secondary mg-rt-10"
(click)="hideModal()">Cancel</button>
</div>
</ng-template>
3.codebehind tsfile.
deleteItemType(){
this.hideModal();
this.openLargeModal(this.mdlDeleteItemType);
}
I would like to show the name of the item to be deleted in bold.

deleteItemType(itemType){
this.mdlDeleteItemType = itemType;
this.hideModal();
//Just Open Modal after it
}
And your HTML
(click)="deleteItemType(itemType)"