如何在独立JavaScript文件中引用分部视图传入的参数

你遇到的核心问题是独立JavaScript文件不会被Razor引擎解析，所以直接写@{ViewData.Eval("id")}只会被当作普通字符串，没法替换成你传入的实际ID值。下面给你几个实用的解决思路：

方法1：将编辑器实例挂载到全局window对象 #

在分部视图的script块里，把编辑器实例绑定到window上，这样独立JS就能直接访问到它：

<!-- 分部视图中的代码 -->
<div id="@ViewData.Eval("id")"></div>
<script type="text/javascript">
    // 用传入的ID作为window的属性名，挂载编辑器实例
    window['@ViewData.Eval("id")'] = new tui.Editor({ 
        el: document.querySelector('#@ViewData.Eval("id")')
    });
</script>

之后在你的独立JS文件里，就可以通过全局属性调用方法了：

// 独立JS文件中的代码
$.ajax({ 
    url: 'Home/Index', 
    success: function (data) {
        // 直接通过ID访问全局实例
        window.fieldcomments.importManager.eventManager.emit('command', 'AddImage');
        
        // 如果想做通用处理，也可以动态获取ID后访问
        // const targetEditorId = "fieldcomments"; // 可从页面元素读取
        // window[targetEditorId].importManager.eventManager.emit('command', 'AddImage');
    }
});

方法2：用页面隐藏元素存储编辑器ID，在JS中读取 #

在分部视图里添加一个隐藏元素存储当前编辑器的ID，让独立JS可以读取到这个值：

<!-- 分部视图中的代码 -->
<div id="@ViewData.Eval("id")"></div>
<!-- 隐藏元素存储编辑器ID -->
<input type="hidden" class="editor-target-id" value="@ViewData.Eval("id")" />
<script type="text/javascript">
    var @ViewData.Eval("id") = new tui.Editor({ 
        el: document.querySelector('#@ViewData.Eval("id")')
    });
</script>

然后在独立JS文件中读取ID，再访问对应的全局实例：

// 独立JS文件中的代码
$.ajax({ 
    url: 'Home/Index', 
    success: function (data) {
        // 获取目标编辑器的ID（如果有多个编辑器，要注意匹配对应元素）
        const editorId = document.querySelector('.editor-target-id').value;
        // 通过ID访问全局的编辑器实例
        window[editorId].importManager.eventManager.emit('command', 'AddImage');
    }
});

方法3：把JS逻辑封装成可接收参数的函数 #

在独立JS文件里定义一个接收编辑器实例（或ID）的函数，让分部视图调用时传入参数：

// 独立JS文件中的代码
function triggerEditorAddImage(editor) {
    editor.importManager.eventManager.emit('command', 'AddImage');
}

// 或者接收ID的版本
function triggerAddImageByEditorId(editorId) {
    window[editorId].importManager.eventManager.emit('command', 'AddImage');
}

然后在分部视图的script里，调用这个函数时传入对应的实例或ID：

<!-- 分部视图中的代码 -->
<script type="text/javascript">
    const currentEditor = new tui.Editor({ 
        el: document.querySelector('#@ViewData.Eval("id")')
    });
    
    // 可以直接在AJAX回调里调用函数（如果AJAX逻辑写在分部视图）
    // $.ajax({ url: 'Home/Index', success: function(data) { triggerEditorAddImage(currentEditor); } });
    
    // 也可以把ID传给独立JS的函数
    // $.ajax({ url: 'Home/Index', success: function(data) { triggerAddImageByEditorId('@ViewData.Eval("id")'); } });
</script>

注意事项 #

如果你的分部视图会被多次渲染（多个编辑器实例），一定要确保每个编辑器的ID唯一，并且隐藏元素、全局实例能和对应的编辑器正确关联，避免出现混淆。

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