Asp.net mvc 单击复选框上的自动回发页面

这一定很简单，但我已经研究了几天如何通过单击复选框来更改行值。我想要的是更改一列的值，单击复选框并保持复选框处于选中状态（如果为真）。否则，如果为false，它将保持未选中状态。下面是一个屏幕截图，当一行的公共Post列值为“No”时，复选框将保持未选中状态。当我选中复选框时，反之则表示它将保持选中状态，值将为“是”

我不知道如何准确地做到这一点，我看到了一些处理这种情况的问题或链接：

但我想有一些更先进的想法来实现它，因为它与ASP.NET Web表单完全不同。如果专家们能分享一些想法或有助于理解的链接，我将不胜感激。谢谢

顺便说一下，下面是我正在学习的课程。我不确定如何处理来自控制器的回发，到目前为止，下面是使用Ajax完成的。但它不起作用或不更新：

型号：

public class Product
{
    [Key]
    public int Id { get; set; }
    [Required(ErrorMessage = "Details can't be blank")]
    [DataType(DataType.Text)]
    public string Name{ get; set; }
    public string Date_Posted { get; set; }
    public string Time_Posted { get; set; }
    public string Time_Edited { get; set; }
    public string Date_Edited { get; set; }
    public string Public { get; set; }
    public double Price { get; set; }
    public int User_Id { get; set; }
    public bool Status { get; set; } //This is bit column that I am trying to change and not sure how to handle this from controller
    public List<Product> allLists;
    public IEnumerable<Product> Items;
    public Pager Pager;
}

视图-主页/索引：

@model OurFirstWebApp.Models.Product
@{
    ViewBag.Title = "Index";
    var username = User.Identity.Name;
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script language="javascript">
$(function () {
    $('.toggle').change(function () {
        //alert("Hello");
        var self = $(this);
        var url = self.data('url');
        var id = self.attr('id');
        //var value = self.prop('checked');

        $.ajax({
            url: url,
            data: { id: id },
            type: 'POST',
            success: function (response) {
                alert(response);
                $("#divData").load(window.location + " #divData");
            }
        });
    });
});

@model-OurFirstWebApp.Models.Product
@{
ViewBag.Title=“Index”；
var username=User.Identity.Name；
}
$（函数（）{
$（'.toggle'）.change（函数（）{
//警惕（“你好”）；
var self=$（这是）；
var url=self.data（'url'）；
var id=self.attr（'id'）；
//var值=self.prop（'已检查'）；
$.ajax({
url:url，
数据：{id:id}，
键入：“POST”，
成功：功能（响应）{
警报（响应）；
$（“#divData”）.load（window.location+“#divData”）；
}
});
});
});

身份证件
产品
公布的时间
时间编辑
@如果（@User.Identity.IsAuthenticated）
{
地位
编辑
删除
公职
}
@foreach（Model.Items中的var项）
{
@DisplayFor（modeleItem=>item.Id）
@DisplayFor（modelItem=>item.Name）
@DisplayFor（modelItem=>item.Time\u发布）
@DisplayFor（modelItem=>item.Time\u编辑）
@如果（@User.Identity.IsAuthenticated）
{
@CheckBoxFor（modelItem=>item.Status，new{id=item.id，@class=“toggle”，data\u url=url.Action（“CheckValue”，“Home”）}）
@DisplayFor（modeleItem=>item.Public）
}
}

您的属性

bool Status

和

string Public

令人困惑，在数据库中有两个字段表示相同的内容是个坏主意。你应该有一个单一的财产（比如说）

复选框本身应该足以表示该值，但如果确实需要额外的列，则在视图模型中添加额外的属性（例如）

或者更好，为输出“是”或“否”的项目创建一个

DisplayTemplate

接下来，您无法使用

foreach

循环正确绑定到集合模型（请参阅以了解更多详细信息），您需要使用

for

循环或自定义

EditorTemplate

for type of

Product

for(int i = 0; i < Model.Items.Count; i++)
{
    <tr>
        <td>@Html.DisplayFor(m => m.Items[i].Id)</td> // see notes below
        ....
        <td>@Html.CheckBoxFor(m => m.Items[i].IsPublicPost, new { @class = "post-checkbox", data_id = Model.Items[i].Id })</td>
        // If you really want the extra column
        <td class="post-text">@Html.DisplayFor(m => m.Items[i].PublicPostDisplayText)</td>
    </tr>
}

最后介绍了控制器的设计方法

[HttpPost]
public JsonResult UpdatePublicPostStatus(int id, bool isPublicPost)
{
    MainDbContext db = new MainDbContext();
    var product = db.Product.Find(id);
    if (product != null) // always check
    {
        product.IsPublicPost = isPublicPost;
        db.Entry(product).State = EntityState.Modified;
        db.SaveChanges();
        return Json(true);
    }
    // If something went wrong, e.g. an exception, then return Json(null);
}

旁注

重复的

id

属性是无效的html（不要在内部添加） 循环（除非它们是唯一的）

使用样式表而不是内联样式，例如

td:n子项（1）{
文本对齐：居中；}

使用

if（ModelState.IsValid）

是毫无意义的（并且将始终返回

true

），因为您没有发布和绑定到 模型

---

在每个复选框上添加一个onclick脚本来执行form.submit？但我必须从controller更改数据库行值。那我该怎么处理呢？把点击的id放到一个隐藏的字段中。或者你可以使用ajax将文章的相关部分提交给一个新的控制器方法，或者……显示你尝试过的代码，包括你的控制器方法和视图。如果使用

EditorTemplate

或

for

循环正确生成视图，则所有这些都将立即处理。您好Stephen Muecke！请不要介意。我可以用视图更新post，但我不确定如何从控制器处理回post。仍在努力这样做。如果可能的话，我们期待一个样品。谢谢你的解决方案。但它并没有更新。我需要包括任何其他特定的脚本才能使其工作吗？我已经做了与您提供的相同的操作。您是否包含了

jquery-{version}.js

？如果浏览器控制台中出现任何错误怎么办。你正在使用控制器方法。您需要提供更多详细信息。没有错误，我已经包含了jQuery文件，版本为-1.10.2。但它不会更新数据库。它是否会影响控制器方法？（我刚刚注意到一个输入错误-应该是

db.Entry（product.State=EntityState.Modified；

再次感谢。我之前注意到了这个错误，并根据我的更改了它。）。

public bool IsPublicPost { get; set; }

public string PublicPostDisplayText
{
    get { return IsPublicPost ? "Yes" : "No"; }
}

for(int i = 0; i < Model.Items.Count; i++)
{
    <tr>
        <td>@Html.DisplayFor(m => m.Items[i].Id)</td> // see notes below
        ....
        <td>@Html.CheckBoxFor(m => m.Items[i].IsPublicPost, new { @class = "post-checkbox", data_id = Model.Items[i].Id })</td>
        // If you really want the extra column
        <td class="post-text">@Html.DisplayFor(m => m.Items[i].PublicPostDisplayText)</td>
    </tr>
}

var url = '@Url.Action("UpdatePublicPostStatus", "Home")';
$('.post-checkbox').click(function() {
    var isChecked = $(this).is(':checked');
    var id = $(this).data('id');
    var row = $(this).closest('tr'); // only if you display the extra column
    $.post(url, { id: id, isPublicPost: isChecked }, function(response) {
        if (response) {
            // no need to do anything, but if you display the extra column
            var displayText = isChecked ? 'Yes' : 'No';
            row.find('.post-text').text(displayText);
        } else {
            // Oops something went wrong - reset the checkbox and display error?
        }
    }).fail(function() {
        // Oops something went wrong - reset the checkbox and display error?
    });
});

[HttpPost]
public JsonResult UpdatePublicPostStatus(int id, bool isPublicPost)
{
    MainDbContext db = new MainDbContext();
    var product = db.Product.Find(id);
    if (product != null) // always check
    {
        product.IsPublicPost = isPublicPost;
        db.Entry(product).State = EntityState.Modified;
        db.SaveChanges();
        return Json(true);
    }
    // If something went wrong, e.g. an exception, then return Json(null);
}