ASP.NET MVC Cannot retrieve decimal values in controller on form submission

Question

I have the following model class:

public class NewCampaignCommand
{
    public string Title { get; set; }
    public string Description { get; set; }
    public decimal TargetAmount { get; set; }
    public decimal CollectedAmount { get; set; }

}    

The above model is bonded to a view as below:

@model TPF.Application.Features.Campaign.Commands.NewCampaign.NewCampaignCommand;
<form asp-controller="campaign" asp-action="newcampaign" method="POST">`     
                        <label for="title" class="form-label">Title</label>
                        <input asp-for="Title"
                               class="form-control"
                               type="text"
                               id="title"
                               name="title"
                               autofocus />`    
                       `<label for="description" class="form-label">Description</label>
                        <textarea asp-for="Description"
                                  rows="1"
                                  class="form-control"
                                  type="text"
                                  id="description"
                                  name="description"></textarea>`
                        <label for="amount" class="form-label">Target Amount</label>
                        <input asp-for="TargetAmount"
                               asp-format="{0:n2}"
                               class="form-control"
                               type="number"
                               id="amount"
                               name="amount" />

                        <label for="camount" class="form-label">Collected Amount</label>
                        <input asp-for="CollectedAmount"
                               asp-format="{0:n2}"
                               class="form-control"
                               type="number"
                               id="camount"
                               name="camount" />

                    <button value="Save" type="submit" name="submit" class="btn btn-primary me-2">Save</button>
</form>    

I am debugging the code and when the form is submitted I receive the values in the controller entered in the form for Title and Description fields while TargetAmount and CollectedAmount are always 0. I am not sure what am i doing wrong.

public async Task<IActionResult> NewCampaign(NewCampaignCommand request)
{
        
    return RedirectToAction("NewCampaign");
}

Answer 1

Model Binding binds the property by name. You need keep the same with the name attribute in the frontend and the property name in the model.

Actually asp-for will generate the name and id by default. You can do not specify them. e.g:

<input asp-for="Title"
        class="form-control"
        type="text" autofocus /> 

If you want to specify name and id for any other thing, you can change your code like below:

<input asp-for="TargetAmount"
        asp-format="{0:n2}"
        class="form-control"
        type="number"
        id="amount"
        name="targetAmount" />

<label for="camount" class="form-label">Collected Amount</label>
<input asp-for="CollectedAmount"
        asp-format="{0:n2}"
        class="form-control"
        type="number"
        id="camount"
        name="collectedAmount" />