Question

我正在尝试在选中或取消选中复选框时更新我的数据库。我希望它在单击复选框时更新。这是我到目前为止，但我的控制器永远不会受到打击。我该怎么办才能解决这个问题？理想情况下，我想传递customer.IsDone和customer.Id的新价值给我的控制器，但我不知道如何做到这一点。

我视图中的复选框

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

这是我的控制器方法

    [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

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

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

第二，这一行，

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

Url.Action帮助器将输出一个字符串，当您在浏览器中呈现时，您的代码将是这样的

 url: /Home/UpdateCustomer,

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

您应该将结果包装在引号中以避免此问题。

以下代码应该有效

@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
}

Answer 2

我有类似的东西，我认为你可以解决你的问题...

我的HTML

<td>
   @{
      bool avalia1 = false;
      @Html.CheckBox("avalia1", avalia1, new { autocomplete = "off", data_on_text = "Sim", data_off_text = "Não" })
     }
</td>

JS

var avalia1 = $("#avalia1").is(":checked");

 var url = "/Telefonia/GravarAvaliacao";

$.ajax({

   url: url,
   datatype: "json",
   data: { 'avalia1': avalia1,'idgravacao': idgravacao },
   type: "POST",
   success: function (data) {
     }
 });
}

ON CONTROLLER

public JsonResult GravarAvaliacao(bool avalia1, string idgravacao)
    {
      string _userId = User.Identity.GetUserId();
      var avaliaData = new OperadorAvaliacaoData();
      avaliaData.GravaAvaliacao(avalia1, idgravacao);

      return Json(true, JsonRequestBehavior.AllowGet);
    }

唯一的区别是你的模型复选框和动作触发器。

如何在MVC中的复选框更改时更新数据库

2 个答案: