ASP.Net MVC - Passing multiple checkbox value to different mvc controller methods - c#

I have a form with list of records, and there are 2 check box
To skip record from sending
To further work with that record.
I want to send this checkbox value to 2 different method in my mvc controller
SkipRecord()
2)SendTodb()
Issues here is my view code
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<form id="form" method="post">
<div class="container" id="heading">
<div class="col-xs-6 col-md-6 col-lg-6">
<h2 class="h2Heading">List</h2>
</div>
</div>
<h2></h2>
<div class="container" id="list">
<div class="row">
<div class="col-lg-12">
<div class="main clearfix">
<table class="table table-hover table-responsive " id="waitingList">
<thead>
<tr>
<th>Name</th>
<th>Last Updated</th>
<th>DID</th>
<th>OtherId</th>
<th>Status</th>
<th>Remove</th>
<th>Update</th>
</tr>
</thead>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.LastUpdatedTime)
</td>
<td>
#Html.DisplayFor(modelItem => item.DID)
</td>
<td>
#Html.DisplayFor(modelItem => item.OtherId)
</td>
<td class="text-center">
<span class="label-status label-default">
New
</span>
</td>
#using (Html.BeginForm(new { action = "SkipRecord" }))
{
<td>
#Html.HiddenFor(modelItem => item.ID)
<input id="checkbox" name="skipRecords" value="#item.ID" type="checkbox" />
</td>
}
</tr>
}
</table>
<div class="col-md-offset-2">
<button type="submit" class="btn btn-danger btn-md pull-left loginbtn">Update</button>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
I want to try and not use ViewModel
I want to pass checkedvalue and Unchecked value with the record id.
because there are 2 different methods if use #using(Html.BeginForm) and pass the method it will only take one method but i want to send data to 2 different methods. please if anyone can help?

Just call the second method from the first. You could create a new method called ProcessChecks or something like that that uses logic to determine which method to send the data to.
What Mark said in the comments is also true; you can't have one form element inside another.

Related

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>

Problem with pass data to the controller with view model ( two list )

I create a view and create two cards to show new skill and current skill.
The problem is TittleNewSkillEHS back to the controller cero data after I select a new skill.
Short description of my request
I will need to display two lists with information about New Skill (required checkbox to select and add current skill), Current skill (required update target).
One approached to solution the request I create a view model take EmployeeTitle id, Title name, and two list
• List Current skills
• List New skills
.
.
.
TitleSkillVM TitleSkillVMNew = new TitleSkillVM();
TitleSkillVMNew.TitleId = SelectTitle.TitleId;
TitleSkillVMNew.TitleDescription = SelectTitle.TitleName;
TitleSkillVMNew.TittleNewSkillEHS = _tempNewEHS; “New skill”
TitleSkillVMNew.TittleSkillEHS = _tempEHS; “List Current skill”
return View(TitleSkillVMNew);
}
#model WCMApps.Models.ViewModel.TitleSkillVM
<div class="row">
<div class="col-sm-6">
<form asp-controller="AdmTitles" asp-action="InsertNewSkillTarget" method="post">
<input type="hidden" asp-for="TitleId" />
<%: Html.HiddenIndexerInputForModel() %>
<input type="hidden" asp-for="TittleNewSkillEHS" />
<div class=" card">
<div class="card-header">
<div class="container">
<div class="row">
<div class="col-9">
<h4>New Skill Index</h4>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th scope="col">
Skill Name
</th>
<th scope="col">
Current Target
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TittleNewSkillEHS)
{
if (item.TitleSkillTargetStatus == true)
{
<tr class="table-info">
<td>
#Html.CheckBoxFor(modelItem => item.IsSelectedNewSkillTitle, item.TitleSkillTargetId)
#Html.HiddenFor(modelItem => item.TitleSkillTargetId)
</td>
<td>
#Html.DisplayFor(modelItem => item.SkillLevelDDescription)
#Html.HiddenFor(modelItem => item.SkillLevelDDescription)
</td>
<td>
#Html.DisplayFor(modelItem => item.Target)
#Html.HiddenFor(modelItem => item.Target)
</td>
</tr>
}
}
</tbody>
</table>
</div>
<div class="card-footer">
<small class="text-muted">
<button type="submit" class="btn btn-outline-info" onclick="location.href='#Url.Action("InsertNewSkillTarget", "AdmTitles", Model.TittleNewSkillEHS)'">Save</button>
</small>
</div>
</div>
</form>
</div>
<div class="col-sm-6">
<form asp-controller="AdmTitles" asp-action="UpdateCurrentSkillTarget" method="post">
<div class="card">
<div class="card-header">
<div class="container">
<div class="row">
<div class="col-9">
<h4>Current Skill Index</h4>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">
Skill Name
</th>
<th scope="col">
Current Target
</th>
<th scope="col">
Target
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TittleSkillEHS)
{
if (item.TitleSkillTargetStatus == true)
{
<tr class="table-success">
<td>
#Html.DisplayFor(modelItem => item.SkillLevelDDescription)
</td>
<td>
#Html.DisplayFor(modelItem => item.Target)
</td>
<td>
<div class="form-group">
<input asp-for="Target" class="form-control" />
<span asp-validation-for="Target" class="text-danger"></span>
</div>
</td>
</tr>
}
}
</tbody>
</table>
</div>
<div class="card-footer">
<small class="text-muted">
<button type="button" class="btn btn-outline-info" onclick="location.href='#Url.Action("UpdateCurrentSkillTarget", "AdmTitles", Model.TittleSkillEHS)'">Update</button>
</small>
</div>
</div>
</form>
</div>
</div>'
Here is a demo to pass TittleNewSkillEHS to Controller:
View:
<div class="card-header">
<div class="container">
<div class="row">
<div class="col-9">
<h4>New Skill Index</h4>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th scope="col">
Skill Name
</th>
<th scope="col">
Current Target
</th>
</tr>
</thead>
<tbody>
#{ var count = 0;}
#foreach (var item in Model.TittleNewSkillEHS)
{
if (item.TitleSkillTargetStatus == true)
{
<tr class="table-info">
<td>
#*#Html.CheckBoxFor(modelItem => item.IsSelectedNewSkillTitle, new { #name = "TittleNewSkillEHS[#count].IsSelectedNewSkillTitle" })
#Html.CheckBox("IsChecked", new { #name = "TittleNewSkillEHS[#count].IsSelectedNewSkillTitle" })*#
<input asp-for=#item.IsSelectedNewSkillTitle name="TittleNewSkillEHS[#count].IsSelectedNewSkillTitle"/>
<input name="TittleNewSkillEHS[#count].TitleSkillTargetId" value=#item.TitleSkillTargetId hidden />
</td>
<td>
#Html.DisplayFor(modelItem => item.SkillLevelDDescription)
<input name="TittleNewSkillEHS[#count].SkillLevelDDescription" value=#item.SkillLevelDDescription hidden />
#*#Html.HiddenFor(modelItem => item.SkillLevelDDescription)*#
</td>
<td>
#Html.DisplayFor(modelItem => item.Target)
<input name="TittleNewSkillEHS[#count].Target" value=#item.Target hidden />
#*#Html.HiddenFor(modelItem => item.Target)*#
</td>
</tr>
count++;
}
}
</tbody>
</table>
</div>
<div class="card-footer">
<small class="text-muted">
<button type="submit" class="btn btn-outline-info">Save</button>
</small>
</div>
</div>
Controller:
public IActionResult InsertNewSkillTarget(TitleSkillVM t) {
return Ok();
}
result:

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>
}

Problem: adding a shared condition to each of 4 PartialViews with different models on a single AspNetCore MVC view page

Just FYI, I've looked at numerous related sites and, in fact, I was able to choose a method to display multiple Partial Views with different models on a single view page from that research, but this is as far as I got before the press of other business took me away.
I need to add a condition such as a where clause (e.g. return View(_context.Alert.Where(x => x.AlertIndex == SelectedAlertIndex)); to the following PartialViews in my Assemble.cshtml page:
#model edxl_cap_v1_2.Models.ContentViewModels.EdxlCapMessageViewModel
<head>
<meta name="viewport" content="width=device-width" />
<title>Assembled EDXL-CAP Message</title>
</head>
<!-- DetailsAlert -->
<div class="content-wrapper">
#Html.Partial("_DetailsAlert", Model.Alert)
</div>
<!-- End of DetailsAlert -->
<!-- DetailsInfo -->
<div class="content-wrapper">
#Html.Partial("_DetailsInfo", Model.Info)
</div>
<!-- End of DetailsInfo -->
<!-- DetailsArea -->
<div class="content-wrapper">
#Html.Partial("_DetailsArea", Model.Area)
</div>
<!-- End of DetailsArea -->
<!-- DetailsResource -->
<div class="content-wrapper">
#Html.Partial("_DetailsResource", Model.Resource)
</div>
<!-- End of DetailsResource -->
Currently this page displays the DetailsXXXX PartialViews with no values for the model items. The user gets to this page by selecting an Alert_Identifier common to all four views on the AlertPick.cshtml page:
#model edxl_cap_v1_2.Models.ContentViewModels.EdxlCapMessageViewModel
#{
ViewData["Title"] = "AlertPick";
}
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
</head>
#{
<h4>#Model.Alerts.Count Alerts</h4>
<form asp-controller="Alerts" asp-action="PickAlert" method="post">
<select class="cap_select" id="cap_select" style="width:100%;max-width:95%;"
asp-for="SelectedAlertIndex" asp-items="Model.Alert_Identifiers">
<option>Select one</option>
</select>
<br />
<input type="submit" name="PickAlert" value="Pick Alert to Assemble EDXL-Cap Message" />
</form>
}
The user’s selection and submit brings up the PickAlert.cshtml page that shows the Alert_Identifier for each of the 4 DetailsXXXX pages in rows of a table with a submit button of value Check XXXX and a last, fifth row with the Alert_Identifier and submit button of value Add All.
#model IEnumerable<edxl_cap_v1_2.Models.ContentViewModels.Alert>
#using edxl_cap_v1_2.Models.ContentViewModels
#{
ViewData["Title"] = "PickAlert";
}
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
</head>
<h4>Alert</h4>
<div>
#ViewBag.Message
</div>
<style>
tr:nth-child(even) { background-color: lightBlue; }
tr:nth-child(odd) { background-color: white; }
</style>
<table class="smallText">
#foreach (var item in Model)
{
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="alerts" asp-action="_DetailsAlert" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Alert">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="infos" asp-action="_DetailsInfo" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Info">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="areas" asp-action="_DetailsArea" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Area">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="resources" asp-action="_DetailsResource" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Check Resource">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="elementInput">
<span class="smallText">
#Html.DisplayNameFor(model => model.Alert_Identifier) value
<input type="text" name="elementValue" value="#Html.DisplayFor(modelItem => item.Alert_Identifier)" size="60" />
</span>
</div>
</td>
<td>
<text> </text>
</td>
<td>
<form asp-area="" asp-controller="EdxlCapMessageViewModels" asp-action="Assemble" method="post" asp-route-id="#item.AlertIndex">
<input type="hidden"
name="Identifier"
value="#Html.DisplayFor(modelItem => item.Alert_Identifier)">
<input type="submit"
value="Add All">
</form>
</td>
<td>
<text> </text>
</td>
</tr>
}
</table>
Each of the four individual data category pages display correctly, but the page displayed by the fifth row only displays the data category model items without the values for selected composite message (using the Alert_Identifier). This page represents the candidate finished product of the application – this is the Assemble.cshtml page, and will be very similar to the Review.cshtml and Approve.cshtml pages which will finish the application.
I'm getting down to the end of this project and any help here would be enormously appreciated. Once done and vetted it will go open source, hoping to attract more developers to implement the set of OASIS Emergency Management IT standards and specifications. It makes sense to help first responders and emergency managers do their work more effectively by sharing information (exchanging data) interoperably, hence the Emergency Data Exchange Language (EDXL) suite of specifications and standards.</elevator pitch>

How to post data to razor page code behind asp.net core

I want to implement a bulk operation function, but I cannot post my data to the razor page code behind, anyone can help? Please check my code below
<form method="post" asp-page="./Index">
<div class="row">
<div class="col-md-12">
<table class="table table-hover table-bordered" style="margin-top:15px;">
<thead>
<tr class="info">
<th></th>
<th>
<a asp-page="./Index" asp-route-sortOrder="#Model.NumberSort">
#Html.DisplayNameFor(model => model.Products[0].Number)
</a>
</th>
<th>
#Html.DisplayNameFor(model => model.Products[0].Name)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Products)
{
<tr>
<td>
#Html.CheckBoxFor(modelItem => item.Checked)
</td>
<td class="success">
#Html.DisplayFor(modelItem => item.Number)
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
<a asp-page="./Details" asp-route-id="#item.ID" class="btn btn-info">details</a>
<a asp-page="./Edit" asp-route-id="#item.ID" class="btn btn-warning">edit</a>
<a asp-page="./Delete" asp-route-id="#item.ID" class="btn btn-danger">delete</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-10">
#{
var items = Model.Products.Where(x => x.Checked);
}
<input type="submit" name="bulkUpload" value="bulk upload" asp-route-data="#items"/>
</div>
</div>
</form>
public async Task OnPostAsync(List<Product> upload)
{
}
You need to render your products in such way that the Modelbinder will be able to pick them up on form submit and pass them into the codebehind.
Something like this (done by hand so it might not compile at first):
#{
for (int i = 0; i < Model.Products.Count; i++)
{
<input type="checkbox" asp-for="Model.Produtcs[i].Checked" />
#Model.Products[i].Number
#Model.Products[i].Name
}
}
This will render HTML like
<input type="checkbox" name="Products[0].Checked" />
<input type="checkbox" name="Products[1].Checked" />
<input type="checkbox" name="Products[2].Checked" />
And it should get back to your OnPostAsync. If not then try changing
public async Task OnPostAsync(List<Product> upload)
to
public async Task OnPostAsync(YourModel model)
What ever your full model is named.
This is then redundant:
#{
var items = Model.Products.Where(x => x.Checked);
}

Categories