'CRUD with pure JS on a List, no API/AJAX
I have a table, Manifest. I want to display the manifest for a particular job to the user, and let them Create, Update, and Delete on their manifest, on one page using JS. I want to do this without an api or ajax because, frankly, I can't wrap my head around it. It's probably the better way to go. But another project, not today.
I have successfully displayed the List of existing manifest items to the view. I have a table with inputs for each existing value. I have the "remove" button for each to delete the corresponding row. I have the JS to add a new, blank row to the table. And I have the "submit" button to post the data.
However, when I submit, it doesn't seem to pass/save any new records that I add to the table, and I'm not sure why. For the [HttpPost], I chose to delete the existing records, and then rewrite them into the db.
My question is why doesn't the new row data pass/save to db.
I would appreciate any help or advice.
The view [truncated slightly for easy viewing]
@model List<AURA.Models.Manifest>
<h4>manifest</h4>
<form action="Manifest" method="post">
<input type="hidden" value="@ViewBag.zero" />
<input type="submit" value="Submit" style="float:right" />
<br />
<table id="tableToClone" border="1" cellpadding="1">
<thead>
<tr>
<th style="width:30px">
TYPE
</th>
<th>
DESCRIPTION
</th>
<th>
WRAP?
</th>
<th>
ASSEMBLY?
</th>
<th>
NOTES
</th>
</tr>
</thead>
<tbody id="tbody">
<tr id="rowToClone" style="display:none;">
<td style="width:30px">
<input type="hidden" name="zero" value="@ViewBag.zero" />
@Html.DropDownList("manifests.Type",
new SelectList(new List<Object>
{
new { value = "L", text = "Large"},
new { value = "S", text = "Small"},
new { value = "H", text = "Hand"},
new { value = "F", text = "Fragile"},
},
"value",
"text"
)
)
</td>
<td>
@Html.TextBox("manifests.Name")
</td>
<td>
@Html.DropDownList("manifests.Wrap",
new SelectList(new List<Object>
{
new { value = "FALSE" , text = "NO" },
new { value = "TRUE" , text = "YES" },
},
"value",
"text"
)
)
</td>
<td>
@Html.DropDownList("manifests.Assembly",
new SelectList(new List<Object>
{
new { value = "FALSE" , text = "NO" },
new { value = "TRUE" , text = "YES" },
},
"value",
"text"
)
)
</td>
<td>
@Html.TextBox("manifests.Notes","")
</td>
<td>
<input type="button" id="btRemoveRow" value="REMOVE" onclick="RemoveRow(this)" />
</td>
</tr>
@for (int i = 0; i < Model.Count; i++)
@*@foreach (var item in Model.Manifests.Where(p => p.Type != "B" && p.Type != "C"))*@
{
<tr>
<td style="width:30px">
@Html.Hidden("manifests[" + i + "].Id",
Model[i].Id,
new { @readonly = "readonly" })
@Html.Hidden("manifests[" + i + "].Zero",
Model[i].Zero,
new { @readonly = "readonly" })
@Html.DropDownList("manifests[" + i + "].Type",
new SelectList(new List<Object>
{
new { value = "L", text = "Large"},
new { value = "S", text = "Small"},
new { value = "H", text = "Hand"},
new { value = "F", text = "Fragile"},
},
"value",
"text",
Model[i].Type
)
)
</td>
<td>
@Html.TextBox("manifests[" + i + "].Name", Model[i].Name)
</td>
<td>
@Html.DropDownList("manifests[" + i + "].Wrap",
new SelectList(new List<Object>
{
new { value = "FALSE" , text = "NO" },
new { value = "TRUE" , text = "YES" },
},
"value",
"text",
Model[i].Wrap
)
)
</td>
<td>
@Html.DropDownList("manifests[" + i + "].Assembly",
new SelectList(new List<Object>
{
new { value = "FALSE" , text = "NO" },
new { value = "TRUE" , text = "YES" },
},
"value",
"text",
Model[i].Assembly
)
)
</td>
<td>
@Html.TextBox("manifests[" + i + "].Notes",
Model[i].Notes,
new { @readonly = "readonly" })
</td>
<td>
<input type="button" id="btRemoveRow" value="REMOVE" onclick="RemoveRow(this)" />
</td>
</tr>
}
</tbody>
</table>
</form>
<input type="button" value="Add Row JS" id="btAddF" style="float: left" onclick="addRow()" />
<script>
function addRow() {
var row = document.getElementById("rowToClone");
var table = document.getElementById("tbody");
var clone = row.cloneNode(true);
clone.style.display = "table-row";
table.appendChild(clone);
}
function RemoveRow(text) {
var cell = text.parentNode;
var row = cell.parentNode;
$(row).remove();
}
</script>
and the Controller
[HttpPost]
public async Task<IActionResult> Manifest(List<Manifest> manifests, string zero)
{
//string zero = "111111-1";
//delete existing
foreach (Manifest ListManifest in manifests)
{
//for existing
if (!(ListManifest.Id == 0))
{
var existing = _context.Manifests.Find(ListManifest.Id);
_context.Manifests.Remove(existing);
//await _context.SaveChangesAsync();
}
Manifest manifest = new Manifest();
manifest.Zero = zero;
manifest.Type = ListManifest.Type;
manifest.Name = ListManifest.Name;
manifest.Wrap = ListManifest.Wrap;
manifest.Assembly = ListManifest.Assembly;
manifest.Notes = ListManifest.Notes;
_context.Add(manifest);
await _context.SaveChangesAsync();
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
