Passing model to asp-for | ASP.net Core

Question

I am trying to create a button which takes Model values, calculates them, them re-passes the model (to not lost info already inputted). I've tried passing the model for asp-for="@Model" but that just fires an error saying that asp-for cannot be null/blank.

Model

    {
        public int JobId { get; set; }
        [Required]
        [Display(Name = "Name")]
        public string JobName { get; set; }
        [Display(Name = "Description")]
        public string JobDescription { get; set; }
        [Display(Name = "Postcode From")]
        public string PostcodeFrom { get; set; }
        [Display(Name = "Postcode To")]
        public string PostcodeTo { get; set; }
        [Display(Name = "Mileage")]
        public int TotalMiles { get; set; }
        public int? CustomerId { get; set; }
        public Customer Customer { get; set; }
    }

View Model

    public class JobDetailViewModel
    {
        public Job Job { get; set; }
        public Customer Customer { get; set; }
        public List<SelectListItem> Customers { get; set; }
    }

Controller Actions

 public IActionResult Create()
        {
            var jobDetailViewModel = new JobDetailViewModel();
            jobDetailViewModel.Customers = _context.Customers.Select(c => new SelectListItem { Value = c.CustomerId.ToString(), Text = c.CustomerName }).ToList();
            return View(jobDetailViewModel);
        }

and

[HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult CalculateMilage(JobDetailViewModel model)
        {
            model.Job = new Job();
            model.Job.TotalMiles = 123;
            return View("Create", model);
        }

Attempted button call

@model DHSCRM.ViewModels.JobDetailViewModel
<form asp-action="CalculateMilage" method="post">
    <input type="hidden" asp-for="@Model" />
    <button class="btn btn-info" value="Calculate">Calculate Milage</button>
</form>

Whenever I hit the button it either passes a blank model, or fails. I've tried to ignore asp-for but again it passes in blank, and I'm not entirely sure why.

Can anyone help please?

Thanks!

EDIT - Entire view

@model DHSCRM.ViewModels.JobDetailViewModel

@{
    ViewData["Title"] = "Create";
}

<h1>Create</h1>

<h4>Job</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Job.JobName" class="control-label"></label>
                <input asp-for="Job.JobName" class="form-control" />
                <span asp-validation-for="Job.JobName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Job.JobDescription" class="control-label"></label>
                <input asp-for="Job.JobDescription" class="form-control" />
                <span asp-validation-for="Job.JobDescription" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Job.PostcodeFrom" class="control-label"></label>
                <input asp-for="Job.PostcodeFrom" class="form-control" />
                <span asp-validation-for="Job.PostcodeFrom" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Job.PostcodeTo" class="control-label"></label>
                <input asp-for="Job.PostcodeTo" class="form-control" />
                <span asp-validation-for="Job.PostcodeTo" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Job.TotalMiles" class="control-label"></label>
                <input asp-for="Job.TotalMiles" class="form-control" />
                <span asp-validation-for="Job.TotalMiles" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Customer.CustomerName" class="control-label"></label>
                <select asp-for="Job.CustomerId" asp-items="@Model.Customers">
                    <option selected></option>
                </select>
                <span asp-validation-for="Job.CustomerId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<form asp-action="CalculateMilage" method="post">
    <input type="hidden" asp-for="@Model" />
    <button class="btn btn-info" value="Calculate">Calculate Milage</button>
</form>

<hr />
@TempData["ButtonValue"]
<hr />

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Answer 1

You can use jquery to calculate the fields of your form. This is just a sample.

At first give ids to your controls:

           <div class="form-group">
                <label asp-for="Job.PostcodeFrom"  class="control-label"></label>
              <input asp-for="Job.PostcodeFrom" id="postCodeFrom" class="form-control" />
                <span asp-validation-for="Job.PostcodeFrom" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Job.PostcodeTo" class="control-label"></label>
                <input asp-for="Job.PostcodeTo" id="postCodeTo" class="form-control" />
                <span asp-validation-for="Job.PostcodeTo" class="text-danger"></span>
            </div>
           <div class="form-group">
                <label asp-for="Job.TotalMiles" class="control-label"></label>
                <input asp-for="Job.TotalMiles" id="totalMiles" class="form-control" />
                <span asp-validation-for="Job.TotalMiles" class="text-danger"></span>
            </div>
            ....

replace

<form asp-action="CalculateMilage" method="post">
    <input type="hidden" asp-for="@Model" />
    <button class="btn btn-info" value="Calculate">Calculate Milage</button>
</form>

with

<button class="btn btn-info" id="btnCalculate"> Calculate Milage</button>
  

and put the script in the script section:

$(document).ready(function () {

    "use strict";

$(document).on("click", "#btnCalculate", (function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();

       var  postCodeFrom = $("#postCodeFrom").val();
       var  postCodeTo = $("#postCodeTo").val();
       var total= postCodeFrom+postCodeTo;

         $("#totalMiles").val(total);

    }));

});