如何在Blazor组件中调用ASP.NET Core MVC控制器并跳转至cshtml视图？

DevOps 小满

2026-7-18

解决Blazor组件跳转至ASP.NET Core MVC视图的问题

直接注入并调用控制器方法是错误的做法——控制器是处理HTTP请求的组件，你在Blazor里调用它的方法只是在内存中执行了代码，不会触发浏览器向服务器发起请求，自然无法加载MVC视图。正确的做法是使用Blazor的NavigationManager来导航到MVC控制器的路由地址。

步骤1：替换注入对象

把原来注入的UploadController换成NavigationManager：

@inject NavigationManager NavManager

步骤2：修改编辑方法逻辑

用NavigationManager的NavigateTo方法跳转到MVC控制器的对应Action路由：

<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="(()=>EditDoc(context.Item.ID))" />

@code {
    protected void EditDoc(int id)
    {
        // 替换成你的UploadController中DocumentEdit的实际路由
        // 示例路由格式：/控制器名/Action名/参数
        NavManager.NavigateTo($"/Upload/DocumentEdit/{id}");
    }
}

如果需要保持方法异步签名（推荐避免潜在的线程问题），可以改成：

protected async Task EditDoc(int id)
{
    NavManager.NavigateTo($"/Upload/DocumentEdit/{id}");
    await Task.CompletedTask;
}

步骤3：确认MVC控制器方法正确性

确保你的UploadController中的DocumentEdit方法能正确返回视图：

public class UploadController : Controller
{
    // 假设你有文档服务用于获取数据
    private readonly IDocumentService _documentService;

    public UploadController(IDocumentService documentService)
    {
        _documentService = documentService;
    }

    public IActionResult DocumentEdit(int id)
    {
        var doc = _documentService.GetDocumentById(id);
        // 确保存在对应的DocumentEdit.cshtml视图
        return View(doc);
    }
}