1

I have a view that has an html form. This form posts data to two entities.The first entity is in a one-to-many relationship with the other.

This form has an html table where the user can add as many rows as needed. Then on submitting the form, data of form will be posted to entity1 and data inserted in the html table should be collected and added to entity2, that has a many-to-one relationship with entity1.

I collected data inserted by user in html table as a js array of objects and tried to send this as ajax to post action in the controller on form submission.

I had an error:

[The required anti-forgery form field "__RequestVerificationToken" is not present]

So I passed token in header and added authorization filter to post action data sent from ajax is not null, but it is received in controller as null.

How can I solve this?

enter image description here

    cols.push("DIGITAL_FILE_TYPE_ID");
                    cols.push("DOCUMENT_LAPI_ID");

                    var digitalMapRows = [];
                    $("table#digital-map-table tbody tr").each(function () {
                        data = {};

                        var selectedDigitalMapVal = 
  $(this).data("selectedDigitalMapVal");
                        data[cols[0]] = selectedDigitalMapVal;
                        var documentId = $(this).data("documentID");
                        data[cols[1]] = documentId.toString();
                        digitalMapRows.push(data);
                        data = {};

                    });

                    var headers = { __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val() };

                    if (digitalMapRows != null) {
                        $.ajax({
                            headers: headers,
                            url: "@Url.Action("Initiate")",
                            type: "POST",
                            cache: false,
                            data: JSON.stringify(digitalMapRows),
                            dataType: "json",
                            success: function (succ) {
                                console.log(succ);
                            },
                            error: function (err) {
                                console.log(err.statusText);
                            }
                        });
                    }

And this is the post action I'm posting to from ajax. Should my data be included in viewmodel rather than a separate argument? Hence data passed in this argument won't be filled in all cases.

           [HttpPost]
           //[ValidateAntiForgeryToken]
           [ValidateHeaderAntiForgeryToken]
           public ActionResult Initiate(SODViewModel vm, 
                 IEnumerable<DIGITAL_MAPS> digitalMapRows)
           {
                 //digitalMapRows returns as null
Trevor Reid
  • 3,310
  • 4
  • 27
  • 46
Abayomi Nidal
  • 45
  • 7
  • 1
    You can't take two objects as arguments in a POST to the controller. Merge them into one view model. – Crowcoder May 17 '19 at 16:39
  • please tell me how @Crowcoder – Abayomi Nidal May 17 '19 at 16:53
  • 1
    I don't know it that is your only problem, but you could add a property to `SODViewModel` of type `List` so you can pass one object to the controller. – Crowcoder May 17 '19 at 16:59
  • @Crowcoder there is a property in SODViewModel of type List, but how to map json to it? – Abayomi Nidal May 17 '19 at 17:34
  • Typically you would use a framework like Angular to manage data binding, or if you are using postbacks you build your inputs with @html helpers so that MVC maps your model correctly. If you are generating markup manually then I don't remember the specific way to markup a collection. – Crowcoder May 17 '19 at 17:40
  • @Crowcoder I'm building the project with js/jquery only for front-end. i'm not using html helpers because i'm getting data from html table – Abayomi Nidal May 17 '19 at 17:43
  • `var digitalMapRows = []; var sodVM = { "dmRows": digitalMapRows, "property1":"value", "property2":"value", ... }` I skipped assigning the array elements but you have that covered. – Jasen May 17 '19 at 18:01
  • Here's a good answer to copy https://stackoverflow.com/a/27963227/2030565 – Jasen May 17 '19 at 18:08
  • so @Jasen, you're telling me to pass sodVM in ajax? – Abayomi Nidal May 17 '19 at 18:26
  • The `data` you are sending is the `digitalMapRows`. You state you also need the other data. You'll need to merge the two sets into a single object. – Jasen May 17 '19 at 18:30
  • @Jasen that's right, but i'm still stuck on how to implement it – Abayomi Nidal May 17 '19 at 21:14
  • form inputs are bound with viewmodel as html helpers, while some data are collected as json not html helpers, how to merge them with the same viewmodel and send as one unit to controller? – Abayomi Nidal May 17 '19 at 23:09
  • i rephrased my question in this post https://stackoverflow.com/questions/56194690/how-to-bind-json-data-to-existing-viewmodel-mvc5 – Abayomi Nidal May 17 '19 at 23:25

0 Answers0