0

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>
moe
  • 25
  • 8

1 Answers1

0

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?

Martin Staufcik
  • 8,295
  • 4
  • 44
  • 63
  • But how can I send the value of the checked box – moe Apr 04 '20 at 18:57
  • so for example if the check box has been checked I need to send back the details of that row – moe Apr 04 '20 at 18:58
  • The checkbox for `IsApplied`, added to the form with `CheckBoxFor` method, is an input field and will be sent in form data to the server. – Martin Staufcik Apr 04 '20 at 19:01
  • Maybe you wanted to disable the checkbox on this screen so it only displays the value, since there is a action link to the actual `Edit` form? – Martin Staufcik Apr 04 '20 at 19:02
  • but how to specify which controller and action name that those data will be sent to – moe Apr 04 '20 at 19:06
  • Now I maybe udderstand, this cshtml view prints a list of items, it does not send data back. You will need to create another view `Edit` for editing the item. – Martin Staufcik Apr 04 '20 at 19:10
  • I would like to send the data once the checkbox is checked without the need for the edit – moe Apr 04 '20 at 19:34
  • modified the answer, now the changed IsApplied value is sent to the server with an AJAX call. – Martin Staufcik Apr 05 '20 at 06:06