Question

由于某种原因，下面的链接触发了bootstrap模式弹出窗口，但没有按控制器操作来获取填充模式所需的数据。我有几个其他模式以类似的方式设置，按预期工作。请看一下我的代码：

_EventsPartial.cshtml（部分主页包含链接）

<!-- language: lang-html -->
<table class="table table-hover">
    @foreach (var calendarEvent in Model.CalendarEvents)
    {
        <tr>
            <td class="date-col">
                <a class="view-event-anywhere" asp-controller="Calendar" asp-action="ViewEvent" asp-route-id="@calendarEvent.Id">
                    <span class="date">@ViewHelpers.FormatShortDate(calendarEvent.Start)</span>
                </a>
            </td>
            <td>
                <a class="view-event-anywhere" asp-controller="Calendar" asp-action="ViewEvent" asp-route-id="@calendarEvent.Id">
                    <span class="date-description">@calendarEvent.Title</span>
                </a>
            </td>
        </tr>
    }
</table>

主页渲染得很好，当我将鼠标悬停在链接上时，网址看起来是正确的：

CalendarController.cs

<!-- language: c# -->

// using statements and namespace omitted

[Route("/calendar")]
[Authorize(Policy = "NetContent")]
public class CalendarController : Controller
{
    private ICalendarEventRepository _eventRepo;

    public CalendarController(ICalendarEventRepository eventRepo)
    {
        _eventRepo = eventRepo;
    }

    ...

    [HttpGet("view_event/{id}"), AllowAnonymous]
    public IActionResult ViewEvent(int id)
    {
        var requestedEvent = _eventRepo.GetById(id);
        if (requestedEvent != null)
        {
            ViewData["CalendarEvent"] = requestedEvent;
            return PartialView("_ViewEventAnywhere");
        }
        return RedirectToAction("Index");
    }

}

我在ViewEvent()函数的第一行插入了一个断点，但是在触发链接后代码永远不会被执行。

_Layout.cshtml

<!-- language: lang-html -->
@using Laramie.Net.Features.Calendar

<div id="ViewEventAnywhereModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        @Html.Partial("/Features/Calendar/_ViewEventAnywhere.cshtml")
    </div>
</div>

_ViewEventAnywhere.cshtml

<!-- language: lang-html -->
@{
    var selectedEvent = ViewData["CalendarEvent"] as CalendarEvent;
}

@if (selectedEvent != null)
{
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 id="modalTitle" class="modal-title">@selectedEvent.Title</h4>
        </div>
        <div class="modal-body">

        ...

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
}

site.js

<!-- language: lang-js -->
// View Event Anywhere Modal
$(function () {
    $('body').on('click', '.view-event-anywhere', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#ViewEventAnywhereModal');
        $(this).attr('data-toggle', 'modal');
    });

    $('body').on('click', '.close', function () {
        $('#ViewEventAnywhereModal').modal('hide');
    });

    $('#ViewEventAnywhereModal').on('hidden.bs.modal', function () {
        $(this).removeData('bs.modal');
    });
})

如果我从链接中删除了view-event-anywhere类，则会触发控制器操作，但弹出模式不是，所以我猜测问题出在JavaScript上？我必须遗漏一些东西，因为它与我用于其他模态（除了类和id名称除外）相同的JavaScript代码有效。如果有人能够指出我的错误，我会非常感激！

更新我添加了在同一个项目中实现的类似模式的代码，该模式正在按预期工作。我无法弄清楚两者之间的区别是什么导致上面的那个不起作用。

_Layout.cshtml

<!-- language: lang-html -->

<!-- link in navbar -->
<li>
    <a class="upload-file" asp-controller="FileManager" asp-action="UploadFile">Upload a File</a>
</li>

<!-- modal div -->
<div id="UploadFileModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        @Html.Partial("/Features/FileManager/_UploadFileModal.cshtml", new FileManagerViewModel())
    </div>
</div>

FileManagerController.cs

<!-- language: c# -->
[HttpGet]
public IActionResult UploadFile()
{
    PopulateCategoryDropDownList();
    return PartialView("_UploadFileModal");
}

[HttpPost, ValidateAntiForgeryToken]
public async Task<IActionResult> UploadFile(FileManagerViewModel model)
{

...

}

private void PopulateCategoryDropDownList(int selectedCategory = 0)
{
    var categories = _categoryRepo.GetAll();
    ViewData["CategoryList"] = new SelectList(categories, "CategoryId", "Name", selectedCategory);
}

_UploadFileModal.cshtml

<!-- language: lang-html -->
@model FileManagerViewModel

@{ 
    var categories = ViewData["CategoryList"] as SelectList;
}

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Upload a File</h4>
    </div>
    <div class="modal-body">
        <form method="post" enctype="multipart/form-data" asp-controller="FileManager" asp-action="UploadFile" asp-antiforgery="true">

        ...

        </form>
    </div>
</div>

site.js

<!-- language: lang-js -->
// Upload File Modal
$(function () {
    $('body').on('click', '.upload-file', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#UploadFileModal');
        $(this).attr('data-toggle', 'modal');
    });

    $('body').on('click', '.close', function () {
        $('#UploadFileModal').modal('hide');
    });

    $('body').on('click', '.submit-file', function () {
        $('#UploadFileModal').modal('hide');
    });

    $('#UploadFileModal').on('hidden.bs.modal', function () {
        $(this).removeData('bs.modal');
    });
})

Answer 1

它最终成为一个引导问题。我必须将<div class=modal-content">标记移到 _ViewEventAnywhere.cshtml 文件中的if语句之外。它阻止了引导程序的正常运行。

锚点标记助手触发弹出模式但不关联控制器操作

1 个答案: