Console.WriteLine ("Собственная страница в интернете. Проще простого.");
Все в наше время знают, что такое интернет и что такое сайты. Многие бы хотели иметь собственную страницу в интернете, но из-за того, что люди не знают, как в принципе устроен интернет, им это кажется магией :)
В этом уроке мы напишем простой сайт одностраничник с использованием языка asp.net языка c#. Для этого создадим asp.net проект.
Нам необходимо создать MVC проект. MVC расшифровывается как model view controller (модель, представление и контроллер). Для лучшего понимания, создадим пустой проект MVC
После этого будет создан пустой mvc проект, в котором нет ни котроллеров, ни представлений, ни моделей. Вот его структура.
Итак, начнем с азов. ASP.NET приложения, так же, как и консольные, которые были рассмотрены в предыдущих уроках, используют определенные методы, которые выполняются всегда не зависимо от разработчика. Эти методы находятся в файле Global.asax.cs. Класс в нем является наследником класса HttpApplication. В нашем сгенерированном проекте этот класс имеет следующий вид
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace Lesson4
{
public class MvcApplication : HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
}
}
}
Метод Application_Start исполняется каждый раз при запуске приложения, т.е. при его старте. В нем, мы видим, происходит регистрация всех областей приложения (для нас сейчас не важно, что именно там происходит) и вызывается метод RegisterRoutes из класса RegisterConfig, который регистрирует маршрутизацию нашего сайта. Давайте посмотрим на класс RegisterConfig и поймем, что там происходит.
using System.Web.Mvc;
using System.Web.Routing;
namespace Lesson4
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new {controller = "Home", action = "Index", id = UrlParameter.Optional}
);
}
}
}
В данном методе видим, что все пути типа "{resource}.axd/{*pathInfo}" не маршрутизируются, и добавляются в таблицу маршрутов, дефолтны шаблон ссылки "{controller}/{action}/{id}" и мапится на контроллер Home и его экшен Index с необязательным параметром id. Если всмотреться в строку defaults: new {controller = "Home", action = "Index", id = UrlParameter.Optional} и просто понять что там написано, то все становится более менее ясно.
Давайте попробуем запустим наше приложение. Для этого сперва надо установить наш проект стартовым а затем нажать F5.
Это сообщение о том, что не найдет ресурс, к которому мы пытаемся обратиться. По дефолту приложение пытается обратиться к контроллеру Home и его экшен методу Index, которые указаны в RouteConfig дефолтным путем. Для устранения ошибки давайте добавим Home контроллер. Щелкните правой кнопкой мыши по папке Controllers и добавьте HomeController
Содержимое созданного контроллера должно быть следующего содержания
using System.Web.Mvc;
namespace Lesson4.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
}
Здесь мы видим экшен метод Index, который возвращает ActionResult. Попробуем сейчас запустить приложение.
Также получим ошибку, но уже другого содержания.
Теперь мы видим, что asp.net не смог найти представление для контроллера Home и его метода Index. По стандарту представления должны лежать по такому пути - ~/Views/[Имя контроллера]/[Имя экшен метода]. Соответственно так как у нас дефолтный контроллер это Home, экшен метод Index, то мы должны создать представление по пути ~/Views/Home/Index.cshtml. Для этого щелкнем правой кнопкой мыши по папке Home (если она не создана, то создадим) и добавим представление. Назовем его Index и не будем использовать layout page.
Layout нужен для отображения общего стиля на всех страницах сайта, например, в layout обычно подцепляются скрипты, стили и общая тема сайта, и все представления, которые будет использовать тот или иной layout, будут иметь общую стилистику, которую не надо будет дублировать на всех страницах сайта. Так как мы делаем одностраничное приложение, у нас нет необходимости использовать layout.
Итак, что же мы видим в добавленном представлении, там стандартный шаблон html документа, в котором можно писать все то, что и в обычном html. Давайте поправим его до следующего вида.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h1>Мой первый одностраничный сайт</h1>
</div>
</body>
</html>Давайте запустим приложение и в веб браузере откроется страница следующего содержания.
В нашем представлении, мы можем писать все то же, что и в обычном html документе. Подключить javascript, css стили и использовать на свое усмотрение.
Но также мы можем в представлении использовать c# код, который будет отрабатывать на сервере и результат рендерить в выходном html документе. Давайте сделаем так, чтобы наш сайт выводил текущую дату и время. Для этого модифицируем представление и добавим следующую строку
<span>Текущие дата и время: @(DateTime.Now.ToString("U"))</span>
внутри @() пишется c# код, который возвращает значения, валидные для html значения. Наш код, например, возвращает текущую дату в строковом представлении. Можете сами поэкспериментировать для лучшего понимания происходящего.
Запустим наше приложение и увидим, что оно выводит текущую дату. При каждом обновлении страницы будет меняться дата, в соответствии с текущим значением времени в системе.
В следующем уроке научимся выставлять свой сайт наружу, купим домен, настроим, и сайт будет доступен всем пользователям сети интернет.
