如何通过单击html表的一行转到另一个页面

Question

我有一个MVC应用程序。

我想通过单击"索引"页面的行转到"详细信息"页面。

你是怎么做到的？

Index.chtml 的一部分

@for (var item = 0; item < Model.Count; item++)
{
<tbody>
<tr @@click="detailInfo(@Model[item].Id)">
<td>@Html.DisplayFor(Model => Model[item].Message)</td>

logmessages.js

const app = Vue.createApp({
// data, functions
methods: {
rowClick(item) {
console.log('Dit is regel: ' + item)
},
detailInfo(id) {
$.ajax({
type: "POST",
url: '<% = Url.Action("DetailInfo", "Home") %>',
data: { id = id },
succes: function (data) {
console.log(id + "is posted.");
}
})
},
}
})
app.mount('#app')

以及在家庭控制器中

[HttpPost]
public IActionResult DetailInfo(int id)
{
var dto = _logboekService.GetLogBerichtById(id);
var model = _mapper.Map<LogBerichtDto, LogBerichtModel>(dto);
return View(model);
}

Answer 1

要转到另一个页面，可以使用vue路由器文档中所述的router.push({ path: 'home' })。