首页 > 解决方案 > Razor,而不是 MVC:如何在按钮单击时调用页面模型方法来更新数据库

问题描述

我一直在尝试将我的思维方式从 Web 窗体转向 .NET5/Core Razor。我一直听说 MVC 被 Razor 页面所掩盖,但我找到的所有帮助都与 MVC 相关。我正在使用 Razor 和 Dapper,所以我可以避免使用实体框架。我将我的歌曲列表(来自 SQL 数据库)显示在 HTML 表中,并且在每一行上都有按钮,我想用它来单击以向上或向下移动该行。这需要更新我的歌曲表中的 sort_order 列。我对更新表格的逻辑没有问题,但是如何在我的cs页面中调用我的方法并传递参数?

我的cs页面中的sortSongs(int currentPlace,string sortDirection)。

<table id="DT_load2" class="table table-striped table-bordered" style="width:100%">
    <thead style="align-content:center;">
        <tr>
            <th>Title</th>
            <th>Artist</th>
            <th>Key</th>
            <th>Tempo</th>
            <th>Genre</th>
            <th>Feel</th>
            <th>Lyrics</th>
            <th>Sort</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.getSongs())
        {
            
            if (cnt == 0) {<tr><td colspan="8" style="background-color: darkgray;font-weight: 600;color: white;">Group @grpcnt</td></tr>}
            cnt++;
            if (cnt == 3) { grpcnt++; }
            if (cnt == 4) { cnt = 1; }

    <tr>
        <td>
            <a href="@Html.DisplayFor(modelItem => item.link)" target="new">@Html.DisplayFor(modelItem => item.title)</a>
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.artist)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.song_key)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.tempo)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.genre)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.feel)
        </td>
        <td>
            Lyrics
        </td>
        <td>
            <button type="button" class="btn btn-secondary" onclick=@Model.sortSongs(Convert.ToInt32(@Html.DisplayFor(modelItem => item.id)),"U")>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" />
                </svg>
                <span class="visually-hidden"></span>
            </button>
            <button type="button" class="btn btn-secondary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" />
                </svg>
                <span class="visually-hidden"></span>
            </button>
        </td>
    </tr>

            if (cnt == 3)
            {
                <tr><td colspan="8" style="background-color:darkgray;font-weight:600;color:white;">Group @grpcnt</td></tr>
            }
        }
    </tbody>
</table>

标签: c#.netasp.net-corerazor

解决方案


@Model.sortSongs(Convert.ToInt32(@Html.DisplayFor(modelItem => item.id)),"U")

您没有向该方法发送请求。Razor 页面中的路由与 MVC 中的路由不同。处理程序应该以OnGetor开头OnPost,表示它是一个 get 或 post 方法。在这里,您可以使用锚点代替按钮,如下所示:

索引.cshtml:

<a href="Index?handler=sortSongs&currentPlace=1&sortDirection=U" type="button" class="btn btn-secondary">click</a>

索引.cs.cshtml:

public void OnGetSortSongs(int currentPlace, string sortDirection)
{
        
}

结果:

在此处输入图像描述


推荐阅读