將 model 傳遞給 asp-for | ASP.net核心

Question

我正在嘗試創建一個按鈕，它采用 Model 值，計算它們，它們重新傳遞 model （不會丟失已經輸入的信息）。 我已經嘗試將 model 傳遞給 asp-for="@Model" 但這只會引發一個錯誤，指出 asp-for 不能為空/空白。

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; }
    }

查看 Model

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

Controller 操作

 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);
        }

嘗試按鈕調用

@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>

每當我按下按鈕時，它要么通過空白 model，要么失敗。 我試圖忽略 asp-for 但它再次以空白傳遞，我不完全確定為什么。

有人可以幫忙嗎？

謝謝！

編輯 - 整個視圖

@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

您可以使用 jquery 來計算表單的字段。 這只是一個示例。

首先為您的控件提供 ID：

           <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>
            ....

代替

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

和

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

並將腳本放在腳本部分：

$(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);

    }));

});