I have a view that has multiple renders (Equipment, PA, Seizures), each render is a table with information pulled from my SQL Server DB. I have an update and delete button, when I click on the update button for a row, I want the row to stay in the table, but it adds an editable row to the table and doesn't hide the row I want to edit. All the tables are on the same page and I have different names for the ids.
Seizure view:
<div style="background-color:lightgray; width:25%" class="full-width">
<table>
<tr>
<td>
<table class="table table-bordered table-striped" style="width:75%; background-color:white" cellpadding="5">
<thead>
<tr>
<th>#</th>
<th>Category</th>
<th>Item</th>
<th>Qty</th>
<th>Value</th>
<th><!--Edit--></th>
<th><!--Delete--></th>
</tr>
</thead>
<tbody>
<input type="hidden" asp-for="Rqkey"/>
<input type="hidden" asp-for="Szkey"/>
@{
if(Model.Seizures != null)
{
int rownum = 0;
foreach (Seizure sez in Model.Seizures)
{
<tr id="@rownum">
<td><!--#--></td>
<td>@sez.Category</td>
<td>@sez.Item</td>
<td>@sez.Qty</td>
<td>@sez.Value</td>
<td><input type="button" value="Update" onclick="showSeizure(@sez.Szkey); hides(@rownum)" /></td>
<td><a asp-action="DeleteSeizure" onclick="return confirm('Are you sure you want to remove @sez.Item?')" asp-route-id="@sez.Szkey">Delete</a></td>
</tr>
<tr style="display:none" id="@sez.Szkey">
<td>
@{
@await Html.PartialAsync("UpdateSeizure", sez)
}
</td>
</tr>
rownum++;
}
}
}
</tbody>
</table>
</td>
</tr>
<tr style="display:none" id="@Model.Rqkey">
<td>
@{
@await Html.PartialAsync("CreateSeizure", Model)
}
</td>
</tr>
</table>
<input type="button" value="Create Record" onclick="showCreate(@Model.Rqkey)" />
</div>
<script type="text/javascript">
function showSeizure(keys){
document.getElementById(keys).style.display = "contents";
}
function hides(rownums){
document.getElementById(rownums).style.display = "none";
}
function showCreate(rqKey) {
// Fetch the CreateSeizure partial content using AJAX
fetch('@Url.Action("CreateSeizure")?rqKey=' + rqKey)
.then(response => response.text())
.then(data => {
// Insert the fetched partial view into the modal body
document.getElementById('modal-body-content').innerHTML = data;
// Show the modal
$('#createModal').modal('show');
});
}
</script>
My suggestion for this is also using a update model popup for this kind of condition. This is the best way for handling this.
I suggest you could try below example, it will not modify your table, but show a new popup to modify the selected row.
More details, you could refer to below test example:
Controller:
public class SeizureController : Controller
{
public IActionResult Index()
{
var model = new MyViewModel
{
Rqkey = 1,
Seizures = new List<Seizure>
{
new Seizure { Szkey = 1, Category = "Electronics", Item = "Laptop", Qty = 5, Value = 1500.00m },
new Seizure { Szkey = 2, Category = "Furniture", Item = "Chair", Qty = 10, Value = 300.00m }
}
};
return View(model);
}
public IActionResult GetEditSeizurePartial(int seizureKey)
{
// you should query the seizureaccording to the seizureKey, I just use it for testing
var seizure = new Seizure { Szkey = 1, Category = "Electronics", Item = "Laptop", Qty = 5, Value = 1500.00m };
return PartialView("UpdateSeizure", seizure);
}
public IActionResult GetCreateSeizurePartial()
{
return PartialView("CreateSeizure");
}
}
public class Seizure
{
public int Szkey { get; set; }
public string Category { get; set; }
public string Item { get; set; }
public int Qty { get; set; }
public decimal Value { get; set; }
}
public class MyViewModel
{
public int Rqkey { get; set; }
public List<Seizure> Seizures { get; set; }
}
View:
<div style="background-color:lightgray; width:25%" class="full-width">
<table class="table table-bordered table-striped" style="width:75%; background-color:white" cellpadding="5">
<thead>
<tr>
<th>#</th>
<th>Category</th>
<th>Item</th>
<th>Qty</th>
<th>Value</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
@if (Model.Seizures != null)
{
int rownum = 0;
foreach (var sez in Model.Seizures)
{
<tr id="row_@sez.Szkey">
<td>@rownum++</td>
<td>@sez.Category</td>
<td>@sez.Item</td>
<td>@sez.Qty</td>
<td>@sez.Value</td>
<td><button class="btn btn-primary" onclick="showEditModal(@sez.Szkey)">Edit</button></td>
<td><a asp-action="DeleteSeizure" onclick="return confirm('Are you sure you want to remove @sez.Item?')" asp-route-id="@sez.Szkey" class="btn btn-danger">Delete</a></td>
</tr>
}
}
</tbody>
</table>
<button class="btn btn-success" onclick="showCreateModal()">Create Record</button>
</div>
<!-- Edit / Create Modal -->
<div class="modal fade" id="seizureModal" tabindex="-1" role="dialog" aria-labelledby="seizureModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="seizureModalLabel">Edit Seizure</h5>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
<div class="modal-body" id="modal-body-content">
<!-- Content loaded dynamically with JavaScript -->
</div>
</div>
</div>
</div>
@section Scripts {
<script type="text/javascript">
function showEditModal(seizureKey) {
// Load the Edit partial view into the modal content
fetch('@Url.Action("GetEditSeizurePartial")?seizureKey=' + seizureKey)
.then(response => response.text())
.then(data => {
document.getElementById('modal-body-content').innerHTML = data;
$('#seizureModal').modal('show'); // Show the modal
});
}
function showCreateModal() {
// Load the Create partial view into the modal content
fetch('@Url.Action("GetCreateSeizurePartial")')
.then(response => response.text())
.then(data => {
document.getElementById('modal-body-content').innerHTML = data;
$('#seizureModal').modal('show'); // Show the modal
});
}
</script>
}
Partial View:
@model Seizure
<form asp-action="UpdateSeizure" method="post">
<input type="hidden" asp-for="Szkey" />
<label>Category:</label>
<input type="text" asp-for="Category" class="form-control" />
<label>Item:</label>
<input type="text" asp-for="Item" class="form-control" />
<label>Quantity:</label>
<input type="number" asp-for="Qty" class="form-control" />
<label>Value:</label>
<input type="number" asp-for="Value" step="0.01" class="form-control" />
<button type="submit" class="btn btn-primary">Save Changes</button>
</form>
Result like below: