Разбор JSON из C # в AngularJS - PullRequest
0 голосов
/ 09 мая 2018

У меня есть массив имен файлов:

[HttpPost]
    public JsonResult GetJSONFilesList()
    {
        string[] filesArray = Directory.GetFiles("/UploadedFiles/");
        for (int i = 0; i < filesArray.Length; i++)
        {
            filesArray[i] = Path.GetFileName(filesArray[i]);
        }

        return Json(filesArray);
    }

Мне нужно это в AngularJS как список объектов, чтобы я мог повторить его и применить фильтры. Я не могу понять, как получить JSON из контроллера MVC в AngularJS.

Я попробовал следующее, чтобы сделать его видимым для углового захвата, но я не знаю, как заставить ng-init увидеть функцию, возвращающую список. Ошибка в «SerializeObject (GetJSONFilesList ())», говоря, что он не существует в текущем контексте.

<div ng-controller="MyController" data-ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(GetJSONFilesList()),
         @Newtonsoft.Json.JsonConvert.SerializeObject(Model.Done))" ng-cloak>
        </div>

EDIT: Я пытался использовать http.get.

Тестовый:

alert('page load'); 
$scope.hello = 'hello';   

$http.get('http://rest-service.guides.spring.io/greeting').
        then(function (response) {
            $scope.greeting = response.data;
            alert($scope.greeting);
        });

 alert($scope.hello);

Оповещение в http.get никогда не срабатывает, однако другие оповещения срабатывают.

Тест два:

$http({
        url: '/Home/testHello',
        method: 'GET'
    }).success(function (data, status, headers, config) {
        $scope.hello = data;
        alert('hi');
        });




[HttpPost]
        public string testHello()
        {
            return "hello world"; 
        }

Это приводит к разрыву угла и ничего в .js не работает.

Тест три

    alert('page load'); 
    $scope.hello = 'hello';  
    $scope.GetJSONFilesList = function () {
        $http.get('/Home/testHello')
            .success(function (result) {
                $scope.availableFiles = result;

                alert('success');
            })
            .error(function (data) {
                console.log(data);
                alert('error');
            });
        alert('hi');
    };
alert($scope.hello);

[HttpPost]
            public string testHello()
            {
                return "hello world"; 
            }

Ничего не предупреждает внутри, другие оповещения работают.

Исправлено:

После некоторого поиска в Google я обнаружил, что использование .success и .error устарело и что .then следует использовать. Таким образом, с помощью .then это привело к тому, что C # был вызван с помощью отладки.

Затем, после использования console.log для возвращаемого значения, обнаружил, что для возврата чего-либо мне нужно было вернуть значение из C #, используя «return Json (myValue, JsonRequestBehavior.AllowGet);»

И, просмотрев объект в консоли в Chrome с помощью console.log, я увидел, что мои значения находятся в части данных возвращаемого объекта.

Он был сохранен в данных в виде массива (когда я передавал массив).

Затем я мог бы получить данные оттуда, назначив возвращаемое значение value.data в область видимости, и мог бы вызвать это в представлении {{result [1]}} и т. Д.

return Json(filesArray, JsonRequestBehavior.AllowGet);

$scope.fileList;
    $http.get("/Home/GetFileList").then(function (result) {
        console.log(result)
        $scope.fileList = result.data;
    })

Ответы [ 3 ]

0 голосов
/ 09 мая 2018

Представьте, что вы делите свой интерфейс на три слоя (MVC или MVVM), что вы хотите.

Когда вам нужна информация с сервера, рекомендуется разделить логику, которая делает запрос, и логику, которая манипулирует данными.

Подробнее о том, как сделать запрос, читайте о REST APIS в Использование веб-службы RESTful с AngularJS .

Обычно один из уровней требует использования сервисов, и вы можете иметь свои контроллеры и ваши сервисы (место, где вы получаете необработанные данные с сервера и делаете запрос. Для этого вам нужно использовать $ http сервис от angularjs.

$ http: служба $ http - это базовая служба AngularJS, которая облегчает связь с удаленными HTTP-серверами через объект браузера XMLHttpRequest или через JSONP.

Так что, в основном, он показывает, как делать запросы на получение, публикацию и размещение. Один пример из документации:

// Simple GET request example:
 $http({
  method: 'GET',
 url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Обратите внимание на URL, потому что есть место, где вы позволяете вашему запросу узнать, какой метод будет применен на сервере для выполнения действия. Если ваш запрос выполнен успешно, вы можете использовать параметр под названием response. Оттуда вы можете делать все, что хотите. Если вы решите сделать этот запрос частью вашего контроллера, вы можете назначить его непосредственно переменной в вашей области видимости. Обратите внимание, если вам нужно сериализовать данные. Что-то вроде

$scope.myResponseName = response.name ; 

Первая ссылка на документацию сверху показывает этот пример, который делает именно то, что я вам говорю.

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
   $http.get('http://rest-service.guides.spring.io/greeting').
       then(function(response) {
        $scope.greeting = response.data;
       });
  });

После всего вышеперечисленного обратите внимание на то, что вы хотите отобразить. Собираетесь ли вы отображать элементы массива объектов? Использование в вашем HTML директивы ng-repeat. Вы собираетесь отображать только переменную (без массива или объекта), тогда вам нужно использовать угловое выражение {{ }}

В итоге:

  1. Сделав HTTP-запрос, выберите правильный метод на сервере.
  2. Убедитесь, что вы отправляете JSON правильно и данные верны.
  3. Получить данные вашего ответа.
  4. Присвойте данные переменной в вашей области и при необходимости сериализуйте данные.
  5. Правильно отображать данные в зависимости от того, находятся ли они внутри массива, является ли он объектом или просто является переменной.

Я надеюсь, что объяснение имеет смысл, и проверьте документацию, если вам нужна дополнительная информация.

0 голосов
/ 11 мая 2018

в других ответах говорится, что для использования угловой функции .success не рекомендуется использовать .success и .error, вместо этого следует использовать.

Рабочий результат:

MVC:

public JsonResult GetFileList()
    {
        //form array here
        return Json(myArray, JsonRequestBehavior.AllowGet);
    }

Функция должна иметь тип JsonResult и возвращаемое значение Json, используя JsonRequestBehavior.AllowGet.

AngularJS:

$scope.fileList;
    $http.get("/Home/GetFileList").then(function (result) {
        console.log(result)
        $scope.fileList = result.data;
    })

Это в моем контроллере AJS, использующем .then вместо .success. Если вы используете console.log, результат, возвращаемый контроллером mvc, и просматриваете его в браузере, проверьте, что вы увидите объект с большим количеством другой информации, а значения, которые вы хотите, находятся в разделе .data объекта.

Так что для доступа к значениям вам нужно сделать result.data. В моем случае это дает мне и массив. Я назначаю это в область. Затем, на мой взгляд, я могу получить доступ к значениям, выполнив {{fileList [1]}} и т. Д. Это также можно использовать в ng-repeat, например:

<div ng-repeat="file in fileList">                        
                    {{fileList[$index]}}
</div>

Доступ к каждому значению в массиве в повторе можно получить с помощью $ index, который представляет собой номер повтора, начинающийся с 0.

0 голосов
/ 09 мая 2018

Вы можете построить свою модель представления так, чтобы она содержала данные, которые вы хотели бы сериализовать, а затем передать их в angularJS в вашем представлении следующим образом:

<div ng-controller="MyController" data-ng-init="init(@JsonConvert.SerializeObject(myArrayData),
     @Newtonsoft.Json.JsonConvert.SerializeObject(Model.Done))" ng-cloak>

и затем в вашем угловом контроллере есть функция для получения данных следующим образом:

$scope.init = function (myArrayData) {
    //do something with data
  };

Выше предполагается, что вы пытаетесь передать данные из mvc в angularjs при загрузке страницы. Если вы пытаетесь поразить контроллер и вернуть данные в angularjs по какому-либо событию, например, по нажатию кнопки, вы можете написать функцию angularjs, аналогичную следующей (это будет асинхронный запрос):

app.controller('MyController', function ($scope, $http, $window) {

        $scope.ButtonClick = function () {
            var post = $http({
            method: "POST",
            url: "/SomeController/SomeAjaxMethod",
            dataType: 'json',
            data: { path: $scope.Path},
            headers: { "Content-Type": "application/json" }
        });

        post.success(function (data, status) {
            //do something with your data
        });

        post.error(function (data, status) {
            $window.alert(data.Message);
        });
    }
}

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

[HttpPost]
public JsonResult SomeAjaxMethod(string path)
{
    string[] filesArray = Directory.GetFiles(path);

    for (int i = 0; i < filesArray.Length; i++)
    {
        filesArray[i] = Path.GetFileName(filesArray[i]);
    }

    return Json(filesArray);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...