Modal ViewComponent不显示数据
我正在尝试在ASP.NET MVC Core2中使用Razor Pages和ViewComponents实现我的第一个解决方案，但我遇到了一个问题。
具体地说，我有一个在Razor页面上显示的项目列表。列表中的每一项都有一个按钮。单击此按钮时，我希望将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);
});为Modal生成数据的控制器操作：
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);
}
}bootstrap 4模式的default.cshtml部分：
<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>任何帮助都非常感谢，
谢谢,
皮特
回答 2
Stack Overflow用户
发布于 2018-12-12 08:14:15
在我的例子中，我必须通过Jquery get更新Modal。
因此，在"parent“页面上调用ViewComponent：
@await Component.InvokeAsync("Location")单击"parent“页面中的某一项后，执行jquery "get”，传入参数并填充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);
});
});Stack Overflow用户
发布于 2018-12-07 16:29:47
如果我理解正确的话，您只是想在单击这些按钮时触发一个模式显示。
如果您不想在最初加载时呈现视图组件，则不需要调用该组件。：
<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">×</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>
}演示：
https://stackoverflow.com/questions/53663527
复制相似问题
腾讯云开发者
