Размещено на http://www.allbest.ru/

Оглавление

Введение

1. Техническое задание

1.1 Характеристики предметной области

1.1.1 Основные понятия предметной области

1.1.2 Описание предметной области

1.2 Цели и задачи системы

1.2.1 Цели системы

1.2.2 Задачи системы

1.3 Требования к системе

1.3.1 Функциональные требования

1.3.2 Нефункциональные требования

1.4 Характеристика пользователей

1.5 Диаграмма вариантов использования

1.6 Функции системы

2. Управление проектом

2.1 Проектная команда

2.2 Система управления проектом

2.2.1 Краткие теоретические сведения

2.2.2 Redmine

2.3 Планирование проекта

2.3.1 Методология разработки

2.3.2 Первый спринт

2.3.3 Второй спринт

2.3.4 Третий спринт

2.3.5 Четвертый спринт

2.3.6 График Ганта

3. Макет сайта

3.1 Платформа разработки

3.2 Карта сайта

3.3 Верстка

4. Реализация логики работы системы

4.1 Использование web-сервисов

Заключение

Список источников

Приложение



Введение

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

Текущий уровень развития сферы IT позволяет пользователям иметь такую записную книжку практически в любом из современных электронных устройств. Электронная записная книжка не занимает места, количество заметок практически ничем не ограничено, а поиск необходимой заметки занимает считанные секунды.



1. Техническое задание

1.1 Характеристики предметной области

1.1.1 Основные понятия предметной области

Онлайн записная книжка - интернет-сервис, представляющий собой программный продукт, работающий прямо через интернет, позволяющий вести заметки и работать из любой точки мира.

Web-сервис - (от англ. web-service, синоним - онлайновая служба). Под веб-сервисами понимают услуги, которые предоставляются в Интернете с помощью специальных программ.

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

1.1.2 Описание предметной области

Приложения формата записной книжки помогают избавиться от поиска ручки, ровной поверхности, чтобы сделать какую-либо запись, а также пролистывания страниц в поисках нужной даты. Однако у бумажных органайзеров остается одно преимущество, перед их программной версией, - они всегда под рукой. Однако с развитием ITсферы, это больше не является проблемой, так как телефон с современным браузером имеется практически у каждого.



1.2 Цели и задачи системы

1.2.1 Цели системы

Основной целью разработки системы является создание простой в использовании онлайн записной книжки, позволяющей вести записи, хранить файлы и создавать напоминания.

онлайн записной книжка файл

1.2.2 Задачи системы

К основным задачам системы можно отнести:

· Предоставление пользователю удобного и простого в использовании интерфейса для ведения записей и хранения файлов;

· Доступ к записной книжке с любого устройства, имеющего выход в сеть Интернет и современный браузер;

· Возможность загрузки персональных файлов, их хранение и получение доступа к ним в любой требуемый момент времени;

· Уведомление пользователя о предстоящих событиях.

1.3 Требования к системе

1.3.1 Функциональные требования

К функциональным относятся:

· создание заметок;

· прикрепление к определённой дате и определённому времени;

· прикрепление файлов к заметкам;

· напоминание о заметке через push-уведомление;

· список заметок и напоминаний;

· хранение прикреплённых файлов.



1.3.2 Нефункциональные требования

К нефункциональным требованиям относятся:

· дружелюбный интерфейс;

· обеспечение безопасности данных;

· минимизация времени операций.

1.4 Характеристика пользователей

Приложение ориентировано на использование людьми, которым необходима запись важных заметок и напоминание о предстоящих событиях, а также хранение своих файл.

Система предусматривает наличие одного вида пользователей:

· Пользователь

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

1.5 Диаграмма вариантов использования

Диаграмма вариантов использования представлена на рисунке 1.

Рисунок 1. Диаграмма вариантов использования



1.6 Функции системы

Система представляет из себя одностраничный web-сайт с несколькими вкладками. Каждая из вкладок предоставляет пользователю определенный функционал: Вкладка «Заметки»:

o Отображение ранее созданных пользователем заметок и их заголовков;

o Создание заметок внутри специальной формы, позволяющей создать саму заметку и ее заголовок;

o Возможность редактирование и удаления уже созданных заметок.

· Вкладка «Напоминания»:

o Отображение созданных ранее напоминаний и сроков выполнения; Создание напоминаний.

· Вкладка «Теги»:

o Отображение ранее созданных тегов;

o Добавление тегов;

o Удаление тегов.

· Вкладка «Мои файлы»:

o Отображение ранее загруженных файлов пользователя;

o Загрузка новых файлов на сервер;

o Удаление ранее загруженных файлов.

Отдельно необходимо выделить страницу авторизации пользователей. Находясь на ней, пользователь получает возможность либо авторизоваться на сервере и получить доступ ко всем своим ранее созданным заметкам, напоминаниям и т.д., либо зарегистрироваться. Для регистрации пользователю необходимо иметь почтовый ящик, а также заполнить всю необходимую информацию формы регистрации (имя пользователя и пароль). После регистрации пользователь получает возможность использовать все функции системы.



2. Управление проектом

2.1 Проектная команда

Проектная команда состоит из 3 человек:

· Абдумуминов У.А.

· Закурнаев А.В.

· Логунов Н.М.

Каждый из членов команды имеет свою роль:

· Абдумуминов У.А. - ведущий разработчик/лидер проекта. Разработка;

· Закурнаев А.В. - разработчик /аналитик. Аналитик;

· Логунов Н.М. - разработчик

2.2 Система управления проектом

2.2.1 Краткие теоретические сведения

Redmine --открытое серверное веб-приложение для управления проектами и задачами (в том числе для отслеживания ошибок). Redmine написан на Ruby и представляет собой приложение на основе широко известного веб-фреймворка Rubyon Rails. Распространяется согласно GNU General Public License.

Данный продукт предоставляет следующие возможности:

· ведение нескольких проектов;

· гибкая система доступа, основанная на ролях;

· система отслеживания ошибок;

· диаграммы Ганта и календарь;

· ведение новостей проекта, документов и управление файлами;

· оповещение об изменениях с помощью RSS-потоков и электронной почты;

· вики для каждого проекта;

· настраиваемые произвольные поля для инцидентов, временных затрат, проектов и пользователей;

· лёгкая интеграция с системами управления версиями(SVN,CVS, Git, Mercurial, Bazaarи Darcs);

· поддержка множественной аутентификации LDAP;

· возможность самостоятельной регистрации новых пользователей;

· многоязычный интерфейс (в том числе русский);

· поддержка СУБД MySQL, Microsoft SQL Server, PostgreSQL, SQLite, Oracle.

2.2.2 Redmine

Адрес веб-сервера Redmine: http://web.albuspavo.ru/redmine

На рисунке 2 представлена домашняя страница проекта

Рисунок 2. Домашняя страница проекта

На рисунке 3 представлен список задач разрабатываемого проекта.

Рисунок 3. Список задач разрабатываемого проекта



2.3 Планирование проекта

2.3.1 Методология разработки

В процессе разработки используется методология SCRUM. Планируется 4 спринта длиной 2-3 недели. По ходу спринта будут выполнятся все поставленные задачи.

2.3.2 Первый спринт

Основной задачей первого спринта является разработка технического задания для проекта. Этот этап включает в себя следующие подзадачи:

· изучение предметной области;

· определение функционала разрабатываемого приложения;

· проектирование интерфейса;

2.3.3 Второй спринт

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

· реализация функций, связанный с вкладкой «Заметки»:

o отображение ранее созданных пользователем заметок и их заголовков;

o создание заметок внутри специальной формы, позволяющей создать саму заметку и ее заголовок;

o возможность редактирование и удаления уже созданных заметок.

2.3.4 Третий спринт

К задачам третьего спринта относится реализация дополнительного функционала приложения:

· реализация функций, связанный с вкладкой «Напоминания»:

o Отображение созданных ранее напоминаний и сроков выполнения;

o Создание напоминаний.

· Напоминание о заметке через push-уведомление

· Вкладка «Теги»:

o Отображение ранее созданных тегов;

o Добавление тегов;

o Удаление тегов.

2.3.5 Четвертый спринт

Четвертый спринт является заключительным. Он включает в себя доработку некоторых функций приложения, а также отладка и тестирование полученного в ходе выполнения спринтов приложения.

Суммируя вышесказанное, четвертый спринт включает в себя:

· реализация функций, связанный с вкладкой «Мои файлы»:

o Отображение ранее загруженных файлов пользователя;

o Загрузка новых файлов на сервер;

o Удаление ранее загруженных файлов.

· отладка окончательной версии приложения, устранение недостатков;

· тестирование полученного приложения.



3. Макет сайта

3.1 Платформа разработки

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

· Visual Studio 2013 Update 5;

· Atom;

Отладка производилась в следующих браузерах:

· Google Chrome 47;

· Yandex.Browser;

· Mozilla Firefox;

Были использованы следующие библиотеки:

· Jquery 1.9;

· KnockoutJS;

· Bootstrap 3.

3.2 Карта сайта

Карта сайта имеет следующую структуру:

1. Главная страница (рисунок 3).



Рисунок 3. Главная страница сайта

2. API.

3. Регистрация

4. Авторизация

5. Приложение:

a. Заметки (рисунок 4).

Рисунок 4. Заметки

b. Напоминания (рисунок 5).



Рисунок 5. Напоминания

c. Теги (рисунок 6).

Рисунок 6. Теги.

d. Файлы (рисунок 7).

Рисунок 7. Файлы



4. Реализация логики работы системы

4.1 Использование web-сервисов

Логика работы системы реализовано с использованием библиотеки KnockoutJS, взаимодействие с REST-сервисом посредством AJAX запросов с использованием библиотеки jQuery.

Исходный код представлен в приложении.



Заключение

В ходе выполнения курсовой работы был разработан web-сервис «Записная книжка», позволяющий его пользователям добавлять различные заметки, события, получать уведомления, хранить различные файлы и т.д.

В рамках индивидуального задания был разработан front-end web-сервиса «Записная книжка».

Были приобретены практические навыки разработки web-систем.



Список источников

1. Электронная энциклопедия Википедия [Электронный ресурс]: RedmineURL: https://ru.wikipedia.org/wiki/Redmine (дата обращения 06.01.2016).

2. Современный учебник JavaScript [Электронный ресурс]: URL: https://learn.javascript.ru (дата обращения 07.01.2016).

3. Фрайн Б. Разработка сайтов для любых браузеров и устройств. Пер. с англ. - СПб.: Питер, 2013. - 304 с.

4. Джереми К. HTML5 для веб-дизайнеров. Пер. с англ. - М.:Манн, Иванов и Фербер, 2013. - 450 с.

5. Сидерхолм Д. CSS3 для веб-дизайнеров. Пер. с англ. - М.:Манн, Иванов и Фербер, 2013. - 324 с.



Приложение. Исходный текст программы

<!DOCTYPEhtml>

<htmllang="ru">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta charset="utf-8" />

<title>Application - приложение ASP.NET</title>

<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="/Content/bootstrap.min.css" rel="stylesheet" />

<link href="/Content/jasny-bootstrap.min.css" rel="stylesheet" />

<link href="/Content/Site.css" rel="stylesheet" />

<script src="/Scripts/modernizr-2.6.2.js"></script>

<script src="/Scripts/jquery-1.10.2.js"></script>

<script src="/Scripts/bootstrap.js"></script>

<script src="/Scripts/jasny-bootstrap.min.js"></script>

<script src="/Scripts/respond.js"></script>

</head>

<body>

<div class="navbarnavbar-inverse navbar-fixed-top">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="/">Noter</a>

</div>

<div class="navbar-collapse collapse">

<ul class="navnavbar-nav">

<li><ahref="/">Домашняя страница</a></li>

<li><a href="/Help">API</a></li>

</ul>

<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post">

<input name="__RequestVerificationToken" type="hidden" value="UopJ_zxl_Ash_BEr3Uv55FXPxd4aFcYTS0eBG9f_GEMhnNnRTG7zYr5joaJbugNKLxbS1aqBJNv3mTvw-jBPPFwqN8RFmErRS7aPx77bS7LdYHp6dMC88GuHyufuXq7RnwNqTNalvUNxtOOmH6pq5Q2" /><ul class="navnavbar-navnavbar-right">

<li>

<a href="/Manage" title="Manage">Здравствуйте, umed48@gmail.com!</a>

</li>

<li><a href="javascript:sessionStorage.removeItem('accessToken');$('#logoutForm').submit();">Выйти</a></li>

</ul>

</form>

</div>

</div>

</div>

<div class="container-fluid body-content">

<div class="col-lg-3">

<div class="navmenunavmenu-default @*navmenu-fixed-left offcanvas-sm*@" role="navigation">

<a class="navmenu-brand" href="#">Brand</a>

<ul class="navnavmenu-nav @*nav-pills nav-stacked*@">

<li class="active">

<a data-toggle="pill" href="#notes">

<span class="glyphiconglyphicon-list-alt"></span>Заметки

<span class="badge pull-right" data-bind="text: $root.noteViewModel.notes().length"></span>

</a>

</li>

<li>

<a data-toggle="pill" href="#notifications">

<span class="glyphiconglyphicon-bell"></span>Напоминания

<span class="badge pull-right" data-bind="text: $root.noteViewModel.notifications().length">4</span>

</a>

</li>

<li>

<a data-toggle="pill" href="#tags">

<span class="glyphiconglyphicon-tags"></span>Теги

<span class="badge pull-right" data-bind="text: $root.tagViewModel.tags().length"></span>

</a>

</li>

<li>

<a data-toggle="pill" href="#files">

<span class="glyphiconglyphicon-folder-open"></span>Моифайлы

<span class="badge pull-right" data-bind="text: $root.fileViewModel.files().length"></span>

</a>

</li>

</ul>

</div>

</div>

<div class="col-lg-9">

<div class="tab-content" style="padding-top:20px;">

<div id="notes" class="tab-pane fade in active">

<div class="btn-toolbar">

<div class="btn-group">

<button class="btnbtn-default" data-bind="click: $root.noteViewModel.showAddForm"><span class="glyphiconglyphicon-file"></span></button>

<button class="btnbtn-default">Удалитьвсё</button>

<button class="btnbtn-default"><span class="glyphiconglyphicon-refresh"></span></button>

</div>

<div class="pull-right">

<form class="form-inline">

<label>Фильтрпотегу: </label>

<select data-bind="options: $root.tagViewModel.tags, optionsCaption: 'Все', optionsText: 'name', optionsValue: 'id', value: $root.noteViewModel.filter" class="form-control"></select>

</form>

</div>

<hr />

<div data-bind="foreach: noteViewModel.filterNotes">

<section data-bind="click: $root.noteViewModel.show">

<div class="well">

<div class="btn-group pull-right">

<button class="btnbtn-smbtn-default" data-bind="click: $root.noteViewModel.showAddNotification, clickBubble: false"><span class="glyphiconglyphicon-bell" aria-hidden="true"></span></button>

<button class="btnbtn-smbtn-default" data-bind="click: $root.noteViewModel.showAddTag, clickBubble: false"><span class="glyphiconglyphicon-tag" aria-hidden="true"></span></button>

<button class="btnbtn-smbtn-default" data-bind="click: $root.noteViewModel.showEdit, clickBubble: false"><span class="glyphiconglyphicon-pencil" aria-hidden="true"></span></button>

<button class="btnbtn-smbtn-default" data-bind="click: $root.noteViewModel.remove, clickBubble: false"><span class="glyphiconglyphicon-remove" aria-hidden="true"></span></button>

</div>

<h3>

<span data-bind="text: title"></span><br />

<small><span data-bind="text: created"></span></small>

</h3>

<div data-bind="foreach: tags">

<span class="label label-default" data-bind="text: name, style: {backgoundColor: color}"></span>

</div>

</div>

<hr />

</section>

</div>

<div class="modal fade" id="noteShow">

<div class="modal-dialog modal-lg">

<div class="modal-content" data-bind="with: $root.noteViewModel.choosen">

<div class="modal-header">

<h4 class="modal-title"><span data-bind="text: title"></span></h4>

</div>

<div class="modal-body">

<p data-bind="html: content"></p>

</div>

<div class="modal-footer">

<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>

</div>

</div>

</div>

</div>

<link href="/Content/font-awesome.min.css" rel="stylesheet" />

<link href="/Scripts/summernote/summernote.css" rel="stylesheet" />

<script src="/Scripts/summernote/summernote.min.js"></script>

<div class="modal fade" id="noteAdd">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">Новаязаметка</h4>

<button class="close" data-dismiss="modal"></button>

</div>

<div class="modal-body">

<form data-bind="with: $root.noteViewModel.added">

<div class="form-group">

<label for="noteTitle">Заголовок</label>

<input class="form-control" id="noteTitle" placeholder="Заголовок" data-bind="value: title" />

</div>

<div class="form-group">

<label for="noteContent">Содержимое</label>

<div class="form-control" id="noteContent" placeholder="Содержимое..."></div>

</div>

</form>

</div>

<div class="modal-footer">

<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>

<button class="btnbtn-primary" data-bind="click: $root.noteViewModel.add">Сохранить</button>

</div>

</div>

</div>

</div>

<script>

$(document).ready(function () { $('#noteContent').summernote({ height: 300 }); });

</script>

<div class="modal fade" id="noteTagAdd">

<div class="modal-dialog">

<div class="modal-content" data-bind="with: $root.noteViewModel.choosen">

<div class="modal-header">

<h4 class="modal-title"><span data-bind="text: title"></span></h4>

</div>

<div class="modal-body">

<label>Фильтр по тегу: </label>

<select data-bind="

options: $root.tagViewModel.tags,

optionsCaption: 'Все',

optionsText: 'name',

optionsValue: 'id',

value: $root.noteViewModel.choosenTag" class="form-control"></select>

</div>

<div class="modal-footer">

<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>

<button class="btnbtn-primary" data-bind="click: $root.noteViewModel.addTag">Добавить</button>

</div>

</div>

</div>

</div>

<script src="/Scripts/moment.min.js"></script>

<script src="/Scripts/bootstrap-datetimepicker.min.js"></script>

<div class="modal fade" id="noteNotificationAdd">

<div class="modal-dialog">

<div class="modal-content" data-bind="with: $root.noteViewModel.choosen">

<div class="modal-header">

<h4 class="modal-title"><span data-bind="text: title"></span></h4>

</div>

<div class="modal-body">

<label>Напоминание: </label>

<div class="form-group">

<div class="input-group date" id="myDateTime">

<input type="text" class="form-control" />

<span class="input-group-addon">

<span class="glyphiconglyphicon-calendar"></span>

</span>

</div>

</div>

</div>

<div class="modal-footer">

<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>

<button class="btnbtn-primary" data-bind="click: $root.noteViewModel.addNotification">Добавить</button>

</div>

</div>

</div>

</div>

<link href="/Content/font-awesome.min.css" rel="stylesheet" />

<link href="/Scripts/summernote/summernote.css" rel="stylesheet" />

<script src="/Scripts/summernote/summernote.min.js"></script>

<div class="modal fade" id="noteEdit">

<div class="modal-dialog modal-lg">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">Новаязаметка</h4>

<button class="close" data-dismiss="modal"></button>

</div>

<div class="modal-body">

<form data-bind="with: $root.noteViewModel.edited">

<div class="form-group">

<label for="noteTitleEdit">Заголовок</label>

<input class="form-control" id="noteTitleEdit" placeholder="Заголовок" data-bind="value: title" />

</div>

<div class="form-group">

<label for="noteContentEdit">Содержимое</label>

<div class="form-control" id="noteContentEdit" placeholder="Содержимое..." data-bind="html: content"></div>

</div>

</form>

</div>

<div class="modal-footer">

<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>

<button class="btnbtn-primary" data-bind="click: $root.noteViewModel.edit">Добавить</button>

</div>

</div>

</div>

</div>

<script>

$(document).ready(function () {

$('#noteContentEdit').summernote(

{

height: 300

});

});

</script>

</div>

<div id="notifications" class="tab-pane fade">

<table class="table table-hover">

<thead>

<tr>

<th>Название</th>

<th>Время напоминания</th>

</tr>

</thead>

<tbody data-bind="foreach: $root.noteViewModel.notifications">

<tr>

<td data-bind="text: title"></td>

<td data-bind="text: created"></td>

</tr>

</tbody>

</table>

</div>

<div id="calendar" class="tab-pane fade">

</div>

<div id="tags" class="tab-pane fade">

<div class="btn-toolbar">

<div class="btn-group">

<button class="btnbtn-default" data-bind="click: $root.tagViewModel.showAddForm">

<span class="glyphiconglyphicon-file"></span>

</button>

<button class="btnbtn-default">Удалитьвсё</button>

<button class="btnbtn-default">

<span class="glyphiconglyphicon-refresh"></span>

</button>

</div>

</div>

<hr />

<div data-bind="foreach: tagViewModel.tags">

<section class="well" data-bind="click: $root.tagViewModel.show">

<div class="btn-group pull-right">

<button class="btnbtn-smbtn-default" data-bind="click: $root.tagViewModel.remove, clickBubble: false"><span class="glyphiconglyphicon-remove" aria-hidden="true"></span></button>

<h3 data-bind="text: name, style: {'backgoundColor': color}"></h3>

</section>

</div>

<link href="/Content/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" />

<script src="/Scripts/bootstrap-colorpicker.min.js"></script>

<div class="modal fade" id="myTagAdd">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h4 class="modal-title">Новаяметка</h4>

<button class="close" data-dismiss="modal"></button>

</div>

<div class="modal-body">

<form data-bind="with: $root.tagViewModel.added">

<div class="form-group">

<label for="myTagName">Название</label>

<input id="myTagName" class="form-control" type="text" placeholder="Название" data-bind="value: name" />

</div>

<div class="form-group">

<label for="myTagColorPicker">Цвет</label>

<div id="myTagColorPicker" class="input-group" data-bind="value: color">

<span class="input-group-addon"><i></i></span>

<input id="myTagColor" type="color" class="form-control" />

</div>

</div>

</form>

</div>

<div class="modal-footer">

<button class="btnbtn-default" data-dismiss="modal">Закрыть</button>

<button class="btnbtn-primary" data-bind="click: $root.tagViewModel.add">Добавить</button>

</div>

</div>

</div>

</div>

</div>

<div id="files" class="tab-pane fade">

<div class="fileinputfileinput-new input-group" data-provides="fileinput">

<div class="form-control" data-trigger="fileinput">

<i class="glyphiconglyphicon-file fileinput-exists"></i>

<span class="fileinput-filename"></span>

</div>

<span class="input-group-addonbtnbtn-default btn-file">

<span class="fileinput-new">Выбратьфайл</span>

<span class="fileinput-exists">Изменитьвыбор</span>

<input id="fileUpload" type="file" name="..." />

</span>

<a href="#" class="input-group-addonbtnbtn-default fileinput-exists" data-dismiss="fileinput"

data-bind="click: $root.fileViewModel.upload">Загрузить</a>

</div>

<table class="table table-hover">

<thead>

<tr>

<th>Id</th>

<th>Название</th>

<th>Тип</th>

<th>URL</th>

</tr>

</thead>

<tbody data-bind="foreach: $root.fileViewModel.files">

<tr>

<td data-bind="text: id"></td>

<td data-bind="text: name"></td>

<td data-bind="text: type"></td>

<td>

<input class="form-control" data-bind="value: location" />

</td>

<td>

<button class="btnbtn-smbtn-default" data-bind="click: $root.fileViewModel.remove, clickBubble: false"><span class="glyphiconglyphicon-remove" aria-hidden="true"></span></button>

</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

<script src="/Scripts/knockout-2.3.0.debug.js"></script>

<script src="/Scripts/knockout.validation.debug.js"></script>

<script src="/Scripts/knockout.mapping-latest.debug.js"></script>

<script src="/Scripts/myapp/FileViewModel.js"></script>

<script src="/Scripts/myapp/NoteViewModel.js"></script>

<script src="/Scripts/myapp/TagViewModel.js"></script>

<script src="/Scripts/myapp/AppModel.js"></script>

<div class="container">

</div>

<hr />

</div>

<!-- Visual Studio Browser Link -->

<script type="application/json" id="__browserLink_initializationData">

{"appName":"Chrome","requestId":"34afcd51b8cb4591ab29be8c9b09149e"}

</script>

<script type="text/javascript" src="http://localhost:63854/0a4f85abd86844158d4ae925531ab235/browserLink" async="async"></script>

<!-- End Browser Link -->

</body>

</html>

Размещено на Allbest.ru