如何在 ASP.NET MVC 中使用复选框？

Question

我有一个视图，里面有两个复选框。选中后，我需要将当前分配的值保存到数据库表中。

这是模型：

public class RoomHk
{
  public int RoomHkId { get; set; }
  public int RoomId { get; set; }
  public DateTime? DeepCleaning { get; set; }
  public DateTime? NewLinen { get; set; }
}

这是我的 Room 表的子表。以下是我的观点，假设用户选中第一个复选框，然后单击保存按钮，然后我想将RoomHk 表的NewLinen 列中的当前日期时间保存到相应的RoomId。如何使用 jQuery post 方法做到这一点？

<div class="col-6">
  @if (item.NewLinen == null)
  {
    <input type="checkbox" data-nlid="@item.RoomId" class="form-check-input newLinen" />
    <label>New Linen</label>
    <br />
  }

  @if (item.DeepCleaning == null)
  {
    <input type="checkbox" data-dcid="@item.RoomId" class="form-check-input deepClean" />
    <label>Deep Cleaning</label>
  }
</div>

<button type="button" class="btn btn-default insert" data-rid="@item.RoomId">Save</button>

$(function () {
  $('.insert').click(function () {
    $.post("@Url.Action("SetCleaningStatus", "HouseKeeping")", { id: $(this).data("id"), });
  });
});

Answer 1

您可以使用Html.BeginForm 并将提交按钮放在表单中。这很重要，否则您需要使用其他脚本才能使其正常工作。

如果您需要发布两个复选框（DeepCleaning 和 NewLinen）的状态，我建议将它们设置为 Boolean 而不是 DateTime，这样您就可以映射它们的状态（选中/未选中）到各自的属性，因为你似乎想这样做。

SetCleaningStatus.cshtml

@model RoomHk;

@Html.BeginForm("SetCleaningStatus", "HouseKeeping") 
{
  <!-- Will be posted to the controller, no additional Javascript necessary -->
  @Html.HiddenFor(m => m.RoomId)

  <div class="col-6">
    @if (item.NewLinen == null)
    {
        <input type="checkbox" data-nlid="@item.RoomId" class="form-check-input newLinen" />
        <label>New Linen</label>
        <br />
    }

    @if (item.DeepCleaning == null)
    {
        <input type="checkbox" data-dcid="@item.RoomId" class="form-check-input deepClean" />
        <label>Deep Cleaning</label>
    }
  </div>


  <!-- IMPORTANT: the type needs to be `submit` instead of `button` -->
  <input type="submit" class="btn btn-default insert" value="Save" />
}

HouseKeeping.cs

public class RoomHk
{
    public int RoomHkId { get; set; }
    public int RoomId { get; set; }
    public DateTime? DeepCleaning { get; set; }
    public DateTime? NewLinen { get; set; }
}

[HttpGet]
public ActionResult SetCleaningStatus() 
{
    var model = new RoomHk();

    return View(model);
}

[HttpPost]
public ActionResult SetCleaningStatus(RoomHk arg) 
{
    bool response = new {
        success = true
    };

    // Here is your RoomId
    arg.RoomId;

    arg.NewLinen = DateTime.Now;

    // Save posted data to DB
    // ...

    // Return your response here
    return Json(response);
}

POSTting 复选框的选中状态

使用 Html.CheckBoxFor 和 Html.LabelFor 并让编译器为您呈现这些字段，并正确设置正确的 ID 和名称。

public class RoomHk
{
    // Make them booleans
    public bool DeepCleaning { get; set; }
    public bool NewLinen { get; set; }
}

<div class="col-6">
  <!--
  <input type="checkbox" data-nlid="@item.RoomId" class="form-check-input newLinen" />
  <label>New Linen</label>
  <br />
  -->

  @Html.LabelFor(m => m.NewLinen, "New Linen")
  @Html.CheckBoxFor(m => m.NewLinen, new { @class = "form-check-input" })
</div>