Visual studio 2017 html

Программирование веб-страницы ASP.NET (Razor) с помощью Visual Studio

Версии программного обеспечения, используемые в этом руководстве

Вы можете программируете ASP.NET веб-страницы с помощью синтаксиса Razor с помощью WebMatrix или многих других редакторов кода. Вы также можете использовать Microsoft Visual Studio, которая представляет собой полнофункциональную интегрированную среду разработки (IDE), которая предоставляет мощный набор инструментов для создания приложений многих типов (а не только веб-сайтов). Для работы с ASP.NET страниц Razor можно использовать Visual Studio 2017.

Ниже приведены две особенно полезные функции, предоставляемые Visual Studio для программирования с помощью веб-страниц ASP.NET Razor:

• IntelliSense. Функция IntelliSense, встроенная в Visual Studio, является более комплексной, чем IntelliSense в WebMatrix.
• Отладчик. Отладчик позволяет устранять неполадки кода, останавливая программу во время ее выполнения, проверяя переменные и выполняя построчное выполнение кода.

Использование Visual Studio с разными версиями веб-страницы ASP.NET

Для разработки ASP.NET веб-приложений в Visual Studio 2017 установите рабочую нагрузку ASP.NET и веб-разработка .

Visual Studio 2012 и Visual Studio 2013 включают поддержку веб-страницы ASP.NET. (Пакеты, необходимые для поддержки веб-страницы ASP.NET устанавливаются при установке Visual Studio.)

Visual Studio 2010 не включает поддержку по умолчанию для веб-страницы ASP.NET. Чтобы использовать веб-страницы ASP.NET с Visual Studio 2010, необходимо установить пакет MVC ASP.NET. Чтобы получить веб-страницы ASP.NET 2, установите ASP.NET MVC 4.

В следующей таблице приведены сведения о поддержке веб-страницы ASP.NET в разных версиях Visual Studio.

Visual Studio 2010	Visual Studio 2012	Visual Studio 2013
Веб-страницы ASP.NET 2	Установка ASP.NET MVC 4	(Включено)	(Включено)
Веб-страницы ASP.NET 3	Обновление до веб-страницы ASP.NET 3 по NuGet	(Включено)

Запуск Visual Studio из WebMatrix

Если вы запустили проект в WebMatrix и хотите переключиться на Visual Studio, WebMatrix предоставляет кнопку, чтобы легко открыть проект в Visual Studio. Чтобы эта кнопка была включена, на компьютере должна быть установлена среда Visual Studio. На следующем рисунке показана кнопка в WebMatrix.

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

Создание ASP.NET сайта Razor в Visual Studio

Чтобы создать веб-сайт ASP.NET Razor в Visual Studio, выполните следующие действия.

1. Запустите Visual Studio.
2. В меню Файл выберите пункт Создать веб-сайт.
3. В диалоговом окне Новый веб-сайт выберите язык для использования (Visual C# или Visual Basic).
4. Выберите шаблон веб-сайт ASP.NET (Razor).
5. Нажмите кнопку ОК.

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

Using IntelliSense

Теперь, когда вы создали сайт, вы можете увидеть, как работает IntelliSense в Visual Studio.

1. На только что созданном веб-сайте откройте страницу Default.cshtml .
2. После тегов на странице введите @ServerInfo. (включая точку). Обратите внимание, что IntelliSense отображает доступные методы для вспомогательного ServerInfo средства в раскрывающемся списке.
3. Выберите метод из GetHtml списка и нажмите клавишу ВВОД. IntelliSense автоматически заполняет метод . (Как и в случае с любым методом в C#, после метода необходимо добавить () символы.) Готовый код для GetHtml метода выглядит следующим образом:

Нажмите клавиши CTRL+F5, чтобы запустить страницу. Вот как выглядит страница при отображении в браузере:

Закройте браузер.

Использование отладчика

1. В верхней части страницы Default.cshtml после строки, которая начинается с Page.Title , добавьте следующую строку кода:

var myTime = DateTime.Now.TimeOfDay; 

В сером поле редактора слева от кода щелкните рядом с этой новой строкой, чтобы добавить точку останова. Точка останова — это маркер, который сообщает отладчику прекратить выполнение программы в этот момент, чтобы вы могли видеть, что происходит.

Удалите вызов ServerInfo.GetHtml метода и добавьте вызов переменной вместо нее @myTime . Этот вызов отображает текущее значение времени, возвращаемое новой строкой кода.

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

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

Проверьте значение переменной myTime , удерживая указатель мыши на нее или проверив значения, отображаемые в окнах Локальные и Стек вызовов . Visual Studio отображает значение переменной.

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

Дополнительные сведения об отладчике и отладке кода в Visual Studio см. в статье Пошаговое руководство. Отладка веб-страниц в Visual Web Developer.

Использование Razor в ASP.NET проектов MVC с Visual Studio

Синтаксис Razor также широко используется в ASP.NET проектах MVC. MVC — это мощный способ создания динамических веб-сайтов на основе шаблонов. Если ваш веб-страницы ASP.NET сайт становится трудно обслуживать, вы можете рассмотреть возможность преобразования его в приложение ASP.NET MVC. Пример создания приложения MVC см. в разделе начало работы с ASP.NET MVC 5.

Установка поддержки веб-страницы ASP.NET в Visual Studio 2010

В этом разделе показано, как установить Visual Web Developer Express 2010 и средства веб-страницы ASP.NET для Visual Studio.

1. Если у вас еще нет установщика веб-платформы, скачайте его по следующему URL-адресу: https://www.microsoft.com/web/downloads/platform.aspx
2. Запустите установщик веб-платформы.
3. Перейдите на вкладку Продукты .
4. Найдите ASP.NET MVC 4 (для веб-страницы ASP.NET 2) и нажмите кнопку Добавить. К этим продуктам относятся средства Visual Studio для создания ASP.NET веб-сайтов Razor.
5. Нажмите кнопку Установить, чтобы завершить установку.

Источник

‘HTML Application with TypeScript’ Project Template for Visual Studio

In Visual Studio 2015 there was a project template for building HTML applications with TypeScript. It was called, predictably, ‘HTML Application with TypeScript’.

The Visual Studio team have removed this template in versions of Visual Studio after Visual Studio 2017. I can see why. It contains some code that shows the time, ticking, in your default web browser when you start it. That isn’t really a ‘template’. The first thing you’re going to do is delete the code to show the timer.

Also it had some quirks. It used the ASP.NET C# templates as a jumping-off point. This is fine: it gives you stuff like pre- and post-build events that the other TypeScript project types don’t have, and the ability to configure IIS Express or another web server in the project properties. However, it insisted on building an (empty) C# library on every build that then wasn’t used for anything. This always seemed a bit odd.

Having said all that I used it quite a lot, mainly for test and play examples. Configuring a project to test TypeScript for an HTML application is not particularly easy. This template did it all for you, including making it ridiculously easy to include webpack so you could bundle multiple files using external module syntax. I may write about this separately.

The Template Resurrected

So having done some work with Visual Studio add-ins last week I thought I’d resurrect this project template. It’s now available as a Visual Studio Template Extension, both from Visual Studio Marketplace and under Tools/Extensions and Updates in Visual Studio 2017 itself. Search for ‘TypeScript HTML Application Template’. It’s also available in Visual Studio 2019.

It works exactly as the old one did. When started with F5 it will start a web server, by default IIS Express, and show a ticking time in the selected web browser. The code to show the time is in a TypeScript class. If the browser is Internet Explorer or Chrome the code will break at breakpoints directly in Visual Studio, and the usual Visual Studio debug tools and windows will be available. Note that if you are using Chrome you may need to hit refresh in the browser for breakpoints in startup code to be hit.

Источник

HTML 11

Instant live preview for static and dynamic web pages as you edit them in Visual Studio, on desktop and mobile devices.

HTML 11 extension provides tool windows in Visual Studio 2022/2019/2017 showing preview of static and dynamic web pages you are currently editing, on desktop and mobile devices.

Static .html pages

The preview is updated as you type. When you change a .css or a .js file referenced in the HTML document, the preview is updated after you save the referenced file.

Razor .cshtml pages in ASP.NET Core 2.1/3.0 web application

MVC view .cshtml pages in ASP.NET Core 2.1/3.0 web application

.razor pages in Blazor app

Web Forms .aspx pages in ASP.NET web application

MVC view .cshtml/.vbhtml pages in ASP.NET web application

While the web application server is running in IIS Express, the preview is updated when you save a document. When the server is stopped, the preview is no longer updated and a red border is displayed around the preview area.

Getting started

To initially open HTML 11 tool windows, select Desktop preview or Mobile preview in the main HTML11 menu: You can position opened tool windows alongside the HTML editor or outside the main Visual Studio window, e.g. on a second monitor. HTML is rendered using Chromium Embedded Framework v75.

How it works

Static .html pages and associated resources (images, styles, scripts) are loaded by the embedded Chromium browser directly from the disk. For the live preview, page content is provided from a memory buffer. To show preview for dynamic pages, you need to start the web application (usually pressing Ctrl + F5). HTML 11 finds App/Project URL in web server settings (usually http://localhost:[random-port]), adds the file path to it and opens the preview. When you change and save a page, Visual Studio recompiles it on save, updates the application on the fly, HTML 11 updates the preview and you see the updated page.

Troubleshooting

If a page preview is not displayed, you can enable diagnostics in Options: And then in the Output window General page you can look for additional information:

Chrome dev tools

Developer tools menu command opens the standard Chromium developer tools window:

Mobile preview

In HTML 11 options you can select a mobile device for preview: A mobile device is simulated with Chromium DevTools Device Mode.

Open on Android emulator

Open on Android emulator menu command opens the current page on a running Android emulator: The preview is updated when you Save All documents. Visit the HTML 11 home page for more information.

Источник