为记录和更新字段中的行创建按钮答案

【问题标题】：create button for lines in records and update field为记录和更新字段中的行创建按钮
【发布时间】：2021-01-27 22:10:18
【问题描述】：

我有一张订单表，我想为表格中的每一行创建一个按钮，单击该按钮将更改该记录中字段的值（订单状态为取消），而无需重定向到任何更新页面。我使用 HtmlAction 创建了一个链接，但它没有激活该功能（见屏幕截图）这是actionLink：

   <td>
       <div class="text-center">
           <p>@Html.ActionLink("cancel", "CancelOrder", "Order",new { id = @order.Id })</p>
       </div>
</td>

谢谢！

【问题讨论】：

嗨@Kobi，关于这个案例的任何更新？
感谢您的详细回答，当我回到这个问题时，我会尝试应用该解决方案，并会及时通知您，非常感谢 :)
希望我的回答对您有所帮助，等待您的回复。

标签： asp.net asp.net-mvc asp.net-core asp.net-mvc-4 asp.net-mvc-3

【解决方案1】：

您收到 405 错误，因为“CancelOrder”方法应该是获取请求而不是发布请求。下面是一个工作演示：

索引视图：

    <table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IsCancle)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var order in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => order.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => order.IsCancle)
            </td>    
            <td>
                <p>@Html.ActionLink("cancel", "CancelOrder", "Orders", new { id = @order.Id })</p>
            </td>
        </tr>
}
    </tbody>
</table>

控制器：

public async Task<IActionResult> Index()
    {
        return View(await _context.Orders.ToListAsync());
    }
    [HttpGet]
    public IActionResult CancelOrder(int id)
    {
        var order = _context.Orders.Find(id);
        order.IsCancle = true;
        _context.Update(order);
        _context.SaveChanges();

        return RedirectToAction(nameof(Index));
    }

结果：

顺便说一下，如果你不想刷新整个页面，我推荐你使用Ajax。以下是使用 Ajax 进行部分刷新的示例：

索引视图：

    <table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>   
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var order in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => order.Name)
            </td>     
            <td>           
               <button id="Cancle">Cancle</button>
               <input type="hidden" name="Id" value="@order.Id" />     
            </td>
        </tr>
}
    </tbody>
</table>
@section Scripts
{ 
<script>
    $('#Cancle').on('click', function (e) {
    var id = $('input[name=Id ]').val();
    $.ajax({
        url: 'Orders/CancelOrder',
        type: 'post',
        data: { "id": id } ,
        dataType: 'json',
        success: function (data) {
            console.log(data)
        }
    })
});
</script>
}

控制器：

 public async Task<IActionResult> Index()
    {
        return View(await _context.Orders.ToListAsync());
    }
    [HttpPost]
    public IActionResult CancelOrder(int id)
    {
        var order = _context.Orders.Find(id);
        order.IsCancle = true;
        _context.Update(order);
        _context.SaveChanges();

        return Json(id);
    }

结果：

【讨论】：