Question

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

具体地说，我在剃刀页面上显示了一个项目列表。列表中的每个项目都有一个按钮。单击此按钮时，我想将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>

非常感谢您的帮助，

谢谢

Pete

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>

最后，监听click事件，向服务器发送请求，然后根据需要切换模式：

@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来更新Modal。

因此，在“父”页面上调用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);
            });
    });

作为ViewComponent的模态不显示数据

2 个答案: