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

Question

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

这是模型：

    button, 
    input, 
    select, 
    textarea {
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            color: inherit;
        }

这是我的房间表的子表。以下是我的观点，假设用户选中第一个复选框，然后单击“保存”按钮，然后我想将public class RoomHk { public int RoomHkId { get; set; } public int RoomId { get; set; } public DateTime? DeepCleaning { get; set; } public DateTime? NewLinen { get; set; } } 表的NewLinen列中的当前日期时间保存到相应的RoomHk。我该如何使用jQuery post方法呢？

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>

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

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

POST设置复选框的选中状态

使用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>