Question

这一定很容易，但我一直在探索如何更改单击CheckBox的行值。我想要的是更改一个列的值，点击CheckBox并保持CheckBox检查是否为真。否则，如果为false，它将保持未选中状态。下面是一个屏幕截图，当一行的Public Post列值为“否”时，CheckBox将保持未选中状态。当我检查CheckBox时，反之亦然意味着它将保持检查状态，值将为“是”。

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

ASP.NET MVC submitting form on checkbox click

How can I get CheckBox to maintain checked state across postback in ASP.NET MVC?

但我希望有一些更高级的想法来实现它，因为它与ASP.NET Web Form完全不同。如果专家分享一些想法或有用的链接，我将不胜感激。感谢。

顺便说一句，以下是我正在使用的课程。我不知道如何处理来自控制器的回发，到目前为止，使用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;
}

Controller - HomeController.cs：

    [HttpPost]
    public ActionResult CheckValue(int id)
    {
        MainDbContext db = new MainDbContext();
        List result = db.Product.Find(id);

        if (ModelState.IsValid)
        {
            result.Public = "Yes";
            result.Status = true;

            db.Entry(result).State = EntityState.Modified;
            db.SaveChanges();
        }

        return View(db.Lists.ToList());
    }

查看 - 主页/索引：

@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");
            }
        });
    });
});

<div id="divData">
<table class="table table-bordered table-condensed" id="data">
    <thead>
        <tr>
            <th style="text-align:center;">ID</th>
            <th style="text-align:center;">Products</th>
            <th style="text-align:center;">Time Posted</th>
            <th style="text-align:center;">Time Edited</th>
            @if (@User.Identity.IsAuthenticated)
            {
                <th style="text-align:center;">Status</th>
                <th style="text-align:center;">Edit</th>
                <th style="text-align:center;">Delete</th>
                <th style="text-align:center;">Public Post</th>
            }
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Items)
        {
            <tr>
                <td id="ID" style="text-align: center;">@Html.DisplayFor(modelItem => item.Id)</td>
                <td style="text-align: center;">@Html.DisplayFor(modelItem => item.Name)</td>
                <td style="text-align: center;">@Html.DisplayFor(modelItem => item.Time_Posted)</td>
                <td style="text-align: center;">@Html.DisplayFor(modelItem => item.Time_Edited)</td>

                @if (@User.Identity.IsAuthenticated)
                {
                    <td style="text-align: center;">@Html.CheckBoxFor(modelItem => item.Status, new { id = item.Id, @class = "toggle", data_url = Url.Action("CheckValue", "Home") })</td>
                    <td style="text-align: center;"><a href="@Url.Action("Edit", "Auth")/@Html.DisplayFor(modelItem => item.Id)">Edit</a></td>
                    <td style="text-align: center;"><a href="@Url.Action("Delete", "Auth")/@Html.DisplayFor(modelItem => item.Id)">Delete</a></td>
                    <td id="chngData" style="text-align: center;">@Html.DisplayFor(modelItem => item.Public)</td>

                }
            </tr>
        }
   </tbody>
</table>

Answer 1

您的属性bool Status和string Public令人困惑，数据库中有2个代表相同内容的字段是个坏主意。你应该有一个属性（比方说）

public bool IsPublicPost { get; set; }

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

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

或更好，为输出＆＃34;是＆＃34;的原则创建DisplayTemplate。或＆＃34;否＆＃34;。

接下来，您无法使用foreach循环正确绑定到集合模型（有关详细信息，请参阅HTML Table to ADO.NET DataTable），您需要使用for循环或自定义{{1} } for typeof EditorTemplate

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

最后是控制器方法

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); }属性是无效的html（不要在里面添加循环，除非它们是唯一的）
使用样式表而不是内联样式，例如id
使用td:nth-child(1) { text-align:center; }毫无意义（并将永远返回 if (ModelState.IsValid)）在你的情况下，因为你没有张贴和绑定到模型。

CheckBox Onclick上的自动发布后页

1 个答案: