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

Question

我有一个MVC应用程序。

我想通过单击索引页面的行转到DetailInfo页面。

你怎么做到的？

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

Answer 1

要转到另一个页面，可以按照vue-router documentation中的说明使用router.push({ path: 'home' })。