时间戳

首页 > 解决方案 > 如何在 ASP.NET MVC 中使用复选框？

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

问题描述

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

这是模型：

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到相应的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"), });
  });
});

标签： javascriptc#jqueryasp.net-mvccheckbox

解决方案

您可以使用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" />
}

管家.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.CheckBoxForandHtml.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>

推荐阅读