将模型传递给 asp-for | ASP.net 核心

Question

我正在尝试创建一个按钮，该按钮采用模型值，计算它们，它们重新传递模型（不丢失已经输入的信息）。我已经尝试为 asp-for="@Model" 传递模型，但这只会引发一个错误，指出 asp-for 不能为空/空白。

型号

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

查看模型

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

控制器动作

 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>

每当我点击按钮时，它要么传递一个空白模型，要么失败。我试图忽略 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);

    }));

});