checkbox value always showing null value in mvc

Question

I am always getting null value through checkbox in mvc. If the checkbox is checked or uncheck it contain null value only.

Here is my code,

View Page

@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>

Controller

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

Now, in table there is a three field EventID, Event and Active. In active there is a checkbox containing at update time.

Now, the issue is coming that if the checkbox is check or not check it is containing null value only.

So thats why at the fetch time it showing uncheck only.

Thank You.

Answer 1

Asking for the .val of a checkbox will get you the contents (if any) of the value attribute on the input element - this will not change when the user checks the box.

To check if a checkbox is checked in jQuery you should use something like:

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

At the moment, you're storing the current value of .IsActive in the span and the value of the checkbox, and then when the update method runs, just grabbing that same value and putting it into the span - resulting in not updating anything.

Looking further at your code though - you should confirm what your method is actually posting back to the server - looking at it you are passing raw HTML into some parameters on the object:

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

At best, event.IsActive will be the string "True" (or False), rather than an actual boolean that your model is expecting. You would be better off changing that line to something like:

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

And then confirm what is being sent to the server in the network tab of your browser.