Question

我开始学习AngularJS，我试图在MVC应用程序中使用它。我有一个MVC ViewModel，其中包含我从数据库中填充的属性，并且我有一个绑定到此ViewModel的视图。因此，在正常的MVC视图中，我可以执行@Model.UserBaseViewModel.FirstName之类的操作。我想要做的是让我的数据来自ViewModel并通过ViewModel保存，但我希望AngularJS能够像编辑和显示这样的数据：

CODE

app.controller('ConsultantPersonalInformationController', function($scope, $filter, $http) {
    $scope.user = {
        id: 1,
        firstName: @Model.UserBaseViewModel.FirstName,
        lastName: @Model.UserBaseViewModel.LastName
    };

    //other code is here
});

我不确定是否有办法做到这一点。 AngularJS是否需要获取并保存正在显示的数据，或者我是否可以使用MVC ViewModel属性。

Answer 1

如你所料，这不是解决问题的方法。

AngularJS有一个SPA架构，这意味着您只需加载第一页，然后切换状态而无需转到服务器（除非在需要时获取模板HTML，或使用ajax请求明确指定）。编写firstName: @Model.UserBaseViewModel.FirstName没有任何意义，因为在将页面下载到客户端之前在服务器端评估@Model..行，并且由于您不断地切换状态（或者您可以，无论如何）数据是不可用。

您需要切换到RESTful状态，将请求发送到返回所需数据的服务器，然后填充该数据。所以，让我们说在进入州A后你需要去获取user数据，你的代码类似于：

app.controller('ConsultantPersonalInformationController', function($scope, $filter, $http, userService) {

    userService.getUserData().then(function(res) { 
        $scope.user = {
            id: 1,
            firstName: res.FirstName,
            lastName: res.LastName
        };
    }

    //other code is here
});

getUserData是一个异步操作，它将返回一个promise（读更多here），一旦准备就绪，你将在res变量中获得服务器返回的数据，这是回调功能

Answer 2

首先需要将MVC模型传递给页面并将其插入JS包装器中。然后，您可以在控制器中引用它。只需记住在控制器范围内的页面中包含JS包装器。这是一个简单的例子

从MVC控制器创建一些数据并将其作为模型传递给页面

public ViewResult Index()
        {
            object model = bootStrapData();
            return View("Index", model);
        }

private string bootStrapData()
        {
            string someObject = string.Empty;
            var c = //dosomething
            someObject= c.ToString();

            //even though one value we will follow the Json pattern and camelCase the return
            var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() };
            return JsonConvert.SerializeObject(isReportWriter, Formatting.None, settings);
        }

在视图中将模型设置为javascript变量

<!-- Bootstrapping controller from ASP.MVC Controller-->
<script type="text/javascript">
    app.factory('bootStrappedData', function() {
        return   { someObject: @Html.Raw(Model) };
    });
</script>

然后在您的控制器中，您可以设置对$scoped对象

的引用

//bootstrapping from MVC controller
    $scope.myObject = (bootStrappedData.someObject === "True");

在这里，我明确地获得了一个布尔值来使用ng-show或ng-hide但你可以传入一个字符串或任何其他对象（如果你想要的话）

最后记得在您的控制器中设置您在页面中创建的服务的依赖关系，否则它将无法定义

app.controller('myController', ['$scope', 'bootStrappedData' function(,scope, bootStrappedData)
...
]);

Answer 3

谢谢大家。我现在意识到，我不能通过设计混合MVC和AngularJS。在我的情况下，我可以使用MVC而不是AngularJS，但我想要充分利用两者并开始学习AngularJS，所以这就是我所做的。在MVC方面，我填充了我的ViewModel并为该ViewModel创建了一个强类型视图。在视图中，我引用了我的ViewModel：

@model Project_X_01202015_Web.ViewModel.ConsultantViewModel

比我正常创建我的AngularJS部分，除了这个：

$ scope.user = { id：1， isVerifiedUser：'@ Model.UserBaseViewModel.IsVerifiedUser'， firstName：'@ Model.UserBaseViewModel.FirstName'， middleName：'@ Model.UserBaseViewModel.MiddleName'， lastName：'@ Model.UserBaseViewModel.LastName'，电子邮件：'@ Model.UserBaseViewModel.Email'，地址：'@ Model.UserBaseViewModel.Address'， address1：'@ Model.UserBaseViewModel.Address1'， phoneNumber：'@ Model.UserBaseViewModel.PhoneNumber'， cell：'@ Model.UserBaseViewModel.PhoneNumber1'， city：'@ Model.UserBaseViewModel.CityName'， postalCode：'@ Model.UserBaseViewModel.PostalCode'， state：'@ Model.UserBaseViewModel.StateName' };

我可以在视图中更改$ scope.user中的属性值，当我需要更新从数据库填充的ViewModel对象时，我必须首先使用值更新数据库，然后重新填充我的ViewModel并将其返回到视图或只更新当前的ViewModel实例并刷新页面。但是，我没有刷新页面，而是更新视图并向MVC控制器发送调用以更新数据库。这种方式更新视图，每当用户刷新页面时，实际数据都是从数据库中呈现的，UI上的信息不会改变我可以像这样更新$ scope.user值：$scope.user.city = "Huntsville";当我需要将任何信息发送回MVC控制器时，我做了这个：url: '/Consultant/SaveConsultantInformation', async: 'false', type: 'POST', dataType: 'json', data: { user: $scope.user },在我的帖子中。我确实遇到了AngularJs post / get的一些问题，并且无法从成功更新$ scope.user值：post / get和ng-hide / ng-show的函数（结果）{}更多涉及基本用法比简单的$（'＃verifyMeButton'）。hide（）;但我为此做了一个非AngularJS解决方法。总而言之，我认为AngularJS对于在UI中出行非常有用，我将继续使用它。

将AngularJS绑定到MVC ViewModel属性

3 个答案: