.NET Core MVC Form returning wrong model value - asp.net-mvc

Question

I'm having a weird issue with a form in my View not returning the model's correct Id property value. You'll noticed in the code below I have the script section logging the model's Id. Doing this shows the correct Id on the console, but when the Id is passed to the Controller's action method it is always 0, which is incorrect.
Here's the view:
#model EotE_Encounter.Models.Encounter
<div>
<h4>#Model.Name</h4>
<div>
<form asp-action="CreateCharacter" asp-controller="Encounter" data-bind="" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#character-container">
<input id="encounterId" type="hidden" value="#Model.Id" />
<button class="btn btn-default" type="submit">Create Character</button>
</form>
</div>
<hr />
<div>
<ul>
#{
if(Model.CharactersInEncounter != null)
{
foreach(Character character in Model.CharactersInEncounter)
{
<li>#character.Name</li>
}
}
}
</ul>
</div>
</div>
<script>
console.log(#Model.Id);
</script>
Related Action Method:
public ActionResult CreateCharacter(int encounterID)
{
return RedirectToAction("CreateCharacter", "Character", encounterID);
}
And the Encounter model:
public class Encounter
{
//these first three properties may not be used just yet.
public int Id { get; set; }
public string Name { get; set; }
public byte Round { get; set; }
public List<Character> CharactersInEncounter { get; set; }
[StringLength(2000)]
public string Notes { get; set; }
}

Answer 1

Only form elements with a name attribute will have their values passed when submitting a form. So, add the name attribute to your hidden element. Id and the name are not the same.
#model EotE_Encounter.Models.Encounter
<div>
<h4>#Model.Name</h4>
<div>
<form asp-action="CreateCharacter" asp-controller="Encounter" data-bind="" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#character-container">
<input id="encounterId" name="encounterID" type="hidden" value="#Model.Id" />
<button class="btn btn-default" type="submit">Create Character</button>
</form>
</div>
<hr />
<div>
<ul>
#{
if(Model.CharactersInEncounter != null)
{
foreach(Character character in Modelsel.CharactersInEncounter)
{
<li>#character.Name</li>
}
}
}
</ul>
</div>
</div>
<script>
console.log(#Model.Id);
</script>
Notice the name attribute of the <input id="encounterId" name="encounterID" type="hidden" value="#Model.Id" /> element. It has to be the same name as the action parameter (int encounterID). If it's not the same then the parameter binding will not work.