none
Туториал по AngularJs + ASP.NET Mvc RRS feed

  • Общие обсуждения

  • Введение: Это простой туториал для начинающих с  Angular и Asp.NET Mvc. Плюс в том что пример от Начала до конца. Сам такого примера не нашел, пришлось не мало часов потратить что бы все заработало

    Приложение будет обычное TodoList, взят из самого же сайта Angular

    Начнем мы с класса Todo.cs

    Todo.cs:

    public class Todo //тут нечего добавить
        {
            public string text { get; set; }
            public bool done { get; set; }
            public string time { get; set; }
        }

    И наш контроллер

    HomeController.cs:

    Нам понадобиться три метода, первый что бы показать представление, вторая что бы добавить новые Todo объекты, и третья что бы получить список Todo объектов.

    [AllowAnonymous] //не объязателен
            public ActionResult ToDo()
            {
                return View(); 
            }
            [AllowAnonymous]
            [HttpPost]
            public ActionResult AddTodo() //добавление происходит путем ajax запроса на тот метод контроллера, 
            {
                using (var req = Request.InputStream) 
                {
                    req.Seek(0, System.IO.SeekOrigin.Begin); 
                    string json = new StreamReader(req).ReadToEnd(); /прочитали стрим
                    try
                    {
                        var input = JsonConvert.DeserializeObject<Todo[]>(json); //объект Todo с данными из json
                        using (var sw = new StreamWriter(ControllerContext.HttpContext.Server.MapPath("~/Addons/AngularJs/todo.json"))) //файл где будем хранить данные. Для простоты это файл, но можно и базу данных, сервис, xml, да что угодно
                        {
                            sw.Write(JsonConvert.SerializeObject(input, Formatting.Indented)); //записали файл
                        }
                    }
                    catch (Exception ex)
                    {
                        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                    }
                }
                return View("ToDo"); 
            }
            [AllowAnonymous]
            [HttpGet]
            public ActionResult GetTodos() //тут мы получим список Todo через аякс запрос
            {
                using (var stream = new StreamReader(ControllerContext.HttpContext.Server.MapPath("~/Addons/AngularJs/todo.json")))
                {
                    var text = stream.ReadToEnd();
                    var todos = Newtonsoft.Json.JsonConvert.DeserializeObject<Todo[]>(text);
                    return Json(todos, JsonRequestBehavior.AllowGet); // и наш объект Todo десериализованный
                }
            }

    Хранить наш json мы будем в файле, обычный *.txt или *.json файл (в этом примере todo.json)

    todo.json:

    [
      {
        "text": "Исправить все ошибки, сделать формы",
        "done": false,
        "time": "02/05/14 21:23"
      }
    ]

    Тут не много данных для начало, что бы удобно было тестировать. Файл соответствует классу Todo.cs

    Todo.cshtml:

    <!--код опущен для экономии места--> [ <a href="" data-ng-click="archive()">Сохранить состояние</a> ]<span data-ng-show="loading" style="color: red;">Пожалуйста подождите секунду</span> <form data-ng-submit="addTodo()"> <input type="text" data-ng-model="todoText" size="30" placeholder="Добавьте новое задание" style="width: 300px;"> <input class="button primary" type="submit" value="Добавить"> </form>

    todo.js:

    function TodoCtrl($scope, $http) { //$http объязателен для ajax, он и выполняет его
    $scope.todos = $http.get('/ru/Home/GetTodos') //наш контроллер с методом для получания списка
                .then(function (result) {
                    $scope.todos = result.data; //получили и передали в $scope.todos, тут нужно многое сказать про $scope, но все это уже есть в официальном справочнике на ихнем же сайте
                });
    $scope.addTodo = function () { //добавление новых записей
     var now = new Date(); //штамп времени. 
        $scope.todoTime = [[addZero(now.getDate()), addZero(now.getMonth() + 1), now.getFullYear().toString().substring(2, 4)].join("/"), [addZero(now.getHours()), addZero(now.getMinutes())].join(":")].join(" ");
        $scope.todos.push({ text: $scope.todoText, done: false, time: $scope.todoTime });
        $scope.todoText = ''; //освобождаем текущий текст, что бы исчезала из input
        };
    function addZero(num) { // эта функция не важна. она просто для времени и даты. превращает 1 в 01
        return (num >= 0 && num < 10) ? "0" + num : num + "";
    }
    $scope.loading = false;
    $scope.remaining = function () {
        var count = 0;
        angular.forEach($scope.todos, function (todo) {
            count += todo.done ? 0 : 1;
        });
        return count;
    };
    $scope.archive = function () {
        $scope.loading = true;
        var oldTodos = $scope.todos;
        $scope.todos = [];
        angular.forEach(oldTodos, function (todo) {
            if (!todo.done) {
                $scope.todos.push(todo); //запись всех объектов todo в массив и подготовка к отправке
            }
        });
        $http.post('/ru/Home/AddTodo', $scope.todos).success(function (response) { //аякс запрос для сохранения текуших todo, 
            $scope.loading = false; //индикатор загрузки
        });
    };
    };

    Ну вот и все.


    Еще один хороший демо пример




    if (Thread.Was == HelpFul) Mark.As(HelpFul); else if (Thread.Was == Answered) Mark.As(Answered); else Provide(More.Details);