C# nopCommerce：视图中如何向ViewComponent传递参数并校验？

一、向ViewComponent传递参数的两种方式 #

方式1：通过匿名对象直接传参 #

调用Component.InvokeAsync时，第二个参数传入匿名对象，属性名需和组件内InvokeAsync方法的参数名一一对应：

@await Component.InvokeAsync(typeof(TopMenuViewComponent), new { val = "HomeGrid" })

方式2：通过ViewData传递参数 #

和你之前用PartialAsync的逻辑一致，先在当前视图的ViewData中赋值，再调用组件：

@{
    ViewData["val"] = "HomeGrid";
}
@await Component.InvokeAsync(typeof(TopMenuViewComponent))

二、在TopMenuViewComponent中接收并预处理参数 #

在组件的后台类里，通过InvokeAsync方法的参数接收值，同时可以提前做参数校验：

public class TopMenuViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync(string val = null)
    {
        // 参数校验逻辑示例
        // 示例1：为空时设置默认值
        if (string.IsNullOrEmpty(val))
        {
            val = "DefaultValue";
        }
        // 示例2：校验是否为允许的有效值
        var allowedVals = new List<string> { "HomeGrid", "HomeList", "Admin" };
        if (!allowedVals.Contains(val))
        {
            val = "HomeGrid";
        }

        // 传递参数到视图：两种可选方式
        // 方式A：用ViewData传递
        ViewData["CurrentVal"] = val;
        // 方式B：用自定义ViewModel传递（推荐，类型更安全）
        // return View(new TopMenuVM { Val = val });

        return View();
    }

    // 可选：定义ViewModel类
    // public class TopMenuVM
    // {
    //     public string Val { get; set; }
    // }
}

三、在Default.cshtml中获取并校验参数 #

根据组件传递参数的方式，在视图里取值并可做二次校验：

情况1：通过ViewData获取 #

@{
    string currentVal = ViewData["CurrentVal"] as string;
    // 二次校验（可选，防止后台处理遗漏）
    if (string.IsNullOrEmpty(currentVal))
    {
        currentVal = "HomeGrid";
    }
}

<div>当前激活类型：@currentVal</div>

情况2：通过ViewModel获取（类型更安全） #

先在视图顶部声明模型：

@model YourNamespace.TopMenuViewComponent.TopMenuVM

然后直接使用模型属性，也可补充校验：

@{
    string currentVal = Model.Val;
    var allowedVals = new List<string> { "HomeGrid", "HomeList", "Admin" };
    if (!allowedVals.Contains(currentVal))
    {
        currentVal = "HomeGrid";
    }
}

<div>当前激活类型：@currentVal</div>

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