如何在更新同一行时隐藏表中的行 ASP.NET Core MVC

Question

我有一个具有多个呈现的视图（设备、PA、癫痫发作），每个呈现都是一个表，其中包含从我的 SQL Server 数据库中提取的信息。我有一个更新和删除按钮，当我单击一行的更新按钮时，我希望该行保留在表中，但它会向表中添加一个可编辑行，并且不会隐藏我要编辑的行。所有表格都在同一页面上，并且我的 id 名称不同。

癫痫发作视图：

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

它看起来像这样：

这就是我想要的样子：

Answer 1

我对此的建议也是针对这种情况使用更新模型弹出窗口。这是处理这个问题的最佳方法。

我建议您可以尝试下面的示例，它不会修改您的表格，而是显示一个新的弹出窗口来修改所选行。

更多详情，您可以参考以下测试示例：

控制器：

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

查看：

<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="[email protected]">
                        <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>
}

局部视图：

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

结果如下：