asp.net-coreasp.net-core-mvc.net-6.0

How to hide a row in table when updating the same row ASP.NET Core MVC


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>

Here's what it looks like: enter image description here

Here's how i want it to look: enter image description here


Solution

  • 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:

    enter image description here