29 декабря 2011 г.

Индикатор выполнения AJAX-запроса, в ASP.Net MVC

Сегодня практически каждая страница сайта выполняет какие-то AJAX-действия. Чаще всего эти запросы довольно "легкие", и не требуют длительного времени выполнения. Но иногда все-же встречаются ситуации, когда прежде чем выдать ответ, на сервере должен отработать немалый кусок логики с подключениями к БД или каким-либо сторонним ресурсам. В таких случаях пользователю нужно дать понять, что процесс пошел, и запрос находится на выполнении.

Итак, сегодня мы будем делать визуальную индикацию выполнения AJAX-запроса.

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

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

30 октября 2011 г.

Подгрузка контента при прокрутке страницы, для ASP.Net MVC

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

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

Вообщем, наша цель получить такую себе "бесконечную страничку".  Уточню лишь, что "бесконечная" - в нашем случае, это пока в базе не закончатся данные для показа пользователю.

29 октября 2011 г.

Облако тегов на ASP.Net MVC, с помощью JQuery

Сегодня будем делать такую полезную и нужную штуку, как облако тегов. Думаю, все понимают о чем речь, и для чего оно нужно, ведь на 99% сайтов красуются разнообразные "облачка".

Как всегда, вначале, я начал искать готовые JQuery-плагины, но поиски не удались, а поэтому будем делать все ручками. И работы там, кстати, не так уж и много.

Итак, займемся созданием простенького облака тегов по данным из базы, с использованием AJAX, JSON, и Javascript.

16 октября 2011 г.

Работа с cookies из Javascript

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

Могу привести самый простой пример: допустим, у нас есть страничка, на которой, с помощью таймера в яваскрипте, происходит запрос в базу данных на проверку, произошло ли какое-то событие (появилась новая запись, изменился статус флага и т.д.). Если ожидаемое действие произошло, то скрипт, допустим, показывает иконку срабатывания на странице.
Теперь, если уведомление уже показано, то совсем не нужно делать новые запросы в БД, а достаточно где-то временно хранить флаг, что иконка показана, и перед каждым новым запросом в таймере просто проверять, есть ли в куки запись о флаге. Если нет, то запрос происходит. Если есть, то его делать не нужно т.к. данные уже получены.

Сегодня мы рассмотрим возможность работы с файлами cookies из Javascript-а.

3 августа 2011 г.

Использование HttpHandler-a для скачивания (отдачи) файлов в ASP.Net MVC

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

25 июля 2011 г.

Использование HttpHandler-a для отображения картинок в ASP.Net MVC

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

Причем здесь изображения?
Давайте представим простую ситуацию - у нас есть некое подобие социальной сети на asp.net mvc. На личной странице пользователя отображается его аватар. Само изображение аватара (к слову, загруженное пользователем, хранится где-то далеко, в какой-то папке, имея название равное айдишнику пользователя). В ресурсе страницы тег картинки будет выглядеть как-то так:

<img src="/Uploads/Avatars/5e840171-3150-4014-a652-88945a9f7656.jpg" alt="my avatar" />

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

18 июля 2011 г.

Размещение проекта на Codeplex, с возможностью работы через TFS

Уже давно я убедился в важности использования системы контроля версий для своих проектов. Ну а что? Кому удобно хранить десятки архивов с названиями типа "проект(13.07.2011)", "проект(17.07.2011)" и т.д. Очевидно, что нужно искать выход из такой ситуации. В своей главной работе мы используем Visual Studio Team Fundation Server. Тоесть, сам проект лежит далеко на сервере (конечно же нашем), и разработка ведется несколькими людьми. Но что делать со своими мелкими проектами? Личного сервера у меня нет, но есть VS Ultimate с TFS, поэтому я начал искать способ бесплатного использования именно этой системы контроля версий. Решение нашлось. И это - codeplex.com

14 июля 2011 г.

Диалоговое окно на ASP.Net MVC, с помощью Jquery UI

Некоторое время назад, я рассматривал вариант подключения плагина-модального окна к проекту. Thickbox, сам по себе, штука хорошая, но у всех сторонних (и особенно бесплатных) Jquery-плагинов есть один огромный недостаток - никто не дает вам гарантии, что после подключения новой версии библиотеки плагин не сломается.
По-моему, здесь есть 3 варианта решения проблемы:

  1. Всегда оставаться на одной версии Jquery (тогда не будут работать все новые, крутые плагины);
  2. Покупать плагины, к которым прилагается поддержка, и которые постоянно обновляются (денег жалко);
  3. Минимизировать риски использовав плагины от самого Jquery. Под словом плагин, я здесь имею в виду Jquery UI.

5 июля 2011 г.

Восстановления пароля из Membership, в проекте на ASP.Net MVC

В большинстве проектов, для работы с пользователями, я использую встроенный Membership, инфраструктуру которого переношу в проект на самой первой стадии. Подробнее о том, как это сделать, можно посмотреть здесь.
Сам по себе Membership - штука очень хорошая. Новый, созданный MVC-проект включает AccountController, в котором имеется вся логика по работе с пользователями через Membership. Но вот, чего там нет, так это восстановления забытого пароля. В связи с этим, каждый выкручивается по-своему. Приходится писать дополнительный функционал. Этим мы сегодня и займемся.

15 июня 2011 г.

ActionLink картинкой в классе стиля, для ASP.Net MVC

Я уже рассматривал варианты создания ссылки (ActionLink) в виде картинки вместо текста. Оба тех метода обьеденяет одна деталь - источник картинки мы задаем напрямую, через атрибут src.

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

Допустим, верстальщик оставил нам вот такой-вот css-класс "my_img", который нужно прикручивать к ссылке:

.my_img
{
display: block;
width: 48px; height: 48px;
background: url('_youtube.png') no-repeat center center;
right: 0; top: 0;
z-index: 1;
}

Конечно же, для создания ActionLink со стилем, мы могли бы поступить вот так:

<%= Html.ActionLink("link text", "about", null, new {@class = "my_img"}) %>

Но нам же совсем не нужно, чтобы поверх изображения висел текст самой ссылки. К сожалению, хэлпер HTML.ActionLink не позволяет создавать ссылку с пустым текстовым параметром типа:

<%= Html.ActionLink("", "about", null, new {@class = "my_img"}) %>
или:

<%= Html.ActionLink(string.Empty, "about", null, new {@class = "my_img"}) %>

В такой ситуации, нам на выручку приходит HTML.Action. Этот хэлпер позволит нам решить задачу вот таким простым образом:

<a href="<%= Url.Action("about") %>" class="my_img"></a>

Вот и все. Мы создали ссылку, установили для нее адрес перехода, и задали стиль. А главное - ссылка не содержит текста.
Выглядит это как-то так:

_____
Исходники

18 мая 2011 г.

ActionLink в виде картинки, для ASP.Net MVC. Способ №2

Некоторое время назад, я писал о одном способе превращения обычного ActionLink-а в картинку. Метод хороший, и я пользуюсь им до сих пор. Но вот, вчера сам меня нашел еще один способ это сделать.

Итак, наша задача - сделать ActionLink, в котором вместо текста ссылки отображалась бы картинка.
Решение:

<a href="<%= Url.Action("About") %>">
    <img src="/Content/_about.png" alt="About Us" />
</a>

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

Кроме того, не стоит забывать, что ActionLink на странице преобразовывается в обычную, стандартную ссылку. Поэтому, в принципе, мы даже могли бы напрямую писать в HTML-е что-то типа этого:

<a href="/home/about">
    <img src="/Content/_about.png" alt="About Us" />
</a>

Результат один и тот же.
С передачей параметров здесь проблем также не будет.

Единственное, что для меня пока не понятно, так это - почему советуют не писать так, как мы это сделали в последнем примере (сразу в HTML).

Да и вообще, признаюсь, не знаю где разница в написании строк:

<%= Html.TextBox("txt1") %>
<input type="text" name="txt2" id="txt2" />

если результат на странице будет абсолютно одинаков.

Ну что же, буду разбираться.

11 мая 2011 г.

Передача JSON-данных из представления в контроллер, на ASP.Net MVC

В одном из предыдущих постов (вот здесь) я уже рассматривал способ передачи данных в формате JSON, из контроллера в представление. Тема довольно интересная и полезная. Поэтому, я подумал, что стоит также немного попрактиковаться с обратной передачей данных. Тоесть, из представления в контроллер. Речь идет о случаях, когда, во-первых,  нужно передать в контроллер не одно-два значения, а целый набор, и, во-вторых, - когда все это необходимо сделать (как мы уже очень любим) без перезагрузки страницы. Будем использовать JSON и AJAX.

8 мая 2011 г.

Использование Cookies в ASP.Net MVC

Так же как и в WebForms, в MVC очень просто работать с Cookies.

Думаю, что не стоит рассказывать когда куки используются. Сразу перейдем к коду. Получать cookie можно/нужно так:

HttpCookie cookie = Request.Cookies["cookieName"];



Следовательно, устанавливать cookie в контроллере лучше вот таким образом:

HttpCookie cookie = new HttpCookie("cookieValue");
cookie.Value = model.SomeValue;
cookie.Expires = DateTime.Now.AddHours(1);
this.ControllerContext.HttpContext.Response.Cookies.Add(cookie);

Для удаления cookie-файла, как и раньше, достаточно просто задать в Expires уже прошедшую дату. Типа того: cookie.Expires = DateTime.Now.AddDays(-1d).

6 мая 2011 г.

Изменение Master Page для представления из контроллера, в ASP.Net MVC

В предыдущем посте я писал о том, что иногда приходится использовать вложенные мастер-страницы, или просто несколько главных мастер-страниц. Как мы уже знаем, при создании представления, нужно указать, наследуется ли оно от какой либо, конкретной Master Page. Но оказывается, что принадлежность к мастеру, можно менять из контроллера.

5 мая 2011 г.

Передача данных в Master Page из контроллера ASP.Net MVC

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

29 апреля 2011 г.

Передача данных с помощью JSON в представление ASP.Net MVC

Довольно часто приходится не только передавать довольно много данных из страницы в контроллер, но и в обратном направлении.
Вообще, для передачи какого-то массива данных я предпочитаю использовать JSON. Кстати говоря, для передачи в обе стороны.

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

16 апреля 2011 г.

Динамическое добавление контрола через AJAX, на ASP.Net MVC

Иногда бывают ситуации, когда необходимо динамически, без перезагрузки страницы добавить на нее еще несколько новых элементов. Но что делать, если позарез нужно вставить целый html-блок? Вот тут нам на помощь и приходят UserControl-ы.

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

13 апреля 2011 г.

Загрузка файлов на сервер через Uploadify, для ASP.Net MVC

Рано или поздно здравый смысл берет верх, и становится понятно, что для загрузки файлов на сервер нужно что-то получше, чем обычный input type="file". Сегодня мы займемся тем, что прикрутим нормальный загрузчик файлов к MVC-проекту. Кроме того, мы попробуем добавить немного дополнительного функционала для обработки загружаемого файла. Если интересно, то прошу далее...

23 марта 2011 г.

ActionLink в виде картинки, для Asp.Net MVC

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

Некоторое время назад я бился в муках над, казалось бы, простой деталью - сделать ссылкой обычную картинку. Речь идет именно о ActionLink.
Ведь странно, что MVC изначально предлагает нам только вариант с текстом.

Вобщем, было сложно, но решение нашлось. И умещается оно в одну инструкцию:

<%= Server.HtmlDecode(Html.ActionLink("<img src=\"/Content/floppy.png\" border=\"0\" 
alt=\"Some description\" />","doit").ToHtmlString()) %>

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

Я не знаю насколько такое решение верное, но мне оно вполне подошло, а задача была решена.

_____
Исходники

20 марта 2011 г.

Применяем autocomlete в Asp.Net MVC

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

19 марта 2011 г.

Обрезка изображения в Asp.Net MVC используя Jcrop

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

13 марта 2011 г.

Работа с изображениями (Uploading with Resize) в Asp.Net MVC

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

5 марта 2011 г.

Интеграция Asp.Net MVC приложения с Membership

Если честно, то я никогда не понимал, почему многие так ругают ASP.Net Membership.

Мне эта штука нравится. Удобно и практично. Сегодня мы займемся тем, чтобы интегрировать механизмы мембершипа в наш проект. Тоесть, нам нужно связать нашу базу данных, с мембершипом, и обеспечить нормальное функционирование системы авторизации пользователей.

Для начала, нам понадобится пустой проект (с заранее созданной фабрикой контроллеров), простенькая база данных, и немного свободного времени. Итак, поехали...

4 марта 2011 г.

Использование модального окна Thickbox в Asp.Net MVC

Несколько дней назад мне довелось прикручивать к проекту новое модальное окно (простыми словами - попап). До этого использовался JQuery плагин "Colorbox", но с ним оказалось очень много проблем. В результате выбор пал на плагин Thickbox.

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