net core razor pages.
I have a page that allows positions to be selected:
You can choose all positions, positions 'like', positions within range, and 'selected individual positions'.
The last of these choices bring up an HTML table (i.e. grid) for which I have added the use of jquery datatables and a checkbox column within the jquery datatable grid that exists only on the HTML table (ie currently not a boolean field in the underlying database table).
The idea is that the user is presented with existing positions from the database. The user chooses the records of interest. Then the need is to remember the values of the key in the 'id' column for those selected and pass that back as a CSV string in the onPost action when the button to 'assign' is clicked. The CSV string would get passed as a parameter to a backend stored procedure.
I am trying to figure out: -how to go from checkbox item to CSV string -then pass the CSV string back through the page model.
The other means of selecting positions all work from the frontend to the backend. And I can parse a CSV string in my stored procedure. The issue is getting the above two things figured out.
Here is current sample code:
@page
@model ThePositionerRazor2.Pages.PositionSummary.AssignImportanceToPositionItemsModel
@{
ViewData["Title"] = "AssignImportanceToPositionItems";
}
<h1>Assign Importance To Position Items</h1>
<div class="row">
<div class="col-md-12">
<form id="test" method="post">
<div class="form-group">
<label> Which Positions?:</label>@Html.DropDownList("SelectChoice", new List<SelectListItem>
{
new SelectListItem{ Text="All Positions", Value = "1" },
new SelectListItem{ Text="Positions Similar To", Value = "2" },
new SelectListItem{ Text="Position Range", Value = "3" },
new SelectListItem{ Text="Select Individual Positions", Value = "4" }
})
</div>
<div id="Posall" class="form-group">
<p> All Positions</p>
<p>
</p>
</div>
<div id="Possim" class="form-group">
<p> </p>
<p>
Create From Positions Similar To: @Html.TextBox("LikePosition")
</p>
</div>
<div id="Posrange" class="form-group">
<p> </p>
<p>
Create From Positions Between: @Html.TextBox("DesiredPosition1") And @Html.TextBox("DesiredPosition2")
</p>
</div>
<div id="Posselect" class="form-group">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary list-panel" id="list-panel">
<div class="panel-heading list-panel-heading">
<h1 class="panel-title list-panel-title">Position Summary</h1>
</div>
<div class="panel-body">
<table id="Posselect-data-table"
class="table table-striped table-bordered"
style="width:100%">
@*<table class="table">*@
<thead>
<tr>
<th></th>
<th>
@Html.DisplayNameFor(model => model.Possummary[0].PositionNbr)
</th>
<th>
@Html.DisplayNameFor(model => model.Possummary[0].WorkTitle)
</th>
<th>
@Html.DisplayNameFor(model => model.Possummary[0].Purpose)
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Possummary)
{
<tr>
<td></td>
<td>
@Html.DisplayFor(modelItem => item.PositionNbr)
</td>
<td>
@Html.DisplayFor(modelItem => item.WorkTitle)
</td>
<td>
@Html.DisplayFor(modelItem => item.Purpose)
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" value="Assign Importance" class="btn btn-primary" />
</div>
<h4>@ViewData["ConfirmationMessage"]</h4>
</form>
<p><b>Selected rows data:</b></p>
<pre id="example-console-rows"></pre>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js "></script>
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
<script type="text/javascript">
$(function hideOnLoad() {
$('#Posall').show();
$('#Possim').hide();
$('#Posrange').hide();
$('#Posselect').hide();
});
$(function () {
$(document).ready(function () {
$('#SelectChoice').change(function () {
if ($(this).val() != '1') {
$('#Posall').hide();
} else {
$('#Posall').show();
}
if ($(this).val() != '2') {
$('#Possim').hide();
} else {
$('#Possim').show();
}
if ($(this).val() != '3') {
$('#Posrange').hide();
} else {
$('#Posrange').show();
}
if ($(this).val() != '4') {
$('#Posselect').hide();
} else {
$('#Posselect').show();
}
});
});
});
$(document).ready(function () {
$('#Posselect-data-table').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0,
'checkboxes': {
'selectRow': true
}
}],
select: {
style: 'multi',
selector: 'td:first-child'
},
order: [[1, 'asc']]
});
});
</script>
}And here is current c# code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using ThePositionerRazor2.Models;
namespace ThePositionerRazor2.Pages.PositionSummary
{
public class AssignImportanceToPositionItemsModel : PageModel
{
private readonly ThePositionerRazor2.Models.WorkManagerV4Context _context;
public AssignImportanceToPositionItemsModel(ThePositionerRazor2.Models.WorkManagerV4Context context)
{
_context = context;
}
public IList<Possummary> Possummary { get; set; }
public async Task OnGetAsync()
{
Possummary = await _context.Possummary
.Include(p => p.DescriptionType).ToListAsync();
}
public IActionResult OnPost(string LikePosition, string DesiredPosition1, string DesiredPosition2, string WhereClause, string SelectChoice)
{
if (!ModelState.IsValid)
{
return Page();
}
_context.Database.ExecuteSqlRaw("EXECUTE dbo.AssignImportanceToPositionItems @DesiredPosition1=DesiredPosition1,@DesiredPosition2=DesiredPosition2, @LikePosition=LikePosition,@WhereClause=WhereClause,@SelectChoice=SelectChoice;");
ViewData["ConfirmationMessage"] = "Importance Assigned";
return null;
}
}
}
The 'WhereClause' is the CSV string that goes to the stored procedure
Does anyone have any code suggestions as to the best way to accomplish this?
In what I've tracked down so far in terms of information, some suggestions veer off into PHP code- but per the example above I'm sticking fairly close to c sharp jquery and associated javascript
Thanks in advance for any help provided...
Aucun commentaire:
Enregistrer un commentaire