Как создать веб приложение visual studio
Мотивация
-
— Нужен для установки различных библиотек в JavaScript, требуется повсеместно. — Нужен если JavaScript и другой контент нужно упаковывать, минифицировать, использовать Less вместо ванильного CSS, шаблонизаторы HTML, использовать транспиляторы JavaScript и тому подобное. — Его можно использовать как транспайлер из новых версий JavaScript в старые. Также можно использовать сам язык TypeScript. Два в одном получается, плюс грех не использовать так как в Visual Studio сделана неплохая его поддержка.
Умея быстро создать такое приложение дальше уже можно смело изучать любые веб-технологии (включая сам npm, Webpack и TypeScript), при этом сервер будет на родном дотнете.
Стандартный компилятор TypeScript в данном туториале отключается, и используется тот, который является модулем для npm.
Подготовка
Что понадобится скачать и установить для начала работы
Создание проекта
Теперь у нас есть стартовый проект, он должен компилироваться и запускаться.
В случае, если используется git, то сразу добавляем .gitignore файл в папку с solution-ом (Там же инициализируем git репозиторий). Файл .gitignore для solution-ов в Visual Studio можно взять отсюда.
Упрощаем типовой проект
Далее изменим проект так, чтобы он получился максимально простым.
Сделаем из него Hello World.
Удаляем следующие файлы
- bower.json (и вложенный в него .bowerrc), bundleconfig.json
- Все содержимое папки wwwroot. Можно оставить favicon.ico.
- Папка Views — удаляем все внутренности, кроме Views/Home/Index.cshtml
В файле Controllers/HomeController.cs в классе HomeController
заменяем внутренности на следующий код
По сути тут убирается все кроме методов Index() и Error() , при этом Error() теперь возвращает строку "Error" вместо вьюшки (так как мы ранее удалили файл с этой вьюшкой).
Последний штрих — заменяем содержимое файла Views/Home/Index.cshtml на следующее
Все, теперь у нас есть базовый максимально упрощенный проект. Его можно скомпилировать и запустить, на странице будет отображаться текст "Hello world"
Добавляем npm
Добавляем в проект файл package.json
Вместо "yourappname" вписываем название проекта маленькими буквами.
npm при своей работе может писать в лог с названием npm-debug.log. Стоит исключить его из проекта, чтобы не мешал. Это можно сделать либо вызвав в студии на нем контекстное меню и выбрав Exclude From Project. Либо, в случае если он еще не создан (Скорее всего, так оно и есть), можно отредактировать файл проекта .csproj, добавив в корневой тег <Project> следующее
Все, теперь у нас есть поддержка npm, в зависимостях проекта студия теперь показывает узел "npm".
Если построить проект (А так же при открытии проекта, изменении файла package.json и т.д) начнется процесс восстановления зависимостей npm, в случае если они указаны (Сейчас их нет). Зависимости скачиваются в папку node_modules в папке проекта (Студия не воспринимает эту папку как часть проекта).
Добавляем Webpack
Webpack является зависимостью npm, по этому его нужно добавить в package.json как зависимость. Так как он не будет использоваться в клиентском JavaScript коде, он объявляется как dev dependency. Для нас это значит что он будет работать как дополнительный инструмент компиляции для Visual Studio, ни на сервере, ни на клиенте его не будет, на клиенте же будет тот контент (включая JavaScript код), который Webpack сгенерирует.
Кроме самого Webpack-а понадобятся также две вещи, облегчающие работу (Тем не менее они не обязательны)
Сначала скачаем и установим расширение для Visual Studio, его можно найти по названию "NPM Task Runner", либо скачать по этой ссылке.
Теперь добавим в package.json следующие строки (добавляем внутрь корневых фигурных скобок)
В "devDependencies" мы указали сам Webpack и плагин для очистки того, что он генерирует.
В "scripts" мы указали скрипт с названием "webpack-script" , который будет запускать Webpack (В этот момент он будет генерировать контент, транспилировать код и тд). Расширение Visual Studio, которое мы установили ранее делает так, что этот скрипт будет виден студии как задача, которую можно выполнить, таким образом мы можем запланировать эту задачу на выполнение при построении приложения.
В "-vs-binding" мы указали, что Visual Studio должна вызывать задачу "webpack-script" (Которую студия теперь видит, благодаря установленному расширению) каждый раз перед построением проекта.
Теперь нужно настроить сам Webpack. Он настраивается в с помощью JavaScript скрипта webpack.config.js, который будет выполняться через node.js в момент вызова задачи webpack-script . Добавим файл webpack.config.js в проект и заполним его содержимое следующим кодом
Тут мы настроили входной и выходной пути к JavaScript файлам, а также прописали ранее добавленный плагин для очистки выходной папки.
Со стороны клиента выходной файл будет находится по адресу
это адрес сайта, на котором работает веб-приложение.
Изменим файл Views/Home/Index.cshtml так, чтобы он включал выходной файл, и, чтобы скрипт мог менять текст на странице (по id элемента "helloworld").
Для этого заменим внутренности тега <body> на следующее
В случае, если используется git, также следует исключить генерируемые Webpack-ом файлы. Для этого создадим еще один файл .gitignore, но теперь уже в папке проекта (Не путать с папкой solution-а)
Студия при этом будет показывать .gitignore файл в проекте, чтобы этого не происходило, в в файле проекта .csproj надо добавить следующие строки внутри корневого тега <Project> (Ну или через контекстное меню по файлу -> Exclude From Project)
Все, теперь проект полностью настроен под использование npm и Webpack. Если скомпилировать и запустить приложение, на странице должен отобразиться текст "Hello world from script"
На этом этапе уже можно устанавливать JavaScript библиотеки, объявляя их в разделе "dependencies" в package.json и использовать их в Scripts/main.js, подключая эти библиотеки как модули через функцию require("название библиотеки") . Например, если установить таким образом библиотеку "jquery", то файл Scripts/main.js можно переписать следующим образом (Примечание: это просто пример, для продолжения не обязательно ни устанавливать jquery, ни изменять main.js)
Добавляем TypeScript
Прежде всего, нужно отключить стандартную транспиляцию TypeScript. Для этого нужно в файле проекта .csproj добавить следующие строки внутри корневого тега <Project>
Далее, нужно добавить TypeScript как dev dependency для npm. Для этого в файл package.json в разделе "devDependencies" добавляем следующее
Теперь нужно создать файл конфигурации для компилятора TypeScript. Создаем файл tsconfig.json следующего содержания
Описание некоторых указанных в этом файле значений
- "allowJs": true — разрешаем транспиляцию из JavaScript в JavaScript (Из новой версии языка в старую. Расширение файлов .js)
- "target": "es5" — выходная версия JavaScript, в которую будет транспилиться TypeScript и входной JavaScrpt
- "module": "es2015" — синтакс для работы с модулями
- "moduleResolution": "node" — стратегия разрешения модулей — такая же как в node.js
- "sourceMap": true — включаем генерацию данных для отладки TypeScript
- "include": [ "./Scripts/*" ] — указываем, откуда брать исходники .ts и .js, которые надо транспилировать в выходной JavaScript
Далее нужно подружить TypeScript с Webpack-ом. Для этого заменяем файл скрипта для настройки конфигурации Webpack-а webpack.config.js на следующий (По сути мы меняем некоторые места, но чтобы не писать все изменения, выкладываю полный файл)
Тут мы поменяли расширение входного скрипта с .js на .ts, указали, что входной скрипт нужно пропускать через загрузчик TypeScript ( loader: "ts-loader" ) и сделали некоторые другие вещи.
И последний шаг — переименовываем файл входного скрипта с Scripts/main.js на Scripts/main.ts, внутренности можно оставить прежними.
Так же теперь доступна отладка TypeScript из Visual Studio, можно во входном .ts файле поставить точку останова, запустить проект в режиме отладки (Запускать при этом надо в браузерах chrome либо internet explorer, иначе отладка работать не будет, также в chrome у меня оно работает только когда я после загрузки страницы явно нажимаю refresh страницы, видимо отладчик к chrome подсоединяется не сразу). При этом обратите внимание что точки останова ставятся во входных файлах, но реално код работает выходной (В выходном коде в виде комментария webpack записывает информацию нужную для маппинга с выходного на входные файлы).
Можно создавать и другие входные файлы в папке Scripts, в виде .ts или .js и те и другие будут полностью поддерживать новый стандарт EcmaScript (Выходной файл же будет es5 стандарта). Для подключения дополнительных входных файлов нужно оформить их в виде модулей и подключать в main.ts через оператор import либо функцию require() .
Еще небольшое замечание — выходные файлы (те, что в папке wwwroot/bundle/) лучше не исключать из проекта через .csproj файл, так как если студия их не видит, отладка входных файлов работать перестает.
Дано три стороны треугольника: a , b , c .
Используя формулу Герона, разработать приложение, которое находит площадь треугольника. Приложение реализовать как Web-application .
Формула Герона имеет вид:
где p – полупериметр:
a, b, c – длина сторон треугольника.
⇑
Выполнение
1. Запустить MS Visual Studio
Пример создания приложения в MS Visual Studio по шаблону Windows Forms Application подробно описывается в теме:
⇑
2. Создание Web-приложения
Приложения типа Web могут вызываться из любого компьютера, подключенного к сети Internet. Для открытия такого приложения используется Web -браузер (например Opera , Google Chrome , Internet Explorer и другие).
Ниже указаны два способа создания Web -приложения в MS Visual Studio .
⇑
2.1. Создание Web-приложения (способ № 1)
Для этого способа, чтобы создать Web -приложение, нужно сначала вызвать команду (рис. 1):
Рис. 1. Команда создания нового веб-сайта
Например, в нашем случае, файлы будут сохраняться в папке
Рис. 2. Создание Web-сайта
⇑
2.2. Создание Web-приложения (способ № 2)
Существует также и другой способ создания Web -приложения с помощью команды (рис. 3)
Рис. 3. Команда создания нового проекта
Рис. 4. Команда создания Web-приложения
⇑
3. Создание приложения как веб-сайта
Для решения задачи выбираем первый способ.
После выполненных операций создается решение ( Solution ), в котором есть один проект типа веб-сайт (рис. 5).
Если запустить на выполнение данный проект, то внизу в правой части экрана ( SySTray ) отобразится окно загруженного локального сервера (рис. 6).
Рис. 6. Загрузка локального сервера для выполнения приложения
В результате запуска, в активном веб-браузере откроется страница с приблизительно таким текстом (рис. 8):
Рис. 8. Текст, который выводится в веб-браузере
⇑
4. Добавление формы к приложению
Добавим новую форму к Web -приложению.
Рис. 10. Добавление новой формы
После добавления, в Solution Explorer можно увидеть дополнительные два файла (рис. 11):
С помощью этих двух файлов можно изменять внешний вид формы и организовывать работу в ней.
С помощью кнопок Design и Source можно переключаться между режимом проектирования и режимом кода страницы Default.aspx (рис. 12).
Рис. 12. Режимы проектирования ( Design ) и кода ( Source )
⇑
5. Конструирование формы
Согласно с условием задачи, форма должна содержать следующие элементы управления:
⇑
5.1. Изменение размеров формы
Рис. 13. Изменение размеров формы в режиме проектирования
⇑
Для нашей задачи нужно вынести на форму следующие элементы управления:
При вынесении элемента управления в правой нижней части экрана (окно Properties ) можно изменять свойства элементов управления (рис. 14).
Рис. 14. Изменение свойств элементов управления Web -формы
В целом, после построения, форма приложения должна иметь вид как показано на рисунке 15.
Рис. 15. Форма приложения в режиме проектирования
⇑
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page < protected void Page_Load( object sender, EventArgs e) < >protected void Button1_Click( object sender, EventArgs e) < double a, b, c, p, s; a = Double .Parse(TextBox1.Text); b = Double .Parse(TextBox2.Text); c = Double .Parse(TextBox3.Text); p = (a + b + c) / 2; s = Math .Sqrt(p * (p - a) * (p - b) * (p - c)); Label4.Text = "S text-align: justify;">После запуска приложения на выполнение можно проконтролировать его работу в Web -браузере (рис. 16).
Рис. 16. Выполнение Web -приложения в браузере Opera
После этого можно выносить приложение на Web-сервер. Но это уже другая тема.
Для разработки будем использовать Visual Studio.
Выберете модель Веб-формы и завершите создание проекта.
Внутренняя структура проекта
В проекте сайта уже загружены некоторые библиотеки, необходимые для комфортного старта: CSS-фреймворк Bootstrap, JS-фреймворк jQuery, MSAjax и некоторые другие.
После создания тут уже присутствуют 3 страницы: Default, About и Contact. Каждая страница состоит из 3 файлов:
- Page.aspx — содержит в себе HTML-разметку конкретной страницы;
- Page.aspx.cs — отвечает за логику работы конкретной страницы;
- Page.aspx.designer.cs — является мостом между Page.aspx и Page.aspx.cs.
Вот так выглядит About.aspx:
Как видно, этот файл содержит лишь контент конкретной страницы. Вся общая разметка находится в Site.Master и Site.Mobile.Master .
ABBYY , Москва, можно удалённо , От 180 000 до 250 000 ₽
Так выглядит страница About
Создание веб-формы
Чтобы создать новую страницу, в контекстном меню проекта выберите Добавить→Веб-форма. После этого автоматически сгенерируются и заполнятся все 3 файла.
Примечание Веб-формы можно создавать с помощью встроенного графического конструктора веб-форм. Что бы открыть его, в контекстном меню нужной веб-формы нажмите на Открыть в конструкторе. Все необходимые элементы можно достать из Панели Элементов (Вид→Панель элементов). Но если вам нужна максимальная гибкость и функциональность — лучше разрабатывать формы вручную в коде.
Потом можно добавить ссылку на новую страницу в панель навигации в Site.Master :
Примечание Обратите внимание, что в ссылке указывается название страницы без расширения.
Во всех упоминаниях нужно заменить News на название вашей страницы. Теперь форма будет отображаться вместе с общей вёрсткой.
Для интеграции значений в вёрстку из aspx.cs используют специальный тег <%: %> :
В этом случае SomeVar должен быть публичным полем. Если нужно выполнить какой-либо код для присвоения значения этой переменной, то выполнить его нужно в сгенерированном методе Page_Load .
Получение значений параметров из URL производится через статический класс Request , в котором хранятся и прочие данные о запросе:
Изучить все возможности веб-форм можно в официальной документации.
Движок представлений Razor
В Razor также можно выполнять неявные выражения прямо в HTML разметке:
Тут есть привычные для ЯП конструкции, которые могут значительно облегчить вёрстку. Вот некоторые из них:
Введение
Visual Studio Code
Visual Studio Code свободна для скачивания с официального сайта. Работаете ли Вы на Linux, Mac или Windows – не имеет значения. Вы можете скачать и запустить VS код на своей платформе.
Установка Visual Studio Code довольно проста, но если Вы застрянете, то всегда можете просмотреть документацию по установке.
ASP . NET 5 был построен с нуля, чтобы убедиться, что он придерживается современной парадигмы веб-приложений, и что приложения, разработанные с его помощью являются «облачными». Ключевыми аспектами ASP . Net 5 явля ются гибкость и модульность – он предлагает минимальные накладные расходы и позволяет нам выбирать только то, что мы хотим в рамках нашего веб-приложения.
Тема связана со специальностями:
DNX расшифровывается как Dot Net eXecution Environment.
Что такое Yeoman?
Если у Вас нет Node в системе, можете установить его. Кроме Yeoman , Вам также нужны другие поддерживающие средства, такие как генератор ASP . NET , исполнитель задач Grunt и Bower . Вы можете выполнить это за одну команду. В командной строке набрать следующую команду и нажать enter:
npm install –g yo grunt-cli generator-aspnet bower
Теперь Вы можете строить веб-приложения.
Создание веб-приложения
1. Откройте командную строку и перейдите в папку, где Вы хотите создать свое новое веб-приложение.
2. Введите в командную строку следующую команду:
Выберите сейчас основное приложение. Используйте клавиши со стрелками для выбора опции и нажмите enter.
4. Дальше нам нужно назвать веб-приложение. Используем HelloWorld как имя нашего образца ASP . NET 5 веб-приложения. Введите имя и нажмите enter. Yeoman построит структуру проекта.
5. Каталог, в котором будет создано наше веб-приложение будет иметь то же имя, что мы дали только что Yeoman . В данном случае - “ HelloWolrd ”.
6. Через командную строку откройте Visual Studio Code
7. Visual Studio Code запустит проект HelloWorld. Файлы в проекте будут отображаться в окне Проводника.
8. В редакторе Visual Studio Code выберите View > Command Palette option
и в командной палитре введите следующую команду:
dnx: dnu restore - (HelloWorld)
Видео курсы по схожей тематике:
Запуск веб-приложения
Теперь, когда мы успешно создали веб-приложение, пришло время запустить его и посмотреть на результат.
1. В Visual Studio Code откройте Command Palette, выбрав View > Command Palette. Введите следующую команду для запуска приложения:
dnx: kestrel -(HelloWorld,Microsoft.AspNet.Hosting--server Kestrel–config hosting.ini
Примечание: Когда Вы начинаете набирать команду, командная палитра подскажет Вам полную команду в списке. Вы можете выбрать команду из списка и команда будет выполнена.
1. Откройте файл project.json и в узле (“dependencies”) добавьте Kendo (в настоящее время доступна бинарная версия Kendo Mvc – 2015.2.805).
2. Дальше откройте Startup.cs и найдите метод “ConfigureServices”. Добавьте следующий фрагмент в метод.
3. Затем откройте
/Views/_ViewImports.cshtml и импортируйте пространство имен Kendo.Mvc.UI .
@using Kendo . Mvc . UI
4. Скопируйте Kendo UI ресурс с клиентской стороны. Для этого Вам нужно установить пакет Kendo UI Professional (Commercial Package). Его можно установить через Bower с помощью следующей команды:
Пакет Kendo UI Professional Bower размещается в частном git -хранилище и требует активировать аккаунт Telerik. Во время установки Вам предложат ввести пароль несколько раз.
Bower установит пакет Kendo UI Professional как “ kendo - ui ” в папку wwwroot / lib .
5. Дальше нам необходимо зарегистрировать скрипты Kendo UI и стили в
6. Теперь давайте используем виджет Kendo UI в одном из видов. Мы будем использовать виджет Kendo UI DatePicker. Откройте
/Views/Home.Index.cshtml и добавьте следующий фрагмент:
Бесплатные вебинары по схожей тематике:
Шахматная IT Арена для программистов. III тур. Проходная пешка и рокировка
@RenderSection("scripts", required: false)
7. Запустите веб-приложение через dnx: kestrel команду, что мы использовали ранее. Результат представлен ниже.
Читайте также: