将模型传递给 asp-for | ASP.net 核心
Posted
技术标签:
【中文标题】将模型传递给 asp-for | ASP.net 核心【英文标题】:Passing model to asp-for | ASP.net Core 【发布时间】:2021-06-06 10:05:10 【问题描述】:我正在尝试创建一个按钮,该按钮采用模型值,计算它们,它们重新传递模型(不丢失已经输入的信息)。我已经尝试为 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");
【问题讨论】:
你能显示整个视图吗?我不明白为什么您需要将模型传递给视图,然后将其返回给未触及的控制器。 嗨,谢尔盖。我现在已经编辑了我的答案,我希望在单击该按钮时能够传递当前模型(如在表单的其余部分中捕获的那样)。考虑一下...我是否需要将按钮放在创建表单的其余部分中? 你不能按照你想要的方式来做。您必须提交整个视图,计算并返回。或者您可以使用 ajax 调用控制器操作并将计算值作为 json 返回。在此之后使用 jquery 您可以刷新总里程。 好吧好吧,所以在使用模型的时候没有ajax没有办法动态更新页面细节?因此,如果我希望 Model.Field3 成为 Model.Field 1 + Model.Field 2 我必须在 ajax 中这样做? 是的,您是正确的,否则您必须提交整个表格。或者,如果它很简单,您可以只使用 jquery 而不要将其发送到服务器。 【参考方案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);
));
);
【讨论】:
请注意,这会将逻辑从服务器转移到客户端。这可能会让攻击者改变里程的计算方式。这可能是不受欢迎的行为。 是的,我同意,但是如果您阅读 cmets PO 只需要一个非常简单的示例。 @RichardBarker - 你有更安全的方法吗?我的最终目标是从 PostcodeOne 和 PostcodeTwo 获取两个邮政编码,然后调用一个运行 google API 并查找距离的方法,然后使用该示例更新“TotalMiles”。 @DanielHill 您必须创建一个新帖子,如果您可以等到明天,我可以在有时间的时候为您制作此代码。或者其他人可以在我开始之前尝试一下。 那太好了,谢谢,这只是一个个人项目,所以我不着急!感谢您的帮助。以上是关于将模型传递给 asp-for | ASP.net 核心的主要内容,如果未能解决你的问题,请参考以下文章
如何将两个模型组合成一个模型并使用 asp.net MVC razor 将其传递给查看
ASP.NET MVC 视图需要将选定的下拉列表和日历日期传递给模型