通过选中/取消选中复选框来请求服务器

Question

我正在尝试编写一个包含两个复选框的网页，并在每次检查/取消选中时向我的网络服务器发送请求。我必须在服务器端检查哪些复选框已经过检查，哪些不能进行某些特定的操作。

表格（代码片段）：

<form method="get" action="@Url.Action("Index")" data-monitoring-ajax="true" data-monitoring-target="#ListeAlertes">
    <input type="checkbox" name="affiche" value="fixees" id="fixees" style="margin-left:40px;margin-right:3px;" checked /> Alertes fixées
    <input type="checkbox" name="affiche" value="nonFixees" id="nonFixees" style="margin-left:10px;margin-right:3px;" checked /> Alertes non-fixées
</form>

monitoring.js

$(function () {

    var ajaxFormSubmit = function () {
        var $form = $(this);

        var options = {
            url: $form.attr("action"),
            type: $form.attr("method"),
            data: $form.serialize()
        };

        $.ajax(options).done(function (data) {
            var $target = $($form.attr("data-monitoring-target"));
            $target.replaceWith(data);
        });
        return false;
    }

    $("form[data-monitoring-ajax='true']").submit(ajaxFormSubmit);

});

注意：我已将monitoring.js纳入网页。

有什么好主意吗？

Answer 1

由于选项似乎只是在不同的状态下表示相同的项目，因此您实际上只需要一个复选框。

Html

<input type="checkbox" id="enableAlerts" style="margin-left:40px;margin-right:3px;" /> Alertes fixées

---

javascript（jQuery）

有了这个，您可以订阅change事件以了解何时将请求发送到服务器。

$("#enableAlerts").change(function(){
    $.post("/Controller/UpdateAlerts",
           { enableAlerts: this.checked },
            function(data){ console.log("Successfully saved user options!"); });
});

在上面的脚本中，我们监听要触发的更改事件，当它发生时，我们将数据发布到服务器，以便它可以处理它。如果服务器返回200状态代码，它将向控制台写入成功的状态。由于只发送了一个复选框，因此没有任何理由将复选框包装在表单中并序列化表单以发送到服务器。

---

服务器代码

现在您只需要一个控制器/动作来调用服务器上的更新选项。

[HttpPost]
public HttpStatusCodeResult UpdateAlerts(bool enableAlerts)
{
    //Save to database

    return new HttpStatusCodeResult(HttpStatusCode.OK);
}

上面的代码允许javascript代码将数据发布到服务器。在这种情况下，我允许值为可空，如果是，则默认为false。之后，执行您需要的操作并返回响应代码，以便客户端代码可以通知用户其请求的状态。

---

回应用户的评论

在这种情况下，将其包装在表单中是正确的。大多数步骤都是类似的，只有很小的修改。

HTML

<form method="post" id="filterOptions">
    <input type="checkbox" name="Checkbox1" value="true" /> 
    <input type="checkbox" name="Checkbox2" value="true" /> 
</form>

---

的Javascript

$("#filterOptions input[type='checkbox']").change(function () {
        var form = $("#filterOptions").serialize();
        $.post("/Controller/AjaxFilteredList", 
               form,
               function (data) { console.log("Retrieved data successfully!") });
});

---

模型

public class MyModel
{
    public bool Checkbox1 { get; set; }
    public bool Checkbox2 { get; set; }
}

模型的属性名称必须与属性名称匹配，不区分大小写。如果您将其设为ViewModel并将其传递到相应View并使用Html.CheckboxFor(m => m.Checkbox1)呈现复选框，则会更加轻松。

---

控制器操作

[HttpPost]
public ActionResult AjaxFilteredList(MyModel model)
{
    //check you viewmodel's variables to get your list

    return PartialView("_FilteredList", filteredList);
}

以上假设您有一个名为“_FilteredList”的部分视图和一个名为“filteredList”的变量，其中包含您要渲染的结果。

Answer 2

使用.change()

$("form[data-monitoring-ajax='true'] input[type='checkbox']").change(function(){
     //make your Ajax Call here and send name of the checkbox or id of the checkobox
});

<小时/> Attribute Equals Selector [name="value"]