Показаны сообщения с ярлыком jQuery. Показать все сообщения
Показаны сообщения с ярлыком jQuery. Показать все сообщения

среда, 11 марта 2015 г.

Как сделать поля ввода с "подсказками" с помощью jQuery и CSS

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


В принципе, все современные браузеры, поддерживают стандарт HTML5 и, соответственно, атрибут placeholder, которой для этой цели и был придуман. Проблема в том, если вам необходима поддержка старых браузеры или чуть менее старые версии Internet Explorer (который начал поддерживать этот атрибут только в 10 версии), то подсказку созданную с помощью него они не увидят.
Если вы используете на своем сайте jQuery, то есть простое и быстрое решение для создания таких полей буквально несколькими строчками кода.  Прежде всего нужно создать стиль отображения "подсказок":

<style type="text/css">
    .helpField { background:white; }
    .blankHelpFieldText { color: #a1a1a1; font-style: italic; }
</style>


При этом, первый стиль несет в себе единственное практическое предназначение - быть "свойством" к которому будет привязываться скрипт отображения текста подсказки. Так что, вместо background можете написать что вам больше подходит, например width.


среда, 5 ноября 2014 г.

ASP.NET 4.5 и Unobtrusive Validation, Progressive Degradation и что это все нам дает.

В ASP.NET 4.5 среди прочих нововведений, во всю начал применяться так называемый подход Unobtrusive JavaScript, то есть, "ненавязчивый JavaScript" и использование jQuery. Эта технология уже применяется в ASP.NET MVC, по-моему, с третьей версии, и вот, теперь дело дошло и до WebForms.


Что же это за зверь "Unobtrusive JavaScript"? Это относительно новый подход к разработке клиентской части web-страниц, предполагающий несколько вещей:

  1. Отделение поведения (JavaScript) от структуры и представления (HTML/CSS). То есть, такой своеобразный вариант клиентского MVC.
  2. Попытки избежать традиционных проблем JavaScript (т.е., максимально возвожная браузеро- и платформонезависимость и масштабируемость)
  3. Использование подхода Graceful degradation, то есть приложение должно оставаться работоспособным при использовании даже старых браузеров возможно вообще не поддерживающих JavaScript.
В ASP.NET все эти принципы проявляются в виде Unobtrusive Validation, о которой я постараюсь вам рассказать применительно к общей концепции Unobtrusive JavaScript.

В качестве примера давайте создадим простой web-приложение на ASP.NET 4.5 и добавим в него одну единственную страничку с текстовым полем, кнопкой и валидатором того, что текстовое поле заполнено. 

Как вы, наверное, помните, в предыдущих версиях добавление валидатора влекло за собой добавление в код страницы целой простыни JavaScript кода. А что сейчас? Давайте попробуем запустить наш пример.


воскресенье, 6 апреля 2014 г.

Вызов методов web-сервисов/серверных методов с помощью jQuery

В старые добрые времена, если вы хотели обратиться из клиентского кода к веб-сервису, или, что серверному методу [WebMethod], то приходилось писать много кода использующего javascript-объект XMLHttpRequest. Сейчас же, если вы используете в своем ASP.NET проекте jQuery, сделать серверный запрос из клиентского кода очень просто. Допустим, у вас есть вот такой метод:

        [WebMethod]
        public static string GetSomeNewString(string _id, string _name)
        {
             string result;
             /..../
             return result;
        }

Все что вам нужно, чтобы вызвать его на клиенте это написать что-то типа:
        $.ajax({
            type: "POST",
            url: "~/Default.aspx/GetSomeNewString",
            data: "{'_id': '" + Id + "','_taskid': '' }",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            context: this,
            success: function (response) {
                //сюда мы попадаем в случае успешного выполнения серверной функции
                //результат выполнения будет в response.d
            },
            failure: function (response) {
                 //сюда мы попадаем в случае ошибки
                 alert(response.d);
            }
        });


Кстати, этот же способ можно использовать и для веб-частей SharePoint. Единственное отличие в том, что веб-часть не может содержать серверные методы (то есть, конечно, может, но смысла в этом мало - обращаться к вы можете только либо к веб-сервисам, либо к страницам с веб-методами).  Так что, все что вам нужно - это добавить в проект решения для SharePoint страницу приложения (Application Page) которая и будет содержать веб-методы: