I have this problem where I try to have an AJAX call to post data the user put in on the webpage to the controller method. The data never arrives at the controller, it always throws an error. The problem is probably that the data the controller expects is not of the same type as what the AJAX call sends to it, but I am really at a loss at what the expected data should look like.
Here's the JS/jQuery that builds the array, which is an array of an array of a table cell's values:
var i = 0;
var cells = new Array(); // cell values in one column
var rows = new Array(); // list of columns (rows)
$('#datatable').find('tr').each(function () {
$('td :not([type="button"],[id="Nr."])', this).each(function () {
cells.push($(this).val());
});
if (i > 0) {
rows.push(cells);
cells = [];
}
i++;
});
this is what the AJAX call looks like:
rows = JSON.stringify({ 'rows': rows });
$.ajax({
url: "/Home/Q_FourthPage",
type: "POST",
datatype: "json",
traditional: true,
data: rows,
success: function (response) {
alert("Success");
console.log("Sucess ", response);
},
error: function (response) {
alert("Error");
console.log("Error ", response);
}
});
The controller is still empty - what parameter should it get in order for the data to arrive as an array of an array of strings/integers/whatever? Thank you.
Edit: This is the view model the Q_FourthPage controller method uses:
public class Q4_Answer_VM
{
public Models.User User { get; set; }
public List<Models.Capacity> Matrix { get; set; } //this is where the data should go
//a capacity describes one row of the table
public Models.QuestionText TMatrix { get; set; }
}
The capacity class looks like this - it is one row of the table.
public class Capacity
{
// This class is a model for the capacity matrix. it represents one column.
//PK
public int ID { get; set; }
//FK
public int Questionnaire_ID { get; set; }
//Values
public String Load { get; set; }
public String Source { get; set; }
public String Goal { get; set; }
public String Frequency { get; set; }
public String Distance { get; set; }
public virtual Questionnaire Questionnaire_ { get; set; }
}
Here's the head of the controller method:
[HttpPost]
public ActionResult Q_FourthPage(ViewModels.Q4_Answer_VM vm)
There are a lot of attributes in these classes - is that why the call fails?
Edit No. 2: The view
Here's the view:
@model MyANTon.ViewModels.Q4_Answer_VM
@{
ViewBag.Title = "myANTon Anforderungserfassung";
ViewBag.HideNavBar = false;
}
@using (Html.BeginForm(Html.BeginForm("Q_FourthPage", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })))
{
<div class="container">
<div align="center">
<ol class="breadcrumb" align="center" text-align="center">
<li class="breadcrumb-item">@Html.ActionLink("Lasten", "Q_Firstpage", "Home", new { @class = "elements" }, null)</li>
<li class="breadcrumb-item">@Html.ActionLink("Lastaufnahme-/abgabe", "Q_Secondpage", "Home", new { @class = "elements" }, null)</li>
<li class="breadcrumb-item">@Html.ActionLink("Weitere Anforderungen", "Q_Thirdpage", "Home", new { @class = "elements" }, null)</li>
<li class="breadcrumb-item"><b><u>@Html.ActionLink("Kapazitäten", "Q_Fourthpage", "Home", new { @class = "elements" }, null)</u></b></li>
<li class="breadcrumb-item">@Html.ActionLink("Auftragserzeugung", "Q_Fifthpage", "Home", new { @class = "elements" }, null)</li>
</ol>
</div>
<div class="jumbotron">
<div>
@Html.TextBox("file", "", new { type = "file" }) <br />
<input type="submit" value="Upload" />
@ViewBag.Message
</div>
<h1>4. Kapazitätsbetrachtung</h1>
<p>Wie viele Fahrzeuge werden benötigt? Um dies auszurechnen wird eine Transportmatrix benötigt.</p>
<p>Ein Beispiel einer Transportmatrix ist in Tabelle 1 zu sehen.</p>
<p>Um die Anzahl der Roboter zu berechnen ist auch eine Angabe der Produktionsschichten relevant:</p>
<ul>
<li>In wie vielen Schichten läuft die Fertigung?</li>
</ul>
<p>
Um mögliche Engpässe oder Umwege zu betrachten ist ein Layout der Produktionsstätte wie in Abbildung 3 von Vorteil.
Idealerweise mit Angaben über andere Verkehrsteilnehmer (Personenverkehr, Staplerverkehr, Kreuzungen).
</p>
<input type="button" id="BtnPlus" name="BtnPlus" class="BtnPlus" value="Zeile hinzufügen (+)" align="center" style="vertical-align: middle" />
<table class="grid" id="datatable" style="table-layout:fixed">
<thead>
<tr style="text-align: center" id="header">
<th style="vertical-align: middle" id="Nr.">Nr.</th>
<th>Last</th>
<th>Quelle</th>
<th>Ziel</th>
<th>Frequenz [/h]</th>
<th>Abstand [m]</th>
<th>Zeile löschen</th>
</thead>
<tbody></tbody>
</table>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" name="Speichern" value="Speichern" id="BtnSave" />
<input type="submit" class="btn btn-default" name="Speichern und weiter" value="Speichern und weiter" />
<input type="button" class="btn btn-default" value="Weiter zu Schritt 5" onclick="@("window.location.href='" + @Url.Action("Q_Fifthpage", "Home") + "'");" />
</div>
</div>
</div>
</div>
}
<script src="~/Scripts/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
@Scripts.Render("~/bundles/datatables")
Edit no. 3: it works now thanks to the solution provided by user derloopkat below. As a hint: it seems that Ajax and Forms don’t go well together. I had to move the “save” button outside the form (@using...{}).
