c# - 如何根据 MVC 中的复选框更改更新数据库

Question

当选中或取消选中复选框时，我正在尝试更新我的数据库。我希望它在单击复选框时更新。这是我到目前为止所拥有的，但我的 Controller 从未被击中。我能做什么来修复它？理想情况下，我想将 customer.IsDone 和 customer.Id 的新值传递给我的 Controller ，但我不知道如何执行此操作。

我的 View 中的复选框

    <td>@Html.CheckBoxFor(m => customer.IsDone, new { onclick = "UpdateCustomer(IsDone)" })</td>

我眼中的功能

function UpdateCustomer(isDone) {
        $.ajax({
            type: 'POST',
            url: @Url.Action("UpdateCustomer", "Home"),
            data: { check: isDone },
            success: success,
            dataType: 'json'
        });
    }

这是我的 Controller 方法

    [HttpPost]
    public ActionResult UpdateCustomer(bool check)
    {
        //code will be here to update the db

        var customers = new CustomerGetAll();
        var list = customers.Execute();

        return View("Customers", list);
    }

Answer 1

我在您的代码中发现了一些问题。

首先，您在调用 UpdateCustomer 方法时传递 IsDone 变量。但是 isDone 是在哪里定义的呢？

第二，这一行，

url: @Url.Action("UpdateCustomer", "Home"),

Url.Action 帮助器将输出一个字符串，在浏览器中呈现时您的代码将如下所示

 url: /Home/UpdateCustomer,

现在浏览器的javascript框架通常认为:之后的第二部分是一个js变量，如果你没有定义它，它会抛出一个关于使用 undefined variable 的语法错误!但由于我们有 \，您将收到另一个“无效的正则表达式标志”语法错误!

您应该将结果用引号括起来以避免此问题。

下面的代码应该可以工作

@Html.CheckBoxFor(m =>customer.IsDone, new { onclick = "UpdateCustomer(this)" })

和脚本

function UpdateCustomer(elem) {
    var isDone = $(elem).is(':checked');
    $.ajax({
        type: 'POST',
        url: "@Url.Action("UpdateCustomer", "Home")",
        data: { check: isDone },
        success: function(res) {
            console.log(res);
        },
        dataType: 'json'
    });
}

此外，如果您想更新特定的客户记录，您可能还想在进行 ajax 调用时传递客户 ID。您可以将其保留在复选框标记上的 html 5 数据属性中，并根据需要阅读并使用它。

@Html.CheckBoxFor(m =>customer.IsDone, new { onclick = "UpdateCustomer(this)",
                                                       data_customerid = customer.Id })

这将呈现带有“data-customerid”的 html5 数据属性的复选框。您现在要做的就是读取该值并通过 ajax 发送

function UpdateCustomer(elem) {
    var isDone = $(elem).is(':checked');
    var cid = $(elem).data('customerid');
    $.ajax({
        type: 'POST',
        url: '@Url.Action("UpdateCustomer", "Home")',
        data: { check: isDone,customerId:cid },
        success: function(res) {
            console.log(res);
        }
    });
}

确保您的服务器操作方法有一个新参数来接受我们从客户端代码发送的客户 ID

[HttpPost]
public ActionResult UpdateCustomer(bool check,int customerId)
{
   // to do  : Save and return something
}