Question

我已经设法使用Ajax在ASP.NET MVC项目中使用CheckBox更改产品的状态。下面是我尝试过的代码，它起作用了：

型号：

public class List
{
   [Key]
   public int Id { get; set; }

   [Required(ErrorMessage = "Details can't be blank")]
   [DataType(DataType.Text)]

   public string Details { 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 int User_Id { get; set; }
   public bool Status { get; set; }

   [Display(Name = "Is Public")]
   public string PublicPostDisplayText
   {
      get { return Status ? "Yes" : "No"; }
   }
}

控制器：

[HttpPost]
public JsonResult UpdatePublicPostStatus(int id, bool isPublicPost)
{
    MainDbContext db = new MainDbContext();

    var result = db.Lists.Find(id);
    if (result != null)
    {
       result.Status = isPublicPost;

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

   return Json(true);
}

查看：

<tbody>
@for (int i = 0; i < Model.Items.Count; i++)
{
  <tr>
    <td id="ID" style="text-align: center;" class="hide">@Html.DisplayFor(modelItem => Model.Items[i].Id)</td>
    <td style="text-align: center;">@Html.DisplayFor(modelItem => Model.Items[i].Details)</td>
    <td style="text-align: center;">@Html.DisplayFor(modelItem => Model.Items[i].Time_Posted)</td>
    <td style="text-align: center;">@Html.DisplayFor(modelItem => Model.Items[i].Time_Edited)</td>

    @if (@User.Identity.IsAuthenticated)
    {
      <td style="text-align: center;"><div id="demo"></div> @Html.CheckBoxFor(modelItem => Model.Items[i].Status, new { @class = "post-checkbox", data_id = Model.Items[i].Id })</td>
      <td style="text-align: center;"><a href="@Url.Action("Edit", "Auth")/@Html.DisplayFor(modelItem => Model.Items[i].Id)">Edit</a></td>
      <td style="text-align: center;"><a href="@Url.Action("Delete", "Auth")/@Html.DisplayFor(modelItem => Model.Items[i].Id)">Delete</a></td>
      <td class="post-text">@Model.Items[i].PublicPostDisplayText</td>
    }
  </tr>
}
</tbody>

<script type="text/javascript">
    var url = '@Url.Action("UpdatePublicPostStatus")';
    $('.post-checkbox').click(function () {
        var isChecked = $(this).is(':checked');
        var id = $(this).data('id');
        var row = $(this).closest('tr');
        $.post(url, { id: id, isPublicPost: isChecked }, function (response) {
            if (response) {
                var displayText = isChecked ? 'Yes' : 'No';
                row.find('.post-text').text(displayText);
            } else {

            }
        }).fail(function () {
        });
    });
</script>

现在看来如下：

我试图将CheckBoxes更改为开关按钮。我试图使用jQuery切换插件替换CSS类或id。但似乎我需要做别的事情。不知道怎么做。单击按钮时，数据库中的值会更改，但无法在前端显示切换。

注意：我只需要使用CheckBoxes将产品的状态从yes更改为no或no更改为yes，并将CheckBoxes转换为On-Off按钮，类似于下图：

同样，我尝试使用基于jQuery的切换，使用如下的插件，但没有得到它的工作：

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="Content/jquery.btnswitch.min.js"></script>
<link href="Content/jquery.btnswitch.min.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () {
        $('.post-checkbox').btnSwitch({
            //iOS like button
            Theme: 'iOS',

            //On/off text
            OnText: "On",
            OffText: "Off",

            //Values of on/off buttons
            OnValue: true,
            OffValue: false
        });
    })
</script>

Answer 1

@Html.CheckBoxFor生成<input type="checkbox">。你不能在那上面调用btnSwitch函数。而只需使用<div>或<span>。

使用Ajax将CheckBoxes转换为On-Off Button

1 个答案: