如何通过单击html表格的一行来转到另一个页面？答案

【问题标题】：How to go to another page by clicking on a row of a html-table?如何通过单击html表格的一行来转到另一个页面？
【发布时间】：2021-04-16 14:53:10
【问题描述】：

我有一个 MVC 应用程序。

我想通过单击索引页面的行进入详细信息页面。

你是怎么做到的？

Index.cshtml 的一部分

        @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')

...在 HomeController 中

    [HttpPost]
    public IActionResult DetailInfo(int id)
    {
        var dto = _logboekService.GetLogBerichtById(id);

        var model = _mapper.Map<LogBerichtDto, LogBerichtModel>(dto);

        return View(model);
    }

【问题讨论】：

标签： ajax vue.js model-view-controller

【解决方案1】：

要转到另一个页面，您可以使用router.push({ path: 'home' })，如vue-router documentation 中所述。

【讨论】：

像这样：detailInfo(id) { router.push({ path: 'home', name: 'detailInfo' params: { id: id } }) }, ?
我不知道，这取决于您的组件的组织方式。一件事是，您可以调用name 来获取组件的名称，或者调用path 来获取一些硬编码的字符串，例如("/admin")。至于参数，是的，您可以像这样对它们进行路径。因此，最终查询可能看起来像 router.push({ name: 'detailInfo' params: { id } }) yes。
Home(Controller)，DetailInfo为action，id为action中的参数。
在这里，我们谈论的是 VueJS 组件，因此没有控制器/也没有任何操作。它是您要移动到的路径以及在组件中可能需要的几个参数。
"/Home/DetailInfo?id=1" 这是网址。