如何通过Knockout更新Razor集合？点击更新按钮按Id和Description更新表格

看起来你需要实现一个点击Update按钮后，根据输入的Id和Description更新表格指定行的功能，结合你给出的ASP.NET MVC表格代码，我给你一套完整的实现方案：

1. 完善前端页面（添加输入区域和按钮） #

在你的表格上方添加用于输入更新参数的表单控件，以及核心的Update按钮：

<!-- 新增：输入更新参数的区域 -->
<div class="container mt-4">
    <div class="row mb-3">
        <div class="col-md-4">
            <label for="targetId" class="form-label">产品Id</label>
            <input type="number" class="form-control" id="targetId" placeholder="请输入要更新的产品Id">
        </div>
        <div class="col-md-6">
            <label for="newDesc" class="form-label">新描述内容</label>
            <input type="text" class="form-control" id="newDesc" placeholder="请输入更新后的描述">
        </div>
        <div class="col-md-2 d-flex align-items-end">
            <button id="updateBtn" class="btn btn-primary w-100">Update</button>
        </div>
    </div>

    <!-- 你原有的表格代码 -->
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Products)
            {
                <tr>
                    <td>@item.Id</td>
                    <td>@item.Description</td>
                </tr>
            }
        </tbody>
    </table>
</div>

2. 添加前端AJAX逻辑（实现无刷新更新） #

使用jQuery发送AJAX请求到后端，更新成功后直接修改表格对应行的内容（如果不想用jQuery，也可以用原生Fetch API替代）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function() {
    $('#updateBtn').click(function() {
        // 获取用户输入的值
        const productId = $('#targetId').val().trim();
        const newDescription = $('#newDesc').val().trim();

        // 基础校验：确保输入有效
        if (!productId || isNaN(productId) || !newDescription) {
            alert('请输入有效的产品Id和描述内容！');
            return;
        }

        // 发送POST请求到后端接口
        $.ajax({
            url: '@Url.Action("UpdateProduct", "Home")', // 替换成你的实际控制器名称
            type: 'POST',
            data: {
                id: productId,
                description: newDescription
            },
            success: function(res) {
                if (res.success) {
                    // 找到表格中对应Id的行，更新描述内容
                    $('tbody tr').each(function() {
                        const rowId = $(this).find('td:first').text();
                        if (rowId === productId) {
                            $(this).find('td:last').text(newDescription);
                            // 清空输入框，提升用户体验
                            $('#targetId').val('');
                            $('#newDesc').val('');
                            alert('更新成功！');
                            return false; // 终止循环，避免不必要的遍历
                        }
                    });
                } else {
                    alert(`更新失败：${res.message}`);
                }
            },
            error: function() {
                alert('网络请求出错，请稍后重试！');
            }
        });
    });
});
</script>

3. 后端控制器实现（处理更新请求） #

在你的MVC控制器中添加一个UpdateProduct的POST方法，负责操作数据库完成产品描述的更新：

using Microsoft.AspNetCore.Mvc;
using YourNamespace.Data; // 替换成你的DbContext命名空间
using YourNamespace.Models; // 替换成你的Product模型命名空间

public class HomeController : Controller
{
    private readonly AppDbContext _dbContext;

    // 构造函数注入DbContext
    public HomeController(AppDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    [HttpPost]
    public IActionResult UpdateProduct(int id, string description)
    {
        try
        {
            // 根据Id查找目标产品
            var product = _dbContext.Products.FirstOrDefault(p => p.Id == id);
            if (product == null)
            {
                return Json(new { success = false, message = "未找到指定Id的产品" });
            }

            // 更新描述并保存到数据库
            product.Description = description;
            _dbContext.SaveChanges();

            return Json(new { success = true });
        }
        catch (Exception ex)
        {
            // 生产环境建议记录日志，不要直接返回异常信息给前端
            return Json(new { success = false, message = ex.Message });
        }
    }

    // 你的其他控制器方法（比如返回表格页面的Action）
    public IActionResult Products()
    {
        var products = _dbContext.Products.ToList();
        return View(products);
    }
}

关键注意事项 #

• 替换代码中的Home控制器名称、AppDbContext、Product模型命名空间为你项目中的实际名称
• 生产环境中必须添加防CSRF保护：在前端AJAX请求中加入headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() }，并在后端方法上添加[ValidateAntiForgeryToken]特性
• 可以进一步优化前端校验，比如添加输入长度限制、实时格式提示等
• 如果需要全量刷新表格（而非单独更新一行），可以在AJAX成功后重新加载表格的HTML内容

内容的提问来源于stack exchange，提问作者Muflix