如何通过MVC控制器在AngularJS控制器间传递数据

嘿，我来帮你解决这个AngularJS控制器之间传递数据的问题——因为你没有用Angular路由，而是依赖MVC路由跳转，核心卡点在于：页面跳转后Angular应用会重新初始化，之前的控制器、服务实例都会被销毁，没法直接用内存共享的方式传数据。下面给你几个适配这种场景的实用方案：

方法1：通过MVC Action中转数据到目标View #

这个思路是把数据从源Angular控制器传到MVC后端，再由后端把数据传递给目标View，最后让目标页面的Angular控制器从页面上读取数据。

步骤示例： #

1. 源Angular控制器：用$http把数据POST到MVC Action，完成后跳转到目标页面的MVC路由

app.controller('SourceCtrl', function($http, $window) {
  const dataToPass = { id: 123, name: 'Test Data' };
  
  $http.post('/Home/ReceiveData', dataToPass)
    .then(res => {
      // 跳转到带参数的目标MVC页面（简单数据可以直接拼查询参数）
      $window.location.href = `/Home/TargetView?id=${res.data.id}&name=${res.data.name}`;
    });
});

2. MVC Action：接收数据，处理后传递给目标View（也可以存在TempData暂存）

[HttpPost]
public ActionResult ReceiveData(MyDataModel model)
{
    // 把数据存到TempData（仅一次请求有效，适合临时传递）
    TempData["PassedData"] = model;
    
    // 也可以直接跳转带参数的Action
    return RedirectToAction("TargetView", new { id = model.Id, name = model.Name });
}

public ActionResult TargetView(int? id, string name)
{
    // 从查询参数或TempData取数据，传给View
    ViewBag.PassedData = new MyDataModel { Id = id, Name = name };
    // 或者从TempData读取：var data = TempData["PassedData"] as MyDataModel;
    
    return View();
}

3. 目标View：把数据渲染成全局变量，供Angular控制器读取

<!-- 在TargetView.cshtml中，将后端数据输出为全局变量 -->
<script>
  window.passedData = @Html.Raw(Json.Encode(ViewBag.PassedData));
</script>

<div ng-controller="TargetCtrl">
  <p>收到的ID：{{receivedData.id}}</p>
  <p>收到的名称：{{receivedData.name}}</p>
</div>

4. 目标Angular控制器：读取全局变量中的数据

app.controller('TargetCtrl', function($scope) {
  // 直接从全局变量获取传递过来的数据
  $scope.receivedData = window.passedData;
});

方法2：用浏览器本地存储（localStorage/sessionStorage）传递 #

如果数据不需要经过后端处理，或者需要在页面刷新后临时保留，可以用浏览器的本地存储来跨页面传数据。

步骤示例： #

1. 源Angular控制器：把数据存到sessionStorage，然后跳转页面

app.controller('SourceCtrl', function($window) {
  const dataToPass = { id: 123, name: 'Test Data' };
  // 存之前要转成JSON字符串
  $window.sessionStorage.setItem('passedData', JSON.stringify(dataToPass));
  
  // 跳转到目标MVC页面
  $window.location.href = '/Home/TargetView';
});

2. 目标Angular控制器：读取存储的数据，读完建议删除避免残留

app.controller('TargetCtrl', function($scope, $window) {
  const storedData = $window.sessionStorage.getItem('passedData');
  if (storedData) {
    $scope.receivedData = JSON.parse(storedData);
    // 读取后删除，防止下次进入页面还能读到旧数据
    $window.sessionStorage.removeItem('passedData');
  }
});

方法3：用MVC的Session/TempData暂存数据 #

如果数据需要在后端暂存（比如需要做权限校验、数据处理），可以用MVC的TempData或Session来中转：

• TempData：仅在一次HTTP请求中有效，跳转后自动清空（调用Keep()可以保留）
• Session：数据会一直保留到Session过期或手动清除

核心示例： #

1. 源Angular控制器POST数据到MVC Action，Action把数据存入TempData
2. 目标MVC Action从TempData取出数据，传给View
3. 目标View和控制器的操作和方法1一致，从页面读取数据

关于你提到的「无法返回MVC路由对应的View()」问题 #

如果你在MVC Action里用return View()但页面没正常渲染，大概率是因为你之前尝试把View返回给Angular的$http请求——这是AJAX请求，只会接收响应内容不会自动渲染页面。正确的做法是：让Angular用$window.location.href发起新的GET请求到目标Action，此时MVC Action里的return View()就能正常渲染页面了。另外也可以检查下目标View的路径是否正确（比如是否在Views/Home/TargetView.cshtml）、路由配置有没有问题。

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