Связывание AngularJS с MVC Свойства ViewModel

Question

Я начинаю изучать AngularJS, и я пытаюсь использовать его в приложении MVC. У меня есть MVC ViewModel со свойствами, которые я заполнил из базы данных, и у меня есть представление, связанное с этой ViewModel. Поэтому в обычном MVC-представлении я могу сделать что-то вроде @Model.UserBaseViewModel.FirstName. То, что я пытаюсь сделать, это мои данные приходят приходят из ViewModel, а также быть сохранены через ViewModel, но я хочу AngularJS делать такие вещи, как редактирование и отображение данных, как это:

КОД

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

Спасибо всем. Теперь я понимаю, что я не могу, по дизайну, смешать MVC и AngularJS.В моем случае я могу просто использовать MVC, а не AngularJS, но я хотел получить лучшее из них и начать изучать AngularJS, так что это то, что я сделал. На стороне MVC я заполнил свою ViewModel и создал строго типизированный View для этой ViewModel. По мнению я ссылаюсь мои ViewModel как это:

@model Project_X_01202015_Web.ViewModel.ConsultantViewModel

чем я создал мои AngularJS часть, как обычно, за исключением этого:

$ scope.user = { id: 1, isVerifiedUser: '@ Model.UserBaseViewModel.IsVerifiedUser', firstName: '@ Model.UserBaseViewModel.FirstName', midd leName: '@ Model.UserBaseViewModel.MiddleName', LastName: '@ Model.UserBaseViewModel.LastName', электронная почта: @ Model.UserBaseViewModel.Email ', адрес: '@ Model.UserBaseViewModel.Address', address1: @ Model.UserBaseViewModel.Address1 ', PHONENUMBER: '@ Model.UserBaseViewModel.PhoneNumber', ячейки: '@ Model.UserBaseViewModel.PhoneNumber1', город: '@ Model.UserBaseViewModel.CityName', PostalCode: @ Model.UserBaseViewModel.PostalCode ', Состояние:' @ Model.UserBaseViewModel.StateName ' };

я могу изменить значение свойства в $ scope.user на представлении и, когда мне нужно обновить объект ViewModel, который заполняется из базы данных мне придется обновить свою базу данных со значениями первой и чем повторите мой ViewModel и верните его в представление или просто обновите текущий экземпляр ViewModel и обновите страницу. Но вместо обновления страницы то, что я сделал, обновляет представление и отправляет вызов контроллеру MVC для обновления базы данных. Этот способ обновляется, и всякий раз, когда пользователь обновляет фактические данные страницы, представленные из базы данных, информация об пользовательском интерфейсе не изменяется.
Я мог бы обновить значения $ scope.user следующим образом: $scope.user.city = "Huntsville";, и когда мне нужно было отправить любую информацию обратно на контроллер MVC, я сделал это: url: '/Consultant/SaveConsultantInformation', async: 'false', type: 'POST', dataType: 'json', data: { user: $scope.user }, в своем сообщении. У меня возникли некоторые проблемы с сообщением/get AngularJs и невозможностью обновить значение $ scope.user от успеха: функция (результат) {} сообщения post/get и ng-hide/ng-show больше задействована для базовое использование, чем простой $ ('# verifyMeButton'). hide(); но для этого я сделал обходной метод, не поддерживающий AngularJS. Из всего, что я думаю, AngularJS отлично подходит для общения в пользовательском интерфейсе, и я продолжу его использовать.

Answer 2

Как вы подозревали, это не способ снять это.

У AngularJS есть архитектура SPA, что означает, что вы загружаете первую страницу один раз, а затем переключаете состояния, не переходя на сервер (за исключением выборки HTML-шаблона, если это необходимо, или явно указывается с использованием запроса ajax). Написание firstName: @Model.UserBaseViewModel.FirstName не имеет смысла, так как строка @Model.. оценивается на стороне сервера до того, как страница будет загружена клиенту, и поскольку вы постоянно переключаете состояния (или можете, во всяком случае), данные не доступны.

Вам нужно переключиться в состояние RESTful, в котором вы отправляете запросы серверам, которые возвращают нужные вам данные, и затем вы заполняете эти данные. Итак, давайте говорить, что при входе в состояние А вы должны пойти и принести 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 операция асинхронная, которая будет возвращать обещание (далее here), и как только вы будете готовы, вы получите возвращаемые сервером данные в переменной res, которая является функцией обратного вызова.

Answer 3

Сначала вам необходимо передать модель 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); 
     } 

В вашем взгляде установить модель в яваскрипте переменной

<!-- 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) 
... 
]);