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

时间:2017-11-07 12:13:45

标签: asp.net-mvc checkbox

我总是通过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。在活动状态下,有一个包含更新时间的复选框。

现在,问题是,如果选中复选框,则检查它是否仅包含空值。

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

谢谢。

1 个答案:

答案 0 :(得分: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");

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