如何在.NET Core MVC 的部分视图中使用 jQuery 无阻碍验证？

Question

我有一个 .NET MVC Core 应用程序，其中使用 Bootstrap Modal Popups 进行 CRUD 操作。我还有一个导航栏，其中有一个下拉菜单。

我遇到了一个奇怪的错误。每当我单击“创建”、“编辑”或“删除”按钮并关闭索引页面中的模式弹出窗口时，我的下拉菜单就会停止工作。如果我再次单击这些按钮中的任何一个，那么下拉菜单将再次开始工作。

我在互联网上进行了大量研究，但没有找到适合我需求的解决方案。任何帮助将不胜感激:)

相关代码如下：

我的 Index.cshtml 文件

@model IEnumerable<MonitoringFinances.Models.AdminModels.PredefinedCategory>
@{
    int counter = 1;
}
<div class="container">
    <div class="row my-3">
        <div class="col-12 col-md-8 p-3 ">
            <h1 class="display-5">
                Predefined Categories
            </h1>
        </div>
        <div class="col-12 col-md-4 text-end d-flex align-items-center justify-content-md-end">
            <a class="btn btn-dark px-4 fs-5" onclick="UpSert(0)">
                <i class="fas fa-plus"></i>&nbsp;Create New
            </a>
        </div>
    </div>
    <div class="row my-3">
        @if (Model.Count() > 0)
        {
            <div class="row my-3">
                <div class="d-flex align-items-center">
                    <table class="table table-striped text-center align-middle">
                        <thead>
                            <tr>
                                <th scope="col" class="fs-5">#</th>
                                <th scope="col" class="fs-5">Name</th>
                                <th scope="col" class="fs-5">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var category in Model)
                            {
                                <tr>
                                    <th scope="row" class="fs-5">@counter</th>
                                    <td class="fs-5">@category.Name</td>
                                    <td class="text-center">
                                        <div class="w-50 btn-group" role="group">
                                            <a onclick="UpSert(@category.Id)" class="btn btn-primary mx-2">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a onclick="Delete(@category.Id)" class="btn btn-danger mx-2">
                                                <i class="far fa-trash-alt"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                counter++;
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        }
        else
        {
            <div class="col p-3">
                <p class="lead">No Predefined Category Exists!</p>
            </div>
        }
    </div>
</div>

<!--Create/Edit Category Modal-->
<div class="modal fade" id="UpSertCategoryModal" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <p class="h5 modal-title" id="modal-title">Create Predefined Category</p>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="UpSertCategoryModalBody">
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button id="UpSertCategoryFormButton" form="UpSertCategoryForm" type="submit" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

<!--Delete Category Modal-->
<div class="modal fade" id="DeleteCategoryModal" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <p class="h6 modal-title" id="modal-title">Delete Predefined Category</p>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="DeleteCategoryModalBody">
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button id="DeleteCategoryFormButton" form="DeleteCategoryForm" type="submit" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        var UpSert = function (Id) {
            var url = "/PredefinedCategory/UpSert?Id=" + Id;
            if (Id > 0)
                $('#modal-title').html("Edit Predefined Category");
            $("#UpSertCategoryModalBody").load(url, function () {
                $("#UpSertCategoryModal").modal("show");
            });
        }

        var Delete = function (Id) {
            var url = "/PredefinedCategory/Delete?Id=" + Id;
            $("#DeleteCategoryModalBody").load(url, function () {
                $("#DeleteCategoryModal").modal("show");
            });
        }
    </script>
}

_UpSert.cshtml 文件：

@model MonitoringFinances.Models.AdminModels.PredefinedCategory
<!--Required Scripts and Stuff-->


<form asp-controller="PredefinedCategory" asp-action="UpSert" id="UpSertCategoryForm">
    <input type="hidden" asp-for="Id" />
    <div class="row mb-3">
        <label asp-for="Name" class="col-sm-2 col-form-label">Name</label>
        <div class="col-sm-10">
            <input asp-for="Name" class="form-control" id="Name" aria-describedby="Name">
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
    </div>
</form>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

注意：如果我删除此 UpSert 文件中的脚本引用，则下拉列表可以正常工作，但我的客户端验证将不再起作用:(

预定义类别控制器.cs

public IActionResult Index()
        {
            IEnumerable<PredefinedCategory> predefinedCategoryList = _db.PredefinedCategory;
            return View(predefinedCategoryList);
        }

        [HttpGet]
        public IActionResult UpSert(int? id)
        {
            if (id == null || id == 0)
            {
                return PartialView("~/Views/PredefinedCategory/_Upsert.cshtml");
            }
            else
            {
                PredefinedCategory predefinedCategory = _db.PredefinedCategory.Find(id);
                if (predefinedCategory == null)
                {
                    return NotFound();
                }
                return PartialView("~/Views/PredefinedCategory/_Upsert.cshtml", predefinedCategory);
            }
        }

       [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Upsert(PredefinedCategory predefinedCategory)
        {
            if (ModelState.IsValid)
            {
                if (predefinedCategory.Id == 0)
                {
                    _db.PredefinedCategory.Add(predefinedCategory);
                }
                else
                {
                    _db.PredefinedCategory.Update(predefinedCategory);
                }
                _db.SaveChanges();
                return RedirectToAction(nameof(Index));
            }
            else
            {
                return StatusCode(500);
            }
        }

_Layout.html 文件中的 Nav Dropdown 代码：

 <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Management
                                </a>

                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li>
                                        <a class="dropdown-item nav-link text-dark ps-2" asp-controller="Category" asp-action="Index">Categories</a>
                                    </li>
                                    @if (User.IsInRole(WebConstant.AdminRole))
                                    {
                                        <li>
                                            <hr class="dropdown-divider" />
                                        </li>
                                        <li>
                                            <a class="dropdown-item nav-link text-dark ps-2" asp-controller="PredefinedCategory" asp-action="Index">Predefined Categories</a>
                                        </li>

                                        <li>
                                            <a class="dropdown-item nav-link text-dark ps-2" asp-area="Identity" asp-page="/Account/Register">Create User</a>
                                        </li>
                                    }
                                </ul>
                            </li>

Answer 1

你解决过这个话题吗？谢谢！