从局部视图父视图中禁用按钮

Question

我有父视图“index.cshtml”和局部视图“_AddEmployeePartialView.cshtml”。我目前正在尝试弄清楚如何在单击局部视图中的“保存”按钮并且当然关闭局部视图后禁用“添加员工”按钮。我不擅长 javascript，所以我很感激我可能收到的任何帮助。这是我使用的代码：

index.chtml:

@model IEnumerable<Department>

@{
    ViewData["Title"] = "Department";
}
<table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>
                            @Html.DisplayNameFor(model => model.DepId)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.DepName)
                        </th>
                        
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.DepId)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.DepName)
                            </td>
                            
                            <td>
                                <div class="btn-group-sm">
                                    
                                        <button class="btn btn-primary" data-toggle="modal" data-target="@("#AddEmp-"+item.DepId)" data-url="@Url.Action($"AddEmployee/{item.DepId}")" id="btnAdd" >Add Employees</button>
                                        @await Html.PartialAsync("_AddEmployeePartialView", item)
                                    
                                <script>
                                    $('#AddEmp-' + @Html.Raw(item.DepId)).on('click', '#btnSave', function () {
                                        document.getElementById("btnAdd").disabled = true;
                                </script>
                                </div>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

_AddEmployeePartialView.cshtml:

    @model management.Models.Employee

@{
    ViewData["Title"] = "_AddEmployeePartialView";

}

<div class="modal fade" role="dialog" tabindex="-1" id="@("AddEmp-"+Model.DepId)"  aria-labelledby="addEmpLabel" aria-hidden="true" >
    <div class="modal-dialog " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Employees</h3>
            </div>
            <div class="modal-body">
               
                <form asp-action="AddEmployee" method="post">
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <input asp-for="DepId" type="hidden" />
                    
                            <table class="table table-bordered" >
                                <thead>
                                    <tr>
                                        <th>Employee name</th>
                                        <th>Profession</th>
                                        <th>Phone</th>
                                        
                                    </tr>
                                </thead>
                                <tbody>


                                    @for (int i = 0; i < Model.Employees.Count; i++)
                                    {
                                        <tr>

                                            <td>
                                                @Html.EditorFor(x => x.Employees[i].EmpName, new { htmlAttributes = new { @class = "form-control" } })
                                            </td>

                                            <td>
                                                @Html.EditorFor(x => x.Employees[i].Profession, new { htmlAttributes = new { @class = "form-control" } })
                                            </td>
                                            <td>
                                                @Html.EditorFor(x => x.Employees[i].Phone, new { htmlAttributes = new { @class = "form-control" } })
                                            </td>
                                           
                                        </tr>
                                    }
    
                                </tbody>
                            </table>
                        
                    
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="javascript:window.location.reload()">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="btnSave">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

此代码无效，索引视图中的按钮未禁用。如何解决这个问题？

Answer 1

ID 必须是唯一的。也许你打算做

<div class="btn-group-sm">
  <button class="btn btn-primary btnAdd" data-toggle="modal" data-

并在页面上有一个这样的实例

$("#btnSave").on("click", function() { 
  $(".btnAdd").each(function() { this.disabled = true });
})