复选框值始终在 mvc 中显示空值

Question

我总是通过 mvc 中的复选框获取空值。如果复选框被选中或取消选中，它只包含空值。

这是我的代码，

查看页面

@model IEnumerable<SchoolWebApplication.Models.EventMaster>
<table id="tblEvent" class="table" cellpadding="0" cellspacing="0">
    <tr>
        <th style="width:100px; display:none">Event Id</th>
        <th style="width:150px">Event</th>
        <th style="width:150px">Active</th>
    </tr>

    @if(Model != null)
    {
        foreach (SchoolWebApplication.Models.EventMaster eventMaster in Model)
        {
            <tr>
                <td class="EventID" style="display:none">
                    <span>@eventMaster.EventID</span>
                </td>
                <td class="Event">
                    <span style="color:darkgreen">@eventMaster.Event</span>
                    <input type="text" value="@eventMaster.Event" style="display:none; color:darkgreen" />
                </td>
                <td class="IsActive">
                    <span style="color:darkgreen">@eventMaster.IsActive</span>
                    @if (@eventMaster.IsActive == true)
                    {
                        <input type="checkbox" value="@eventMaster.IsActive" style="display:none; color:darkgreen" checked="checked" name="abc"/>
                    }
                    else
                    {
                        <input type="checkbox" value="@eventMaster.IsActive" style="display:none; color:darkgreen" name="abc"/>
                    }
                </td>

                <td>
                    <a class="Edit" href="javascript:;">Edit</a>
                    <a class="Update" href="javascript:;" style="display:none">Update</a>
                    <a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
                </td>
            </tr>
        }
    }
</table>
<script type="text/javascript"> 
    function AppendRow(row, EventID, Event, IsActive) {
        //Bind EventID.
        $(".EventID", row).find("span").html(EventID);

        //Bind Event.
        $(".Event", row).find("span").html(Event);
        $(".Event", row).find("input").val(Event);

        //Bind IsActive.
        $(".IsActive", row).find("span").html(IsActive);
        $(".IsActive", row).find("input").val(IsActive);

        $("#tblEvent").append(row);
    };

    //Edit event handler.
    $("body").on("click", "#tblEvent .Edit", function () {
        var row = $(this).closest("tr");
        $("td", row).each(function () {
            if ($(this).find("input").length >= 0) {
                $(this).find("input").show();
                $(this).find("span").hide();
            }
        });
        row.find(".Update").show();
        row.find(".Cancel").show();
        $(this).hide();
    });

    //Update event handler.
    $("body").on("click", "#tblEvent .Update", function () {
        var row = $(this).closest("tr");
        $("td", row).each(function () {
            if ($(this).find("input").length >= 0) {
                var span = $(this).find("span");
                var input = $(this).find("input");
                span.html(input.val());
                span.show();
                input.hide();
            }
        });
        row.find(".Edit").show();
        row.find(".Cancel").hide();
        $(this).hide();

        var event = {};
        event.EventID = row.find(".EventID").find("span").html();
        event.Event = row.find(".Event").find("span").html();
        event.IsActive = row.find(".IsActive").find("span").html();

        $.ajax({
            type: "POST",
            url: "/Event/Update",
            data: JSON.stringify({ eventMaster: event }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                alert(response.IsActive);
        }
        });
    });
</script>

控制器

try
{
    EventMaster updatedEvent = (from c in entities.eventMaster
                              where c.EventID == eventMaster.EventID
                              select c).FirstOrDefault();
    updatedEvent.Event = eventMaster.Event;
    updatedEvent.IsActive = eventMaster.IsActive;
    entities.SaveChanges();

    return new EmptyResult();
}
catch (Exception ex)
{
    return View();
}

现在，表格中有一个三个字段 EventID、Event 和 Active。在活动中，有一个包含在更新时间的复选框。

现在，问题来了，如果复选框被选中或不选中，它只包含空值。

这就是为什么在获取时它只显示取消选中。

谢谢。

Answer 1

询问复选框的.val 将为您获取输入元素上value 属性的内容（如果有） - 当用户选中该框时，这不会改变。

要检查一个复选框是否在 jQuery 中被选中，你应该使用类似的东西：

if (input.is(":checked")){}

目前，您将.IsActive 的当前值存储在跨度和复选框的值中，然后当更新方法运行时，只需获取相同的值并将其放入跨度 - 导致没有更新任何东西。

不过，进一步查看您的代码 - 您应该确认您的方法实际回传到服务器的内容 - 查看它您将原始 HTML 传递到对象的某些参数中：

event.IsActive = row.find(".IsActive").find("span").html();

充其量，event.IsActive 将是字符串 "True"（或 False），而不是您的模型所期望的实际布尔值。您最好将该行更改为：

event.IsActive = row.find(".IsActive").find("input").is(":checked");

然后在浏览器的网络选项卡中确认发送到服务器的内容。