Modal 作为 ViewComponent 不显示数据

Question

我正在尝试在 ASP.NET MVC Core 2 中使用 Razor Pages 和 ViewComponents 实现我的第一个解决方案，但我遇到了问题。

具体来说，我在 Razor 页面上显示了一个项目列表。列表中的每个项目都有一个按钮。单击此按钮时，我想将 2 个参数传递给 ViewComponent（这是一个 bootstrap 模态）并显示模态。问题是我无法获取要显示的数据。

具体来说，我只想在单击按钮后调用 ViewComponent，而不是在呈现父页面时调用。我认为我的 "flow" 不正确。无论如何，这是我目前所拥有的：

包含项目列表和调用 ViewComponent 的父 Razor 页面：

@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);
}

视图组件：

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 的部分 bootstrap 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

如果我没理解错的话，您只是想在单击这些按钮中的任何一个时触发模态显示。

如果您不想在最初加载时呈现视图组件，则不需要调用该组件。 :

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

一个演示：

Answer 2

在我的例子中，我必须通过 Jquery get 更新模式。

因此在 "parent" 页面上调用 ViewComponent：

@await Component.InvokeAsync("Location")

单击 "parent" 页面中的一项按钮后，执行 jquery "get" 传递参数并为 ViewComponent 填充模型。然后我必须使用新数据更新 Viewcomponent 的 "default.html"，如下所示。这对我有用。虽然我不相信这是 "best" 解决方案，所以你的里程可能会有所不同（正如他们所说）。

~皮特

 $('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);
            });
    });

Modal 作为 ViewComponent 不显示数据

Modal as ViewComponent Not Displaying Data

jquery

asp.net-core-mvc

razor-pages

asp.net-core-viewcomponent