MVC 5中如何给Partial View传参动态设置Markdown编辑器ID

没问题，这在MVC里其实很容易实现，咱们一步步来搞定：

1. 修改局部视图接收参数 #

首先，你的局部视图_MarkdownEditor.cshtml需要能接收你传入的ID参数。这里给你两种方案，一种适合快速上手，一种更规范健壮：

方案一：用动态模型快速实现 #

在局部视图的最顶部添加一行，声明接收动态参数：

@model dynamic

然后把原来的固定ID替换成动态值，同时加个默认值，防止没传参数时页面出错：

<div id="@(Model?.id ?? "field comments")"></div>

<script>
// 先把ID存到变量里，避免重复写
var editorId = "@(Model?.id ?? "field comments")";
var editor = new tui.Editor({ 
    el: document.querySelector(`#${editorId}`)
});
</script>

方案二：用强类型ViewModel更规范 #

如果想让代码更严谨，避免拼写错误，可以先创建一个简单的ViewModel类：

// 在项目的Models文件夹下新建MarkdownEditorViewModel.cs
public class MarkdownEditorViewModel
{
    // 设置默认ID，防止没传参数时出错
    public string Id { get; set; } = "field comments";
}

然后在局部视图顶部声明强类型模型：

@model YourProjectName.Models.MarkdownEditorViewModel

接着修改视图内容：

<div id="@Model.Id"></div>

<script>
var editor = new tui.Editor({ 
    el: document.querySelector(`#@Model.Id`)
});
</script>

2. 在主视图中传递参数调用局部视图 #

两种方案对应的主视图调用方式都很简单：

对应动态模型的调用： #

@Html.Partial("_MarkdownEditor", new { id = "executive comments" })

对应强类型ViewModel的调用： #

@Html.Partial("_MarkdownEditor", new MarkdownEditorViewModel { Id = "executive comments" })

重要提醒 #

要注意哦！HTML规范里ID属性不能包含空格，虽然浏览器可能勉强识别，但会带来兼容性问题和JS选择器的潜在bug。建议把ID改成下划线、短横线或者驼峰命名，比如：

@Html.Partial("_MarkdownEditor", new { id = "executive_comments" })

这样你的代码会更稳定，也符合标准规范~

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