Управление состоянием с помощью форм HTML в ASP.NET – легкая альтернатива

Written on 04 Сентября 2013. Posted in ASP.NET

Введение

Чтобы получить все преимущества ASP.NET (в отличие от ASP или PHP), обычно используется традиционный серверный управляющий элемент – состояние просмотра – модель обратной передачи, чтобы сократить время разработки путем автоматической обработки сохранения состояния приложения между передачами формы, что позволяет разработчику сосредоточиться на функциональности, не тратя напрасно время на повторное заполнение полей формы после обратной передачи и на написание неаккуратно встроенного кода для осуществления этого.

Однако такая модель имеет недостатки при разработке приложений с тяжелым интерфейсом с помощью сложного CSS и JavaScript и становится особенно проблематичной при использовании AJAX, не являющегося частью ASP.NET AJAX: проблема в том, что при использовании серверных управляющих элементов (или даже управляющих элементов HTML, установленных в runat=server) код клиентской части, написанный разработчиком, часто имеет мало сходства с тем, что генерируется на сервере. Также он бывает весьма медленным, особенно при введении ASP.NET AJAX.

Библиотека здесь является альтернативой, позволяющей разрабатывать клиентскую часть с помощью чистого HTML и / или JavaScript, с использованием клиентских форм, в то же время сохраняя возможность сохранять состояние страницы и манипулировать содержимым страницы из серверного кода, не используя ни одного встроенного тега. Более того, проблема ограниченной поддержки для "межстраничной обратной передачи" была решена: целевая страница, отправляемая пользователю после обработки формы, не должна быть связана с передачей страницы.

В настоящее время неизмененная библиотека имеет следующие возможности и работает сразу в готовом виде:
•    Сохраняет состояние тегов INPUT (текст, пароль, радиокнопка, флажок и скрытый) и SELECT между отправками POST и / или позволяет устанавливать их состояние из серверного кода.
•    Позволяет использовать обычные клиентские элементы-контейнеры (например, DIV, SPAN) как метки и/или панели и устанавливать их содержимое на сервере.
•    Позволяет разработчику задать произвольный JavaScript, выполняющийся на целевой странице после завершения обработки формы.

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

Библиотека состоит из пользовательского управляющего элемента FakePostBack.ascx, помещаемого на страницы ASPX, для которых вы хотите использовать библиотеку, и класса FormProcessor.cs, помещаемого в папку app_code.

Было собрано пробное приложение "калькулятор", чтобы продемонстрировать использование... Разберем пример.
Клиентский код (Demo.aspx)

<%@ Register Src = "FakePostBack.ascx" TagName="FormHelper" TagPrefix="sam" %>
<html>
<head>
</head>
<body onload="FormHelper.Populate();">
<sam:FormHelper runat="server" id="customForm"></sam:FormHelper>
    <form name="calculate" method="post" action="Calculator.aspx">
        <h2>Демо-приложение, использующее обработчик форм .NET</h2>
        <b>Введите целое число:</b><br />
        <input type="text" id="num1" name="num1" /><br /><br />
        <b>Введите второе целое число:</b><br />
        <input type="text" id="num2" name="num2" /><br />
        <input type="submit" value="Calculate Sum" />
    </form>
    
    <div id="sum"></div>
    
    <script>
    function SayHello()
    {
        alert("Спасибо за использование калькулятора.");
    }
    </script>
</body>
</html>

Это совершенно стандартная HTML-страница. Для включения клиентской части библиотеки был добавлен управляющий элемент FakePostBack.ascx и вставлен непосредственно рядом с данной формой. Из атрибутов управляющий элемент требует только runat=server. Также тег <body> был изменен, чтобы запускать FormHelper.Populate при загрузке – он инициализирует управляющий элемент.

Выделенный код для вышеприведенной страницы Demo.aspx пустой – он не нужен.

Код обработки формы (Calculator.aspx.cs)

Это чисто серверная страница (Calculator.aspx пустой), и ее задача – обработать переданную форму из Demo.aspx с помощью класса FormProcessor.

Посмотрим, что здесь происходит:

FormProcessor p = new FormProcessor("Demo.aspx");

//Извлекаются переданные поля и производится вся необходимая обработка
int a = Int32.Parse(p.Get("num1", "text"));
int b = Int32.Parse(p.Get("num2", "text"));
int c = a+b;

//Задается текст для отображения при возврате и контейнер для его хранения
p.SetLabel("sum", "The sum is: "+c.ToString());

//Добавляется JavaScript
p.AddScript("SayHello();");

p.Finish();

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

Кратко рассмотрим несколько важных строк, показывающих, как использовать библиотеку:

p.Get("num1", "text")

Она возвращает содержимое поля ввода "num1" – это эквивалентно использованию Request.Form["num1"], но с сохранением состояния. Второй аргумент метода Get задает тип поля формы (доступные значения - "text", "select", "radio", "checkbox") - "text" охватывает скрытое поле и поле пароля.

p.SetLabel("sum", "The sum is: "+c.ToString());

Она приказывает клиентскому модулю заполнить пустой <div id="sum"> заданным содержимым.

p.AddScript("SayHello();");

Заданный здесь JavaScript будет выполнен на целевой странице.

p.Finish()

Браузер перенаправляется на Demo.aspx, URL задан в конструкторе FormProcessor.

Изображение 1 - Страница перед передачей

Изображение 2 - Страница после передачи

Как это работает

Детали тут разбираются не досконально - код в FormProcessor.cs, FakePostBack.ascx и FacePostBack.ascx.cs легко понять, - но кратко:
Методы Get(), SetLabel() и AddScript()в FormProcessor.cs добавляют в массив JSON(объектная нотация JavaScript). FormProcessor.Finish() помещает этот массив в переменную Session и перенаправляет на страницу, содержащую FakePostBack.ascx.

Выделенный код для FakePostBack.ascx проверяет на наличие переменной Session; если она найдена, она помещается в строку public string и затем уничтожается.

Наконец, вызов к FormHelper.Populate() вызывает JavaScript, сгенерированный FakePostBack.ascx – он захватывает строку string, содержащую JSON из выделенного кода, и если строка string не пустая, обходит массив в цикле, заполняя поля форм, устанавливая содержимое элементов и исполняя любые блоки скриптов.

форум c# asp net

Управление состоянием с помощью форм HTML в ASP.NET – легкая альтернатива

ОГЛАВЛЕНИЕ

Введение

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

Код обработки формы (Calculator.aspx.cs)

Как это работает