Возвращение ViewComponent внутри Bootstrap модально. NET Core 3.1 C#

Question

Я строю ASP. NET Ядро MVC Приложение. (. NET Core 3.1)

В одном из представлений - Результаты. chtml (с огромным количеством отображаемых строк БД), я решил отобразить более подробную информацию о каждой строке во всплывающем окне Bootstrap.

Итак - каждая строка в этом представлении имеет кнопку, которая отображает модальное поле с соответствующими данными, связанными свойством кнопки. Я загружаю ViewComponent в это модальное тело, используя 'on (' show.bs.modal ') и $. Get () - Я вызываю действие в мой контроллер и действие возвращает ViewComponent .

Загружается правильный ViewComponent со всеми правильно выбранными данными. Проблема:

Все, что связано с плагином jQuery DataTables, исчезло из модального. (когда я отображал его на отдельной странице - он работал отлично)

---

То, что я пытался изменить

Сначала у меня были jQuery DataTables скрипт загружен в файл .cs html этого ViewComponent, но он ведет себя совершенно непредсказуемо. После того, как параметры сортировки и фильтрации появились, один раз нет. Я решил изменить его и Я переместил jQuery Сценарии DataTables в главное представление - Results.cs html. Теперь: это не работает, но ... ошибка, говорящая о том, что метод dataTable () не распознан, отсутствует в консоли JS! Это означает, что он успешно загрузил скрипты DataTables ...

Где мне загружать скрипты DataTables? Теперь они загружены в файл Layout.cs html. Возможно ли, что порядок этих загрузок делает невозможным использование DataTables внутри модала? Является ли это даже источником моих проблем

Важные кодовые части

1. Layout.cshtml

2. Сценарий внутри файла Results.cs html (с перемещенным фрагментом в конце - dataTables (...))

   $(function () {
   
       $(document).ajaxStart(function() {
         $("#loading").show();
       });
   
       $(document).ajaxStop(function() {
         $("#loading").hide();
       });
   
       $('#exampleModal').on('show.bs.modal', function (event) {
           var container = $("#receiptDetailsView");
           var clickedRow = $(event.relatedTarget);
           var accountId = clickedRow.data('accountidvalue');
           $.get("/Receipts/" + accountId, function (data) { container.html(data); });
       });
   
       $("#exampleModal").on("hidden.bs.modal", function () {
           $("#receiptDetailsView").html("");
       });
   
       $('#sortableReceiptsTable').dataTable({
           "filter": true,
           "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
       });
   });
   

3. Модальная разметка в Results.cshtml

4. Действие, вызываемое AJAX get:

   [HttpGet("receipts/{accountId}")]
   public IActionResult ShowReceipts([FromRoute]string accountId)
   {
       // invokes the InvokeAsync method of ReceiptsViewComponent
       return ViewComponent("Receipts", accountId);
   }
   

5. InvokeAsyn c Метод внутри класса ViewComponent:

   public async Task<IViewComponentResult> InvokeAsync(string accountId)
   {
       var allReceipts = await _cosmosDbService.GetReceiptsByAccountIdAsync(accountId);
   
       List<ReceiptViewModel> recVMs = allReceipts.Select(u => u.ToReceiptViewModel()).ToList();
   
       return View("Receipts", recVMs);
   }
   

Спасибо!

Answer 1

Вот рабочая демонстрация, к которой можно обратиться:

Модель:

public class Link
{
    public int Id { get; set; }
    public string Title { get; set; }

    public string Url { get; set; }
    public string Description { get; set; }

    public int CategoryId { get; set; }
    public Category Category { get; set; }
}
public class Category
{
    public int Id { get; set; }
    public string Title { get; set; }
    public int Order { get; set; }

    public ICollection<Link> Links { get; set; }
}

JS представление inMain

@section Scripts
{
<script>
        $(function () {

            $(document).ajaxStart(function() {
              $("#loading").show();
            });

            $(document).ajaxStop(function() {
              $("#loading").hide();
            });

            $('#exampleModal').on('show.bs.modal', function (event) {
                var container = $("#receiptDetailsView");
                var clickedRow = $(event.relatedTarget);
                var accountId = clickedRow.data('accountidvalue');
                $.get("/Receipts/" + accountId, function (data){container.html(data);});

            });  

            $("#exampleModal").on("hidden.bs.modal", function () {
                $("#receiptDetailsView").html("");
            });
        });
</script>
}

Просмотр класса компонентов

    public async Task<IViewComponentResult> InvokeAsync(string accountId)
    {
        var categoryId = Convert.ToInt32(accountId);
        var model = _context.Link.Where(l => l.CategoryId == categoryId).ToList();
        return View(model);
    }

Вид по умолчанию компонента вида

@model List<MVCDemo3_1.Models.Links.Link>

<div class="container">
<br />
<div style="width:90%; margin:0 auto;">
    <table id="sortableReceiptsTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Title</th>
                <th>Description</th>
                <th>action</th>
            </tr>
        </thead>
    </table>
</div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#sortableReceiptsTable').DataTable({
            data: @Html.Raw(Json.Serialize(Model)),
            columns: [
                { 'data': 'title' },
                { 'data': 'description' },
                {
                    'data': 'id',
                    'render': function (data) {
                        {
                            return '<a  href="#" title="ویرایش" style="margin-left:10px" class="btn btn-success button"  onclick="openModal(' + data + ');"><i class="fa fa-edit"></i></a><a  href="#" title="حذف" style="margin-right:10px"  class="btn btn-danger button"  onclick="deleteUser(' + data + ')"><i class="fa fa-trash"></i></a>'
                        }
                    },
                }
            ]
        });
    });
</script>

Результат: