Модально как ViewComponent не отображает данные

Question

Я пытаюсь реализовать свое первое решение, используя Razor Pages и ViewComponents в ASP.NET MVC Core 2, и у меня возникла проблема.

В частности, у меня есть список элементов, отображаемых на RazorPage.У каждого элемента в списке есть кнопка.Когда эта кнопка нажата, я хочу передать 2 параметра в ViewComponent (который является модалом начальной загрузки) и отобразить модальное.Проблема в том, что я не могу получить данные для отображения.

В частности, я бы хотел вызывать ViewComponent только после нажатия кнопки, а не при отображении родительской страницы.Я не думаю, что у меня есть «поток» правильно.В любом случае, вот что у меня есть:

Родительская страница бритвы со списком элементов и вызовом ViewComponent:

@foreach (var item in Model.SearchResults)
{
    items
}

@await Component.InvokeAsync("Location")

Jquery $ .get вызов контроллера, передавая параметры контроллерудля генерации модальных данных:

thisdata = $(this).attr('data-author');
 searchString = $(location).attr('href').split("=")[1];

  $.get("/Search/GetLocations", { "author": thisdata, "searchString": searchString })
            .done(function (data, textStatus, jqXHR) {

            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);

            });

Действие контроллера, которое генерирует данные для модальных:

public ViewComponentResult GetLocations(string author, string searchString)
{
    var model = _tclRepository.GetLocations(author, searchString);

    return ViewComponent("Location", model);
}

ViewComponent:

public IViewComponentResult Invoke(IEnumerable<LocationViewModel> model)
{
    if (model == null)
    {
        var x = Enumerable.Empty<Data.ViewModels.LocationViewModel>().ToList();
         return View(x);
     }
     else
     {
         return View(model);
  }
}

Часть default.cshtmlкоторый является бутстрап 4 модальный:

<div class="modal-body">
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Copy #</th>
                <th scope="col">Branch</th>
                <th scope="col">Status</th>
                <th scope="col">Date Due</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <th scope="row">1</th>
                        <td>@item.Branch</td>
                        <td>@item.Status</td>
                        <td>@item.DueDate</td>
                 </tr>
             }
    </tbody>
  </table>
 </div>

Любая помощь очень ценится,

Спасибо,

Пит

Answer 1

В моем случае мне пришлось обновить модал с помощью Jquery get.

Итак, на «родительской» странице вызвать ViewComponent:

@await Component.InvokeAsync("Location")

После нажатия кнопки на одном изэлементы на «родительской» странице выполняют jquery «get», передавая параметры и заполняя модель для ViewComponent.Затем мне пришлось обновить Viewcomponent "default.html" новыми данными, как показано ниже.Это то, что сработало для меня.Хотя я не уверен, что это «лучшее» решение, поэтому ваш пробег может варьироваться (как говорится).

~ Пит

 $('button').click(function (e) {

        var author = $(this).data('author');
        var searchString = $(location).attr('href').split("=")[1];

        e.preventDefault();
        $.get("/Search/GetLocations", { "author": author, "searchString": searchString })
            .done(function (data, textStatus, jqXHR) {
                console.log(data);

                $('.table').find("tr:gt(0)").remove();
                var row = $(data).find('tbody').html();
                $('.table > thead').append(row);

            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
            });
    });

Answer 2

Если я правильно понимаю, вы просто хотите запустить модальное шоу при нажатии любой из этих кнопок.

И если вы не хотите отображать компоненты вида при первоначальной загрузке, вам не нужночтобы вызвать этот компонент.:

<div class="search-results">
    @foreach (var item in Model.SearchResults)
    {
        <button>@item</button>
    }

    <!-- @await Component.InvokeAsync("Location") -->
</div>

Поскольку вы ожидаете модальный режим, я добавляю шаблон модели в файл вида:

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary close" >Close</button>
      </div>
    </div>
  </div>
</div>

Наконец, прослушивание события щелчка, отправка запроса на сервер,и переключите модальное, как вам нравится:

@section Scripts{
<script>
    thisdata = $(this).attr('data-author');
    searchString = $(location).attr('href').split("=")[1];


    $(".search-results button").click(function(e){
        e.preventDefault();
        $.get("/Search/GetLocations", { "author": thisdata, "searchString": searchString })
            .done(function (data, textStatus, jqXHR) {
                console.log(data);
                $(".modal .modal-body").html(data);
                $('.modal').modal('show');
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                console.log(jqXHR);
            });
        return false;
    });

    $(".modal button.close").click(function(e){
        e.preventDefault();
        $('.modal').modal('hide');
        return false;
    });

</script>
}

Демо: