Auto Post Back Page On CheckBox Onclick

Question

This must be the easy one but I've been exploring for some days about how to change a row value clicking on a CheckBox. What I want is to change the value of a column clicking on the CheckBox and keep the CheckBox checked if it is true. Otherwise it will remain unchecked if false. Below is a screenshot and when Public Post column value of a row is 'No', then the CheckBox will remain unchecked. And when I check the CheckBox, then vice-verse means it will remain checked and value will be 'Yes'.

I am not sure how to do it exactly and seen some of the problems or links that deals with this situation:

ASP.NET MVC submitting form on checkbox click

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

But I would like to have some more advanced ideas to implement it as it is totally different from ASP.NET Web Form. I would appreciate if experts share some ideas or helpful links to understand. Thanks.

By the way, following is the class that I am working with. I am not sure how to handle the postback from controller and so far following is done using Ajax. But it is not working or updating:

Model:

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

View - Home/Index:

@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

Your properties bool Status and string Public are confusing and having 2 fields in the database representing the same thing is bad idea. You should have a single property (say)

public bool IsPublicPost { get; set; }

The checkbox alone should be sufficient to represent the value, but if you did want the extra column, then in the view model add an additional property (say)

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

or better, create a DisplayTemplate for the proeprty that outputs "Yes" or "No".

Next, you cannot correctly bind to a collection model using a foreach loop (refer HTML Table to ADO.NET DataTable for more details) and you need to use a for loop or custom EditorTemplate for typeof 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>
}

Then the script to update the database will be

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

and finally the controller method

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

Side notes.

1. Duplicate id attributes are invalid html (do not add then inside loops unless they are unique)
2. Use style sheets rather that inline styles, e.g. td:nth-child(1) { text-align:center; }
3. Using if (ModelState.IsValid) is pointless (and will always return true) in your case because your not posting and binding to a model.