首页 > 解决方案 > .NET 5 MVC @Url.Action 总是转到 IActionResult 索引

问题描述

当尝试使用 Bootstrap 5.1 打开模式(在部分视图的索引页面上)时,我总是被路由到Index而不是Create IActionResult.

data-bs-urlfor 按钮已正确生成,但结果我正在Index.cshtml加载<div id="PlaceholderForModal"></div>

铬屏幕截图

员工控制器

    public async Task<IActionResult> Index()
    {
        return View();
    }
    
    [HttpGet]
    public IActionResult Create()
    {
        Employees emp = new();
        return PartialView("_CreatePartial", emp);
    }

索引.cshtml

<button type="button" class="btn btn-primary" data-bs-toggle="ajax-modal" data-bs-target="#CreateEmployeeModal" data-bs-url="@Url.Action("Create", "Employees", null)">Register new employee</button>
<div id="PlaceHolderForModal"></div>

_CreatePartial.cshtml

@model Employees
<div class="modal fade" id="CreateEmployeeModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add employee</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="Create">
                    <..some textboxes etc..>
                </form>
            </div>
            <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</button>
            </div>
        </div>
    </div>
</div>

网站.js

$(function () {
    var PlaceHolderElement = $('#PlaceHolderForModal');
    $('button[data-bs-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');
        })
    })
})

谢谢

标签: twitter-bootstrapasp.net-core

解决方案


推荐阅读