RazorPage加载时Model返回null 模态弹窗无法正常加载视频如何解决？

报错根本原因 #

• 你的ViewMyClass方法仅返回布尔值，没有将拉取到的视频数据以模型对象形式返回
• IndexAsync方法调用完数据拉取逻辑后，没有将模型对象传入View()方法，导致视图渲染时@Model为null，访问ClassVideoUrl属性触发空引用异常
• 原有代码调用ViewMyClass时传入的参数rowId、section和方法定义的入参Id、ClassName不匹配，属于参数传值错误

修复步骤 #

1. 定义数据模型（如果还没有的话） #

首先创建包含ClassVideoUrl属性的模型类：

// 可放在Models文件夹下
public class VideoInfo
{
    public string ClassVideoUrl { get; set; }
    // 其他需要传递到视图的属性可以自行补充
}

2. 修改ViewMyClass方法返回模型对象 #

不要返回布尔值，直接返回拉取到的视频数据模型：

private async Task<VideoInfo> ViewMyClass(string Id,string ClassName)
{
     var videoInfo = new VideoInfo();
     // 原有从Web API拉取数据的逻辑，把取到的视频地址赋值给videoInfo.ClassVideoUrl
     return videoInfo;
}

3. 修改控制器IndexAsync方法传递模型到视图 #

public async Task<IActionResult> IndexAsync(string Id, string ClassName)
{
    // 修正参数传递错误，传入当前方法的Id和ClassName
    var videoInfo = await ViewMyClass(Id, ClassName);
    // 将模型对象传入View方法
    return View(videoInfo);
}

4. 视图绑定模型 #

在.cshtml文件最顶部添加模型绑定声明：

@model 你的项目命名空间.Models.VideoInfo

可选优化：解决浏览器自动播放限制 #

当前大部分浏览器会拦截非静音的自动播放行为，可调整前端代码避免播放失败：

$(document).ready(function () {
    $('#videoDialog').modal('show');
    var video = document.getElementById('myLectVideo');
    video.src = '@Model.ClassVideoUrl';
    // 开启静音保证自动播放可触发
    video.muted = true;
    video.play().catch(err => console.log("自动播放被浏览器拦截：", err));
});

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