How to get DropDownList SelectedValue to update Database - asp.net-core-mvc

Question

I finally was able to get cascading drowdownlist working but I can not get the values to update the database table.
Controller
public IActionResult Create()
{
var strRowWid = "RowWid";
var strDt = "Dt";
var dateNow = DateOnly.FromDateTime(DateTime.Now);
//Date Dropdown
ViewBag.DateWid = new SelectList(_context.TblDays.OrderByDescending(x => x.Dt).Where(n => n.Dt <= dateNow), strRowWid, strDt);
//Ammo Type dropdown
ViewBag.ammo = _context.VwAmmos.OrderBy(n => n.Caliber)
.Select(n => new SelectListItem
{
Value = n.RowWid.ToString(),
Text = n.WeaponType.ToString() + " " + n.Caliber.ToString() + " " + n.Brand.ToString() + " " + n.Style.ToString(),
}).ToList();
return View();
}
HTML
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
#Html.LabelFor(model => model.TblUsed.DateWid, htmlAttributes: new { #class = "control-label"})
<div>
#Html.DropDownList("DateWid", ViewBag.DateWid as SelectList, "--select date--", new { #class = "form-control form-select-sm form-select" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TblUsed.AmmoWid, htmlAttributes: new { #class = "control-label"})
<div>
#Html.DropDownList("AmmoWid",ViewBag.ammo, "--select Ammo--", new { #class = "form-control form-select-sm form-select" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TblUsed.StoreWid, htmlAttributes: new { #class = "control-label"})
<div>
#Html.DropDownList("StoreWid",new SelectList(string.Empty,"StoreWid","StoreName"), new { #class = "form-control form-select-sm form-select" })
</div>
</div>
<div class="form-group">
<label asp-for="#Model.TblUsed.QtyUsed" class="control-label"></label>
<input asp-for="#Model.TblUsed.QtyUsed" class="form-control" />
<span asp-validation-for="#Model.TblUsed.QtyUsed" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
Javascript for the cascade
<script>
$('#AmmoWid').change(function () {
$('#StoreWid').empty();
$.ajax({
url: "#Url.Action("GetStore")",
type: "Get",
data: { id: $('#AmmoWid option:selected').val() },
dataType:"json",
success: function (result) {
$.each(result, function (i,Store) {
$('#StoreWid').append('<option value="' + Store.value + '">' + Store.text+'</option>')
})
}
})
})
</script>
When I select the values from the dropdownlist and submit they do not update the database table. It appears that they are not binded correctly.
I don't know what to try at this point.
When doing them like this I can get them to update but then I can't do the cascading.
<div class="form-group col-2">
<select asp-for="#Model.TblPurchase.AmmoWid" class="form-control form-select-sm form-select" asp-items="#Model.Ammo">
<option value="">Select Ammo</option>
</select>
<span asp-validation-for="#Model.TblPurchase.AmmoWid" class="text-danger"></span>
</div>
Create Post
// POST: Useds/Create
// To protect from overposting attacks, enable the specific properties you want to bind to.
// For more details, see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("RowWid,DateWid,AmmoWid,QtyUsed,StoreWid")] TblUsed tblUsed)
{
if (ModelState.IsValid)
{
_context.Add(tblUsed);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(tblUsed);
}
TblUsed Model
namespace Ammo.Models;
public partial class TblUsed
{
[Key]
public int RowWid { get; set; }
[ForeignKey("TblDay")]
[DisplayName("Date")]
public int DateWid { get; set; }
[ForeignKey("TblAmmunition")]
[DisplayName("Ammo")]
public int AmmoWid { get; set; }
public int QtyUsed { get; set; }
[ForeignKey("TblStore")]
[DisplayName("Store")]
public int StoreWid { get; set; }
}
VwAmmo Model
namespace Ammo.Models;
public partial class VwAmmo
{
public int RowWid { get; set; }
public string? WeaponType { get; set; }
public string? Caliber { get; set; }
public string Brand { get; set; } = null!;
public string Style { get; set; } = null!;
public int? Grain { get; set; }
public int? FtS { get; set; }
public decimal? ShellSize { get; set; }
public string? ShotType { get; set; }
public string? Shot { get; set; }
public decimal? GrainLoad { get; set; }
}

Answer 1

The reason why you couldn't get the tblUsed value is you used the wrong name for your attribute.
I suggest you could try to modify as below and then test. Besides, there is no need to put the bind attribute again.
View codes:
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
#Html.LabelFor(model => model.TblUsed.DateWid, htmlAttributes: new { #class = "control-label"})
<div>
#Html.DropDownList("TblUsed.DateWid", ViewBag.DateWid , "--select date--", new { #class = "form-control form-select-sm form-select" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TblUsed.AmmoWid, htmlAttributes: new { #class = "control-label"})
<div>
#Html.DropDownList("TblUsed.AmmoWid",ViewBag.ammo, "--select Ammo--", new { #class = "form-control form-select-sm form-select" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TblUsed.StoreWid, htmlAttributes: new { #class = "control-label"})
<div>
#Html.DropDownList("TblUsed.StoreWid",new SelectList(string.Empty,"StoreWid","StoreName"), new { #class = "form-control form-select-sm form-select" })
</div>
</div>
<div class="form-group">
<label asp-for="#Model.TblUsed.QtyUsed" class="control-label"></label>
<input asp-for="#Model.TblUsed.QtyUsed" class="form-control" />
<span asp-validation-for="#Model.TblUsed.QtyUsed" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
#section Scripts{
<script>
$('#TblUsed_AmmoWid').change(function () {
$('#TblUsed_StoreWid').empty();
$.ajax({
url: "#Url.Action("GetStore")",
type: "Get",
data: { id: $('#TblUsed_AmmoWid option:selected').val() },
dataType:"json",
success: function (result) {
$.each(result, function (i,Store) {
$('#TblUsed_StoreWid').append('<option value="' + Store.value + '">' + Store.text+'</option>')
})
}
})
})
</script>
}