在复选框上调用操作方法单击 ASP.NET MVC 而无需页面加载 - C#

在 ASP.NET MVC 中，您可以使用 AJAX 技术在不需要完全刷新页面的情况下执行服务器端操作。本文将向您介绍如何在复选框上调用操作方法单击而无需页面加载。

步骤

1. 创建一个名为 "CheckboxClickWithoutPageLoad" 的 ASP.NET MVC 项目。

2. 在 "Index.cshtml" 视图中添加以下代码。这将创建一个包含复选框的表单。

@using (Html.BeginForm("CheckboxClicked", "Home", FormMethod.Post, new { id = "form" }))
{
    <div>
        <label for="checkbox">点击复选框</label>
        <input type="checkbox" id="checkbox" name="checkbox" />
    </div>
}

3. 添加以下代码以引入 jQuery 库。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

4. 在 "HomeController.cs" 控制器中创建名为 "CheckboxClicked" 的操作方法。此方法将接收复选框的值并返回 JSON 格式的响应。

public ActionResult CheckboxClicked(bool checkbox)
{
    return Json(new { result = checkbox });
}

5. 添加以下代码以将 jQuery 绑定到复选框单击事件。

<script>
    $(document).ready(function () {
        $("#checkbox").click(function () {
            $.ajax({
                url: '/Home/CheckboxClicked',
                data: { checkbox: $(this).is(":checked") },
                type: "POST",
                dataType: "json",
                success: function (data) {
                    console.log(data.result);
                },
                error: function () {
                    console.log("出现错误");
                }
            });
        });
    });
</script>

6. 在浏览器中打开应用程序并单击复选框。请注意，页面不会刷新，而是显示 JSON 格式的响应日志。

结论

通过使用 AJAX 技术，您可以在 ASP.NET MVC 应用程序中使用复选框单击事件而无需重新加载页面。以上步骤演示了如何在复选框上调用操作方法单击而不需要页面加载。