How to pass values of the current model details to controller action in asp.net mvc when checkbox is checked

Question

I have a table that displays a number of data. what I am trying to do is to send back to the controller the details of the row that has been checked. those details are for instance userName how can I do this:

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.UserName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Url)
        </td>
        <td>           
            @Html.CheckBoxFor(modelItem => item.IsApplied,new { id = "MyChk", onchange = "valueChanged()"})
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.NumberOfApplications)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

</table>
<script type="text/javascript">
    function valueChanged() {
        if ($('#Mychk').is(":checked"))      
    }
</script>

Answer 1

You might add a javascript change even for the input checkbox and save the value to the server whenever he value changes. This example uses JQuery $.post() function to send the data, which works well with ASP.NET MVC.

View (cshtml file):

@foreach (var item in Model) {
    <tr>
        <td>
            {{ modelItem.UserName }}
        </td>
        <td>
            {{ modelItem.Url }}
        </td>
        <td>    
            <input id="IsApplied" type="checkbox" value="modelItem.IsApplied" value="@modelItem.IsApplied" />
        </td>
        <td>
            {{ modelItem.NumberOfApplications }}
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}

<script>
    $('#IsApplied').change(function() {
        var isApplied = this.checked;


        $.post("ControllerName/YourAction", { IsApplied : isApplied }, 
            function(data){
                //do whatever with the response
            });            

    });
</script>

ASP.NET MVC Controller file:

public class ControllerNameController: Controller // the name ends with 'Controller'
{
    [HttpPost]
    public ActionResult YourAction(SetIsAppliedModel model)
    {
        // logic to save model.IsApplied
    }
}

public class SetIsAppliedModel
{
    public bool IsApplied { get; set; }
}

Used help:

jQuery checkbox change and click event

How to send data in jquery.post to mvc controller which use ViewModel as parameter?