我创建了一个模态组件，但它不起作用

Question

我是 ASP.NET Core 编码的新手。我在我的应用程序中创建了一个 CRUD 函数，然后我决定更改一些规则，例如 Create New 不要导航到另一个选项卡，它将导航到一个组件模式。所以我执行了教程中显示的步骤，但没有得到结果。

这是页面：

这是index.cshtml中的代码：

@model IEnumerable<PermissionManagement.MVC.Models.Segment>
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="PlaceHolderHere"></div>
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#addSegment" asp-action="_SegmentModelPartial" data-url="@Url.Action("Create")"> Create </button>

这是在SegmentModelPartial中编写的代码：

@model Segment

<div class="modal fade" id="addSegment">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addSegmentLabel">Modal title</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                    <span>x</span>
                </button>
            </div>
            
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <form asp-action="Create">
                            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                            <div class="form-group">
                                <label asp-for="SName" class="control-label">Nom</label>
                                <input asp-for="SName" class="form-control" />
                                <span asp-validation-for="SName" class="text-danger"></span>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group ">
                                        <label asp-for="SRang" class="control-label">Rang</label>
                                        <input asp-for="SRang" class="form-control" />
                                        <span asp-validation-for="SRang" class="text-danger"></span>
                                    </div>
                                </div>
                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" data-save="modal">Save changes</button>
                    </div>
                </div>
    </div>
</div>

这是我在 site.js 中的代码：

$(function () {
    var PlaceHolderElement = $('#PlaceHolderHere');
    $('button[data-toggle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        })
    })
    PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();
        $.post(actionUrl, sendData).done(function (data)){
            PlaceHolderElement.find('.modal').modal('hide');
        })
    })
})

最后是控制器：

[HttpGet]    
public IActionResult Create()
{
    Segment seg = new Segment();
    return PartialView("_SegmentModelPartial", seg);
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(Segment segment)
{  
    _context.Add(segment);
    await _context.SaveChangesAsync();

    return PartialView("_SegmentModelPartial", segment);    
}