在Trade视图渲染Journal视图时遇模型类型不匹配问题

问题背景 #

我有以下文件：

Views/Journals/AddOrEdit.cshtml
Views/Trades/AddOrEdit.cshtml

希望在Trade视图中渲染Journal的AddOrEdit视图，但执行以下代码时出错：

await Html.PartialAsync("AddOrEdit", Model.Journal);

错误信息 #

InvalidOperationException: 传入ViewDataDictionary的模型项类型为TradeJournal.Models.Journal，但该ViewDataDictionary实例要求模型项类型为TradeJournal.Models.Trade。

相关代码 #

TradesController.cs（Details方法） #

// GET: Trades/Details/{Id}
public async Task<IActionResult> Details(int? id)
{
    // 未找到/不存在id
    if (id == null) return NotFound();
    

    var trade = await _context.Trades
        .FirstOrDefaultAsync(m => m.Id == id);

    // 未找到trade
    if (trade == null) return NotFound();
     
    // 将笔记关联到trade
    var journal = new Journal
    {
        TradeId = trade.Id
    };

    // 创建viewModel
    var viewModel = new TradesJournalsViewModels
    {
        Trade = trade,
        Journal = journal
    };

    
   // 返回两者
    return View(viewModel);
}

Journals/AddOrEdit.cshtml #

@model TradeJournal.Models.Journal

@{
    ViewData["PageTitle"] = "Journals";
    ViewData["PageActionText"] = "+ Add note";
    ViewData["PageActionUrl"] = "/Journals/AddOrEdit";

    var tools = new[] {
        "Bold", "Italic", "Underline", "StrikeThrough",
        "FontName", "FontSize", "FontColor", "BackgroundColor",
        "LowerCase", "UpperCase", "|",
        "Formats", "Alignments", "OrderedList", "UnorderedList",
        "Outdent", "Indent", "|",
        "CreateLink", "Image", "CreateTable", "|", "ClearFormat", "Print",
        "SourceCode", "FullScreen", "|", "Undo", "Redo"
    };
}


<h4>Journal</h4>
<hr />
<div class="row d-flex justify-content-center align-items-center ">
    <div class="col-md-7">
        <form asp-action="AddOrEdit">
            <div asp-validation-summary="ModelOnly"  class="text-danger"></div>
            <input type="hidden" asp-for="Id" />

            <div class="mb-3 w-100">
                <ejs-richtexteditor id="Text" value="@Model.Text">
                    <e-richtexteditor-toolbarsettings items="tools"></e-richtexteditor-toolbarsettings>
                </ejs-richtexteditor>
                <span asp-validation-for="@Model.Text" class="text-danger"></span>
            </div>
  
            <div class="mb-3 ">
                <label asp-for="TradeId" class="control-label"></label>
                <select asp-for="@Model.TradeId" class ="form-control" asp-items="ViewBag.TradeId"></select>
            </div>
            <div class="mb-3">
                <ejs-button cssClass="w-100" id="submit" type="submit" content="Submit"></ejs-button>
            </div>
        </form>
    </div>
</div>

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

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

使用的ViewModel（TradesJournalsViewModels） #

using Microsoft.AspNetCore.Mvc;
using TradeJournal.Models;


namespace TradeJournal.ViewModels
{
    public class TradesJournalsViewModels
    {
        public Trade Trade { get; set; }
        public Journal Journal { get; set; }

    }
}

问题原因及解决方案 #

问题出在调用PartialAsync时仅指定视图名称"AddOrEdit"，系统会优先在当前控制器（Trades）的视图目录下查找匹配视图，即Views/Trades/AddOrEdit.cshtml，而该视图要求的模型类型为Trade，但传入的是Journal类型模型，因此出现类型不匹配错误。

解决方法：指定完整视图路径，明确指向Journals目录下的AddOrEdit视图，两种写法均可：

// 绝对路径写法
await Html.PartialAsync("/Views/Journals/AddOrEdit.cshtml", Model.Journal);

// 相对路径写法
await Html.PartialAsync("../Journals/AddOrEdit", Model.Journal);

这样系统就能找到正确的Journal视图，接收Journal类型模型，解决类型不匹配问题。

内容的提问来源于stack exchange，提问作者Hiroco