使用单个视图模型在MVC Razor视图上发布多个表单 [英] Posting multiple forms on MVC Razor View with a Single View Model

问题描述

我有一个包含5种形式的剃刀视图. (A，B，C，D，E).这些表格中的每一个都有自己的ViewModel(AViewModel，BViewModel，CViewModel，DViewModel，EViewModel).

I have a razor view that will contain 5 forms. (A, B, C, D, E). Each of these forms has their own ViewModel (AViewModel, BViewModel, CViewModel, DViewModel, EViewModel).

我创建了一个父ProductViewModel，该页面将用作其唯一的ViewModel.此ViewModel中将包含页面上每个表单的所有其他ViewModel(上面列出).

I created a parent ProductViewModel that the page will use as its only ViewModel. Within this ViewModel will be all of the other ViewModels for each form on the page (listed above).

这是ProductViewModel的属性:

public AViewModel { get; set; }
public BViewModel { get; set; }
public CViewModel { get; set; }
public DViewModel { get; set; }
public EViewModel { get; set; }

我的剃刀视图如下:

@model MVCApp.ViewModels.ProductViewModel

@{
    ViewData["Title"] = "Product Detail";
}

<h2>Product Detail</h2>

<form asp-controller="A" asp-action="Save" data-ajax="true" data-ajax-method="POST">
    <div class="form-horizontal">
        <h4>Form A</h4>
        <hr />
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="AViewModel.Name" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="AViewModel.Name" class="form-control"/>
                <span asp-validation-for="AViewModel.Name" class="text-danger" />
            </div>
        </div>
        <div class="form-group">
            <label asp-for="AViewModel.StartDate" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="AViewModel.StartDate" class="form-control"/>
                <span asp-validation-for="AViewModel.StartDate" class="text-danger" />
            </div>
        </div>
        <div class="form-group">
            <label asp-for="AViewModel.EndDate" class="col-md-2 control-label"></label>
            <div class="col-md-10">
                <input asp-for="AViewModel.EndDate" class="form-control"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</form>

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

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

单击保存"按钮后，我将进入A控制器的保存(POST)"操作方法，就像我期望的那样:

When the Save button is clicked I end up in the Save (POST) Action Method of the A Controller just as I would expect:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Save(AViewModel viewModel)
    {
        return Ok();
    }

但是，我注意到viewModel参数的所有属性都是空的.

However, I noticed all of the properties of the viewModel param are empty.

这是否意味着我真的必须将ProductViewModel对象作为ViewModel传递给所有这5种形式的Save Action Method，其中仅填充范围内的ViewModel，其他所有内容都为null?还是有更好的方法?

Does this mean I really have to pass the ProductViewModel object as my ViewModel to the Save Action Method for all 5 of these forms where only the ViewModel in scope will be populated and everything else will be null? Or is there a better way?

推荐答案

我建议使每个表单成为局部视图，并仅传入父模型所需的子模型

I suggest make each form a partial view and pass in only the sub model needed from the parent model

 @{await Html.RenderPartialAsync("AViewPartial", Model.AViewModel); }

然后您可以将部分输入更改为

then your inputs in the partial can be changed from

<input asp-for="AViewModel.Name" class="form-control"/>

到

<input asp-for="Name" class="form-control"/>

这应该使它与Modelbinder正确绑定，以便将其传递给您的动作

which should make it bind correctly by the modelbinder so it gets passed into your action

这篇关于使用单个视图模型在MVC Razor视图上发布多个表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！