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].

Easy way to convert ForEach table into Datatable Jquery table?

I'm trying to implement the sorting functionality of Datatables by clicking on the headers to sort.
I'm currently loading my data using a ForEach like so. Is there an easy way to implement the sorting functionality in my scripts? Thank you
<tbody>
#foreach (var fieldValidator in field.FieldValidators)
{
<tr>
<td>
#fieldValidator.Id
</td>
<td>
#fieldValidator.ValidatorType
</td>
<td>
#fieldValidator.ErrorMessage
</td>
<td>
#fieldValidator.Param1
</td>
<td>
#fieldValidator.Param2
</td>
<td>
#fieldValidator.Param3
</td>
<td>
#Html.ActionLink("Edit", "EditFieldValidator", new { fieldValidatorId = fieldValidator.Id, dynamicFieldId = field.Id, dynamicFormId = Model.DynamicForm.Id, vaccineTypeStatusId = Model.Id }, new { #class = "btn btn-primary mb-h" })
Delete
<div class="modal fade" id="confirm-delete-field-validator-#fieldValidator.Id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to permanently delete this field validator.</p>
<p><b>This action can NOT be undone.</b></p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
#Html.ActionLink("Delete", "DeleteFieldValidator", new { fieldValidatorId = fieldValidator.Id, vaccineTypeStatusId = Model.Id }, new { #class = "btn btn-danger" })
</div>
</div>
</div>
</div>
</td>
</tr>
}
</tbody>

You just need to follow the guide in https://datatables.net/.
It has no problem if you used forEach. Here is a sample. Hope to help, my friend :))
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<div class="container">
<div class=" row">
<table id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Serial Number</th>
<th>Age</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Employees)
{
<tr>
<td>
#item.Id
</td>
<td>
#item.Name
</td>
<td>
#item.SerialNumber
</td>
<td>
#item.Age
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
#section Scripts
{
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
}

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');
});

ASP.Net MVC Posting Form

I've got these Models:
public class FinalizedWebinarAttendeesList
{
public List<FinalizedWebinar> Webinars { get; set; }
}
public class FinalizedWebinar
{
public int ParticipantID { get; set; }
public bool AffidavitRecvd { get; set; }
}
Now, I want to put this data into an HTML form for viewing and allow the user to set a checkbox for the AffidavitRecvd value and the ParticipantID for each attendee.
The form I have is an accordion in a panel group with each Attendance in a table shown in the HTML below.
<div class="row">
<form name="FinalizeWebinar" id="finalize-webinar-form" method="post" action="/Home/StoreFinalized">
<div class="col-lg-12" id="attendeesTable">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title pull-left" style="width:90%">
<a class="" data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="true">909428<br>Katie Perry</a>
<input type="hidden" name="[909428].ParticipantID" value="909428">
</h4>
<div class="pull-right" style="width:10%;">
<span class="affrcvd_chk">Affidavit Received?<br>
<input id="affrcvd_chk_box" type="checkbox" name="[0].AffidavitRecvd">
</span>
</div>
<div class="clearfix"></div>
</div> <!--/.panel-heading -->
<div id="collapse0" class="panel-collapse collapse in" aria-expanded="true">
<div class="panel-body">
<div>
<input type="hidden" name="[0].FullName" value="Katie Perry">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped" id="attendee0Table">
<thead>
<tr>
<th>Webinar</th>
<th>Time In Session</th>
<th>First Poll Count</th>
<th>Second Poll Count</th>
<th>Attended</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>Webinar 1: Wednesday</td>
<td>2 hrs 27 mins</td>
<td>4</td>
<td>4</td>
<td>YES</td>
</tr>
<tr class="">
<td>Webinar 1: Thursday</td>
<td>2 hrs 4 mins</td>
<td>4</td>
<td>4</td>
<td>YES</td>
</tr>
</tbody>
</table>
</div> <!-- /.table-responsive -->
</div>
</div> <!--/.panel-body -->
</div> <!--/.panel-collapse -->
</div><!-- /.panel -->
</div> <!-- /.panel-group -->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title pull-left" style="width:90%">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1">914251<br>Taylor Swift</a>
<input type="hidden" name="[914251].ParticipantID" value="914251">
</h4>
<div class="pull-right" style="width:10%;">
<span class="affrcvd_chk">Affidavit Received?<br>
<input id="affrcvd_chk_box" type="checkbox" name="[1].AffidavitRecvd">
</span>
</div>
<div class="clearfix"></div>
</div> <!--/.panel-heading -->
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div>
<input type="hidden" name="[1].FullName" value="Taylor Swift">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped" id="attendee1Table">
<thead>
<tr>
<th>Webinar</th>
<th>Time In Session</th>
<th>First Poll Count</th>
<th>Second Poll Count</th>
<th>Attended</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>Webinar 1: Wednesday</td>
<td>2 hrs 37 mins</td>
<td>4</td>
<td>4</td>
<td>YES</td>
</tr>
<tr class="">
<td>Webinar 1: Thursday</td>
<td>2 hrs 11 mins</td>
<td>4</td>
<td>4</td>
<td>YES</td>
</tr>
</tbody>
</table>
</div><!-- /.table-responsive -->
</div>
</div><!--/.panel-body -->
</div><!--/.panel-collapse -->
</div><!-- /.panel -->
</div><!-- /.panel-group -->
</div> <!-- /.col-lg-12 -->
</form>
</div><!-- /.row -->
This is the definition for the function in the form's action:
public ActionResult StoreFinalized(List<FinalizedWebinar> attendees)
But when I post, the attendees parameter is null and this is what is sent in the postdata:
[909428].ParticipantID:909428
[909428].AffidavitRecvd:on
[914251].ParticipantID:914251
[914251].AffidavitRecvd:on
I've also tried this definition:
public ActionResult StoreFinalized(FinalizedWebinarAttendeesList attendees)
and the attendees.Webinars is null.
What am I doing wrong here?

Your view:
#using (Html.BeginForm("Index"))
{
<input type="text" name="Webinars[0].ParticipantID" value="1" />
<input type="text" name="Webinars[0].AffidavitRecvd" value="11" />
<input type="text" name="Webinars[1].ParticipantID" value="2" />
<input type="text" name="Webinars[1].AffidavitRecvd" value="22" />
<input type="submit" value="submit" />
}
Your controller:
[HttpPost]
public ActionResult Index(FinalizedWebinarAttendeesList form)
{
return View();
}
use the same viewmodel that you have described.