Post Form Data from Within a Loop

Question

I would like to submit form data when clicking a check box within a list. Currently I am using the onclick event which does not work because it sends a get request and I need it to send a post request.

How can I post the two parameters to my controller method from within the loop.

EDIT From the comments below I need to use AJAX as I was intending to remain on the same page. I incorrectly thought a post request would do that. If someone is willing to point me in the right direction with AJAX that would be appreciated.

Here is the code:

@for (var i = 0; i < Model.Count(); i++)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => modelItem[i].InvoiceID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem[i].Description)                     
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem[i].InvoiceDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => modelItem[i].DueDate)
                </td>
                <td>                        
                    <input asp-for="@Model[i].Paid" onclick="location.href='@Url.Action("UpdatePaidStatus", "Billing", new { invoiceID = Model[i].InvoiceID, paid = Model[i].Paid })'" />                       
                </td>                   
            </tr>
        }

Use a `form` with a submit button (and add `invoiceID` and `paid` as route parameters or hidden inputs) — , Jan 18 '16 at 10:07
Url.Action just redirects, which is a get by definition. Use either javascript to send the post request or use some sort of form construction that uses Form.FormActionMethod = FormActionMethod.Post — Glubus, Jan 18 '16 at 10:08
@Stephen - But if I use a form, how do I tell it which list item to use? Wouldnt the form just use the parameters from the first list item? — Reafidy, Jan 18 '16 at 10:09
you should use of ajax call to fulfil your task, it will be the best way. — Govinda Rajbhar, Jan 18 '16 at 10:10
`@using (Html.BeginForm("UpdatePaidStatus", "Billing" new { invoiceID = Model[i].InvoiceID, paid = Model[i].Paid }, FormMethod.Post){ — , Jan 18 '16 at 10:13
@GovindaRajbhar, sorry I don't understand ajax, but I will look into it. — Reafidy, Jan 18 '16 at 10:13
@Reafidy, ajax stays on the same page, so if your redirecting in the POST method, then its pointless. If however you want to stay on the same page and keep submitting value then its the way to go. — , Jan 18 '16 at 10:15
@Stephen, Yeah I need to stay on the same page, that's why the GET wasn't working for me. I thought a post request with a void method in the controller would allow me to stay on the same page, am I wrong? — Reafidy, Jan 18 '16 at 10:20
Yes [ you are wrong :) ] - you need to use ajax if you want to stay on the same page. — , Jan 18 '16 at 10:21
@Reafidy, You need to show you controller method your posting to so we can understand what your wanting to do (in particular the signature, and what you want to return back to the view). You also noted that you handling the click event of a checkbox which suggest you also want to also post a value indicating if its checked or unchecked. — , Jan 18 '16 at 10:32
@Stephen - I just want to update the database to reflect the change in checkbox value thats all. Without a page change/refresh. I dont need anything returned to the view unless it fails then i would show an error. So I only need post the id of the row and the checkbox value: true or false. I havnt written the controller method yet. But i will start it now. — Reafidy, Jan 18 '16 at 10:39

score 1 · Answer 1 · edited May 23 '17 at 11:59

1

You can either create your own handler using jQuery to collect all the data from the form and then manually do a post to your controller or use Ajax.BeginForm. Some relevant answers have already been posted here and here.

edited May 23 '17 at 11:59

Community

1
1

answered Jan 18 '16 at 10:46

drcolombo

166
6

score 1 · Accepted Answer · answered Jan 18 '16 at 11:06

Based on your comments, you want to post the invoiceID of the model in the row along with a value indicating the state of the checkbox. Change you html to

<input type="checkbox" class="status" value="@Model[i].InvoiceID />

and add the following script

var url = "@Url.Action("UpdatePaidStatus", "Billing");
$('.status').click(function() {
  var id = $(this).val();
  var isPaid = $(this).is(':checked');
  $.post(url, { id: id, isPaid : isPaid }, function(data) {
    if (data) {
      // do something based on the data you return
    } else {
      // oops
    }
  }).fail(function() {
     // oops
  });
});

which would post to the following method

[HttpPost]
public JsonResult UpdatePaidStatus(int ID, bool isPaid)
{
  // save something
  return Json(true); // or return Json(null) is it fails?
}

You have not indicated what you might what to happen when the ajax call succeeds or fails, but for example you might update the DOM to display a message indicating success or otherwise.

Side note: ajax may not really be necessary here. If you included a hidden input for Model[i].InvoiceID in each row and do a normal form submit to

public ActionResult UpdatePaidStatus(IList<yourmodel> model)

then your model will be correctly bound with the InvoiceID and Paid properties so you can update all items in the collection in one action.

Post Form Data from Within a Loop

2 Answers2