アンカータグヘルパーは、ポップアップモーダルをトリガーしますが、関連付けられたコントローラーアクションは実行しません

Question

何らかの理由で、以下のリンクがブートストラップモーダルポップアップをトリガーしていますが、コントローラーアクションでモーダルを設定するために必要なデータを取得しません。私は他のいくつかのモーダルを同様の方法でセットアップして、期待どおりに動作させています。私のコードを見てみてください：

_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> 

ホームページがうまくレンダリングし、私がリンクにカーソルを合わせると、URLが正しいになります。

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コードと同じです。誰かが私の間違いを指摘できれば、私は大いに感謝しています！

更新日： 予想通りに動作しているこの同じプロジェクトで実装されている同様のモーダルのコードを追加します。私は違いが2つの間にあることを理解できず、上記のものが動作しないようにします。

_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ステートメントの外に移動しなければなりませんでした。ブートストラップが正しく機能しないようにしていました。