如何在独立JS文件中引用传递给Partial View的参数？

这个问题我之前也碰到过——独立JavaScript文件没法直接访问Razor的服务器端变量，核心原因是JS文件不会被ASP.NET的视图引擎解析，所以你写在独立JS里的@ViewData.Eval("id")会被当作普通字符串，而不是服务器端替换后的编辑器ID值。下面给你几个可行的解决方案：

方案1：全局存储编辑器实例 #

在Partial View里把生成的编辑器实例挂载到全局对象上，用传入的ID作为键，这样独立JS就能通过ID找到对应的实例。

Partial View代码修改： #

<div id="@ViewData.Eval("id")">
</div>
<script type="text/javascript">
// 初始化全局存储容器（避免重复创建）
window.tuiEditorInstances = window.tuiEditorInstances || {};
// 创建编辑器实例
var editor = new tui.Editor({ el: document.querySelector('#@ViewData.Eval("id")') });
// 把实例存入全局容器，用ID作为键
window.tuiEditorInstances['@ViewData.Eval("id")'] = editor;
</script>

独立JS文件修改： #

首先你需要在触发上传的逻辑中获取到对应的编辑器ID（比如从触发元素的属性、或者上下文关联中拿到），然后从全局容器中取出实例：

function uploadImage(readerResult, editorId) {
  $.ajax({
    url: 'Home/Index',
    type: 'POST',
    dataType: 'text',
    data: { capture: readerResult },
    success: function (data) {
      // 从全局容器中获取对应ID的编辑器实例
      var editor = window.tuiEditorInstances[editorId];
      if (editor) {
        editor.importManager.eventManager.emit('command', 'AddImage', { 
          imageUrl: data, 
          altText: 'image' 
        });
      }
    }
  });
}

然后在Partial View里触发上传的地方（比如自定义上传按钮的点击事件），把当前的ID传给这个函数：

// 在Partial View的脚本中添加上传触发逻辑
document.querySelector('#@ViewData.Eval("id") .upload-btn').addEventListener('click', function() {
  // 这里是获取readerResult的逻辑，比如文件读取
  const reader = new FileReader();
  reader.onload = function(e) {
    // 调用独立JS的上传函数，传入当前编辑器ID
    uploadImage(e.target.result, '@ViewData.Eval("id")');
  };
  // 假设这里是获取文件对象的逻辑
  reader.readAsDataURL(file);
});

方案2：将编辑器实例绑定到DOM元素 #

把编辑器实例直接存在对应DOM元素的自定义属性中，这样可以通过DOM元素直接获取实例，不需要全局变量。

Partial View代码修改： #

<div id="@ViewData.Eval("id")" data-editor-id="@ViewData.Eval("id")">
  <button class="upload-btn">上传图片</button>
</div>
<script type="text/javascript">
var editor = new tui.Editor({ el: document.querySelector('#@ViewData.Eval("id")') });
// 把实例绑定到DOM元素的dataset属性上
document.querySelector('#@ViewData.Eval("id")').dataset.editorInstance = editor;
</script>

独立JS文件修改： #

通过事件委托找到触发上传的按钮，然后向上查找对应的编辑器容器，取出实例：

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('upload-btn')) {
    // 找到对应的编辑器容器
    const editorContainer = e.target.closest('[data-editor-id]');
    if (!editorContainer) return;
    
    // 从DOM元素中取出编辑器实例
    const editor = editorContainer.dataset.editorInstance;
    // 获取readerResult的逻辑（示例）
    const reader = new FileReader();
    reader.onload = function(resultEvent) {
      $.ajax({
        url: 'Home/Index',
        type: 'POST',
        dataType: 'text',
        data: { capture: resultEvent.target.result },
        success: function (data) {
          editor.importManager.eventManager.emit('command', 'AddImage', { 
            imageUrl: data, 
            altText: 'image' 
          });
        }
      });
    };
    // 假设这里是获取选中的文件对象
    const file = e.target.previousElementSibling.files[0];
    reader.readAsDataURL(file);
  }
});

方案3：将回调函数作为参数传递 #

在独立JS中定义一个接收编辑器实例的上传函数，然后在Partial View里直接调用这个函数并传入当前的编辑器实例。

独立JS文件定义： #

window.handleImageUpload = function(editor, readerResult) {
  $.ajax({
    url: 'Home/Index',
    type: 'POST',
    dataType: 'text',
    data: { capture: readerResult },
    success: function (data) {
      editor.importManager.eventManager.emit('command', 'AddImage', { 
        imageUrl: data, 
        altText: 'image' 
      });
    }
  });
};

Partial View代码修改： #

<div id="@ViewData.Eval("id")">
  <button class="upload-btn">上传图片</button>
</div>
<script type="text/javascript">
var editor = new tui.Editor({ el: document.querySelector('#@ViewData.Eval("id")') });
// 绑定上传按钮点击事件
document.querySelector('#@ViewData.Eval("id") .upload-btn').addEventListener('click', function() {
  const reader = new FileReader();
  reader.onload = function(e) {
    // 直接调用独立JS的函数，传入当前编辑器实例
    window.handleImageUpload(editor, e.target.result);
  };
  const file = e.target.previousElementSibling.files[0];
  reader.readAsDataURL(file);
});
</script>

为什么你之前的尝试无效？ #

独立的JavaScript文件是直接发送给浏览器执行的，不会经过ASP.NET的Razor视图引擎解析，所以文件中的@ViewData.Eval("id")不会被替换成服务器端的ID值，而是被当作普通的字符串处理，自然无法找到对应的编辑器实例。

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