如何通过JQuery在MVC两个视图间传递Div内容？

首先明确核心前提：MVC的两个视图如果是不同请求的独立页面，前端jQuery无法直接跨页面操作DOM，需要通过存储或后端传递；如果是同一页面中的视图片段（比如局部视图），可以直接用前端DOM操作。

先修正你的代码错误 #

1. View2的span标签语法错误：
   原错误代码：

   <span=id="NameId">Employee Numbers</span>
   

   修正后：

   <span id="NameId">Employee Numbers</span>
   

2. 你的jQuery代码存在多处错误：

   • $("#Search) 缺少闭合引号，应为 $("#Search")
   • find('span:NameId') 选择器错误，ID选择器需用#，应为 find('#NameId')
   • appendTo 会移动DOM元素而非复制内容，不符合传递值的需求

情况1：两个视图在同一页面（局部视图场景） #

如果是同一页面加载的两个视图片段，直接用前端代码传递内容：

传递span文本内容到View1的div #

// 获取View2中span的文本
var empText = $('#NameId').text();
// 将文本设置到View1的每个.custom1 div中（替换原有内容）
$('.custom1').text(empText);

// 如果需要追加内容而非替换，用append
// $('.custom1').append(empText);

传递整个#Search div的内容到View1 #

// 获取View2中#Search的HTML内容
var searchContent = $('#Search').html();
// 将内容设置到每个.custom1 div
$('.custom1').html(searchContent);

情况2：两个视图是独立页面（跨页面场景） #

这种场景下前端无法直接操作其他页面的DOM，可通过以下两种方式传递：

方法1：前端本地存储（LocalStorage/SessionStorage） #

在View2页面存储内容：

// 存储span文本到本地
var empText = $('#NameId').text();
localStorage.setItem('empContent', empText);

在View1页面读取并渲染：

// 读取存储的内容
var empContent = localStorage.getItem('empContent');
if (empContent) {
  $('.custom1').text(empContent);
  // 可选：读取后清除存储，避免重复显示
  localStorage.removeItem('empContent');
}

方法2：后端传递（TempData/Session） #

在View2对应的Controller方法中存储值：

public IActionResult View2()
{
    // 这里可以从模型或数据库获取实际内容
    string empText = "Employee Numbers";
    TempData["EmpContent"] = empText;
    return View();
}

在跳转到View1的Controller方法中读取并传递到视图：

public IActionResult View1()
{
    string empContent = TempData["EmpContent"]?.ToString();
    // 通过ViewBag传递到视图，也可以用ViewModel
    ViewBag.EmpContent = empContent;
    return View();
}

在View1中直接渲染内容：

<div id="emp-@item.Id" class="custom1">
    @ViewBag.EmpContent
</div>

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