将模型传递给 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 中的视图

如何将两个模型组合成一个模型并使用 asp.net MVC razor 将其传递给查看

ASP.NET MVC & C#:将视图模型传递给控制器

ASP.NET MVC 视图需要将选定的下拉列表和日历日期传递给模型

ASP.NET MVC我想重定向到另一个将我的模型传递给它的动作,以获得正确的URL

使用目标 AJAX 和 ASP 将复杂模型传递给控制器