Razor Pages问题：局部视图与从Model获取数据异常

嘿，看你正在钻研ASP.NET Core 2.0的Razor Pages，还重点盯着局部视图呢～刚好你有个ViewReport页面要处理报告的展示和编辑，结合你给出的PageModel片段，我来给你唠唠局部视图在这个场景里怎么玩才顺畅。

首先先补全一下你没写完的PageModel逻辑（假设你的报告模型叫Report），然后再拆解局部视图的用法：

第一步：完善你的ViewReport PageModel #

namespace ReportControlPanel.Pages
{
    public class ViewReportModel : PageModel
    {
        private readonly ReportControlPanel.Data.MainContext _context;

        public ViewReportModel(ReportControlPanel.Data.MainContext context)
        {
            _context = context;
        }

        // 绑定报告模型，用于接收表单提交和页面展示
        [BindProperty]
        public Report CurrentReport { get; set; }

        // 获取报告详情的Get请求处理
        public async Task<IActionResult> OnGetAsync(int id)
        {
            CurrentReport = await _context.Reports.FindAsync(id);
            if (CurrentReport == null)
            {
                return NotFound();
            }
            return Page();
        }

        // 保存编辑内容的Post请求处理
        public async Task<IActionResult> OnPostAsync()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            _context.Attach(CurrentReport).State = EntityState.Modified;
            
            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!ReportExists(CurrentReport.Id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }

            return RedirectToPage("./Index");
        }

        // 辅助方法：检查报告是否存在
        private bool ReportExists(int id)
        {
            return _context.Reports.Any(e => e.Id == id);
        }
    }
}

第二步：拆分局部视图 #

局部视图的核心是拆分页面逻辑、复用代码，针对你的场景，可以拆成两个局部视图：报告详情展示、报告编辑表单。

1. 报告详情展示局部视图 _ReportDetails.cshtml #

把这个文件放在Pages/Shared目录下（全局可用）或者Pages/ViewReport目录下（仅当前页面可用）：

@model ReportControlPanel.Models.Report

<div class="card mb-4">
    <div class="card-header">
        <h5>报告详情</h5>
    </div>
    <div class="card-body">
        <dl class="row">
            <dt class="col-sm-3">报告名称</dt>
            <dd class="col-sm-9">@Model.ReportName</dd>
            <dt class="col-sm-3">创建时间</dt>
            <dd class="col-sm-9">@Model.CreatedDate.ToString("yyyy-MM-dd HH:mm")</dd>
            <dt class="col-sm-3">报告描述</dt>
            <dd class="col-sm-9">@Model.Description</dd>
            <!-- 其他需要展示的字段按需添加 -->
        </dl>
    </div>
</div>

2. 报告编辑表单局部视图 _ReportEditForm.cshtml #

同样放在合适的目录下：

@model ReportControlPanel.Models.Report

<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger mb-3"></div>
    <!-- 隐藏ID，用于提交时定位报告 -->
    <input type="hidden" asp-for="Id" />
    
    <div class="form-group">
        <label asp-for="ReportName" class="control-label"></label>
        <input asp-for="ReportName" class="form-control" />
        <span asp-validation-for="ReportName" class="text-danger small"></span>
    </div>
    
    <div class="form-group">
        <label asp-for="Description" class="control-label"></label>
        <textarea asp-for="Description" class="form-control" rows="4"></textarea>
        <span asp-validation-for="Description" class="text-danger small"></span>
    </div>
    
    <!-- 其他需要编辑的字段按需添加 -->
    
    <button type="submit" class="btn btn-primary">保存修改</button>
    <a asp-page="./ViewReport" asp-route-id="@Model.Id" class="btn btn-secondary ml-2">取消</a>
</form>

第三步：在ViewReport页面引用局部视图 #

修改你的ViewReport.cshtml，把局部视图整合进去，还可以加个切换按钮控制编辑表单的显示：

@page
@model ReportControlPanel.Pages.ViewReportModel

<h1>报告管理</h1>

<button id="toggleEditBtn" class="btn btn-secondary mb-3">编辑报告</button>

<!-- 引用详情展示局部视图 -->
<partial name="_ReportDetails" model="Model.CurrentReport" />

<!-- 引用编辑表单局部视图，默认隐藏 -->
<div id="editFormContainer" style="display:none;" class="mt-4">
    <h5>编辑报告</h5>
    <hr />
    <partial name="_ReportEditForm" model="Model.CurrentReport" />
</div>

<script>
    // 点击按钮切换编辑表单的显示/隐藏
    document.getElementById('toggleEditBtn').addEventListener('click', function() {
        const container = document.getElementById('editFormContainer');
        container.style.display = container.style.display === 'none' ? 'block' : 'none';
        this.textContent = container.style.display === 'block' ? '查看详情' : '编辑报告';
    });
</script>

一些需要注意的小细节 #

• 局部视图的命名惯例是下划线开头（比如_ReportDetails.cshtml），这是Razor的约定俗成，方便区分普通页面和局部视图
• 引用局部视图时，Razor会自动查找：先找当前页面所在目录，再找Pages/Shared目录，所以不用写完整路径
• 传递给局部视图的模型必须和局部视图声明的模型类型匹配，否则会抛出类型不匹配的错误
• 表单的Post请求会自动绑定到PageModel中标记了[BindProperty]的属性，所以要确保模型字段和表单输入框的asp-for属性对应上

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