如何在不使用模型时给局部视图传参并修改表单标签？（布局调用场景）

一、用ViewData传参 #

如果只是传递零散的简单参数，ViewData是最直接的方式：

布局文件里调用局部视图时，直接给ViewData赋值：

@{
    ViewData["DateLabel"] = "选择开始时间";
    ViewData["InputId"] = "startTimePicker";
    await Html.RenderPartialAsync("_DatePickerPartial");
}

也可以在调用时传入ViewDataDictionary对象，避免污染当前ViewData：

@{
    await Html.RenderPartialAsync("_DatePickerPartial", new ViewDataDictionary(ViewData)
    {
        ["DateLabel"] = "选择结束时间",
        ["InputId"] = "endTimePicker"
    });
}

局部视图里直接读取ViewData的值即可：

<div class="Date-picker">
    <label for="@ViewData["InputId"]">@ViewData["DateLabel"]</label>
    <input type="date" id="@ViewData["InputId"]" />
</div>

二、用强类型模型传参 #

如果需要传递的参数较多，或者想让代码更规范，建议用强类型模型：

先定义一个模型类：

public class DatePickerViewModel
{
    public string LabelText { get; set; }
    public string InputId { get; set; }
    public string Placeholder { get; set; }
    // 可根据需求添加更多参数，比如默认日期、是否禁用等
}

布局里实例化模型并传递给局部视图：

@{
    var pickerModel = new DatePickerViewModel
    {
        LabelText = "选择生日",
        InputId = "birthdayPicker",
        Placeholder = "请选择您的生日"
    };
    await Html.RenderPartialAsync("_DatePickerPartial", pickerModel);
}

局部视图顶部指定模型类型，直接通过Model访问参数：

@model DatePickerViewModel

<div class="Date-picker">
    <label for="@Model.InputId">@Model.LabelText</label>
    <input type="date" id="@Model.InputId" placeholder="@Model.Placeholder" />
</div>

三、用HTML标签助手实现（更简洁） #

如果想让调用方式更贴近原生HTML，可以自定义标签助手：

1. 创建标签助手类：

[HtmlTargetElement("date-picker")]
public class DatePickerTagHelper : TagHelper
{
    // 标签中用短横线分隔的属性，对应这里的驼峰命名参数
    public string LabelText { get; set; }
    public string InputId { get; set; }
    public string Placeholder { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        // 设置外层容器的标签和样式类
        output.TagName = "div";
        output.Attributes.Add("class", "Date-picker");

        // 拼接标签和输入框的HTML内容
        var labelHtml = $"<label for='{InputId}'>{LabelText}</label>";
        var inputHtml = $"<input type='date' id='{InputId}' placeholder='{Placeholder ?? ""}' />";

        output.Content.SetHtmlContent(labelHtml + inputHtml);
    }
}

2. 在_ViewImports.cshtml中添加标签助手引用（替换为你的项目程序集名称）：

@addTagHelper *, YourProjectName

3. 之后在布局或页面里直接用自定义标签传递参数：

<date-picker label-text="选择预约日期" input-id="appointmentPicker" placeholder="请选择预约时间"></date-picker>

另外，你之前写的@Html.RenderPartialAsync("_DatePickerPartial","passString parameter")存在局限性：第二个参数是模型对象，若只传字符串，局部视图需指定@model string才能接收，但这种方式仅支持单个参数，不适合多参数场景，因此更推荐上面几种方案。

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