Затем следует основная функция, служащая для показа фиксированного количества сообщений пользователей (значения извлекаемого из таблицы административных настроек):

<% Sub Show NumPerPage=INT(objRec2("NumPerPage")) If Request.QueryString("page") = "" Then iPageCurrent = 1 Else iPageCurrent = CInt(Request.QueryString("page")) End If Set objRec = Server.CreateObject ("ADODB.Recordset") StrSql = "SELECT * FROM Messages ORDER BY ID DESC;" objRec.PageSize = NumPerPage objRec.CacheSize = NumPerPage objRec.Open StrSql,objConn,3,1,&H0001 iPages = objRec.PageCount TotalRows = objRec.RecordCount If iPageCurrent > iPages Then iPageCurrent = iPages If iPageCurrent < 1 Then iPageCurrent = 1 If iPages = 0 Then Response.Write "Не найденно записей!" Else ObjRec.AbsolutePage = iPageCurrent %>

" color="<%=objRec2("PageFontColor")%>" size="<%=objRec2("PageFontSize")%>"> Всего в книге <%=TotalRows%> записей на <%=iPages%> странице(ах)

"> " color="<%=objRec2("InfoFontColor")%>" size="<%=objRec2("InfoFontSize")%>"><%=ObjRec("DateID") %>		"> " color="<%=objRec2("InfoFontColor")%>" size="<%=objRec2("InfoFontSize")%>">Оценка сайта: .gif" height="14" width="65">
"> " color="<%=objRec2("MessageFontColor")%>" size="<%=objRec2("MessageFontSize")%>"><%=FormatStr(ObjRec("Message"))%>
"> " color="<%=objRec2("InfoFontColor")%>" size="<%=objRec2("InfoFontSize")%>"> <% If IsEmpty(Email) or Email=" " then Response.Write Name Else Response.Write " " & Name End If %>	"> " color="<%=objRec2("InfoFontColor")%>" size="<%=objRec2("InfoFontSize")%>"><%=FormatStr(ObjRec("Country")) %> IP:<%= ObjRec("IP") %>	"> " color="<%=objRec2("InfoFontColor")%>" size="<%=objRec2("InfoFontSize")%>"> <%=Link%>

" color="<%=objRec2("PageFontColor")%>" size="<%=objRec2("PageFontSize")%>"> Pages: <% For I = 1 To iPages If I = iPageCurrent Then Response.Write "" & I & " " Else Response.Write "" & I & " " End If Next Response.Write "" Else Response.Write " " End If End If objRec.Close Set objRec = Nothing End Sub %>

Обратите внимание на то, каким образом формируется и осуществляется ссылка на просмотр следующей странички с такой «порцией» сообщений:

Response.Write "" & I & " "

Как видите, в качестве значения параметра page ей передается номер странички и впоследствии, если это значение не равно 1, показ сообщений начинается не с первого сообщения, а с того, которое окажется первым по счету на страничке с соответствующим номером, заданным в параметре:

<% NumPerPage=INT(objRec2("NumPerPage")) If Request.QueryString("page") = "" Then iPageCurrent = 1 Else iPageCurrent = CInt(Request.QueryString("page")) End If %> Далее следует исходный текст самого модуля, в котором осуществляются подключение к базе данных и извлечение записей (в описываемом примере это будет единственной записью) из таблицы административных настроек Admin: <% Set objConn = Server.CreateObject ("ADODB.Connection") objConn.Open StrConn Set objRec2 = Server.CreateObject ("ADODB.Recordset") ConfigSql = "SELECT * FROM Admin;" objRec2.Open ConfigSql,objConn,0,1,&H0001 %>

Затем можно оформить заголовок и основные тэги HTML-странички:

Заключение

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

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

КомпьютерПресс 11"2001

Регистрация элементов управления осуществляется директивой @Register, которая позволяет использовать в HTML коде страницы user controls и server controls, используя специальный синтаксис (declarative custom server control syntax). Парсер страниц на основе анализа этих директив может связывать теги с заданными типами и при создании страницы встраивать элементы управления уже как контейнеры пользовательских типов – ветви дерева элементов управления страницы.

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

В статье описан способ, упрощающий регистрацию элементов управления.

Для директив регистрации мы будем использовать обычный текстовый файл, в котором соберем все директивы @ Register. Так как для объявления user controls можно использовать виртуальные пути, а для server controls указываются лишь пространства имен, мы можем собрать в этом файле все нужные нам ссылки, причем ссылки на файлы ascx будут верными для любой папки проекта. Вот как выглядит этот файл в одном из проектов:

Назовем файл register.inc и поместим в папку /inc нашего веб-проекта.

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

Теперь созданный файл нужно каким-то образом включить в код страницы. Мы сделаем это с помощью директивы SSI (server side includes) #include. Эта директива позволяет включать в код страницы статические и динамические файлы, обрабатывая их на основе маппинга IIS, т.е. указание в качестве источника файла asp или aspx приведет к обработке файла соответствующим процессом и копированию результатов этой обработки в выдаваемую страницу. В ASP директива #include очень широко использовалась и позволяла реализовать модульность сайта. С появлением ASP.NET это стало удобнее делать другими способами, например, с помощью user controls. В следующих версиях ASP.NET модульность будет реализована с использованием master pages. В общем, директива #include потеряла свое значение и была сохранена в основном для обратной совместимостью и для упрощенной миграции ASP проектов на.Net.

Так как у нас простой текстовый файл, никакой обработки произведено не будет, и до выполнения любого динамического контента все содержимое файла будет скопировано в код страницы. Т.е. добавление нашего файла register.inc, например, в начало страницы, это почти то же самое как будто бы мы напишем там все директивы @ Register.

Для того чтобы не зависеть от физического размещения файла, мы снова используем синтаксис с указанием виртуального пути и добавим в код aspx файла вот такую строчку:

Убедитесь, что все работает, если нет, поправьте неверно указанные пути.

Осталось осуществить еще одну операцию. Сейчас, если вы попробуете по ссылке в браузере получить файл /inc/register.inc, вы без труда сможете это сделать. IIS отдает его в ваши руки, так же как в руки злоумышленника, совершенно свободно, хотя там содержатся пути физической структуры вашего сайта.

Для того чтобы этого не происходило, мы используем возможности синхронного обработчика HttpForbiddenHandler, позволяющего защищать файлы определенного типа от выдачи по запросам пользователя. Этот подход удобен и часто используется, например, для защиты файлов баз данных MS Access, используемых в проекте. Для того чтобы файлы с расширение *.inc можно было защитить с помощью этого обработчика нужно сообщить IIS что эти файлы будет обрабатывать процесс ASP.NET, другими словами настроить в IIS маппинг на файлы этого типа.

Подробное описание процесса настройки для IIS описано в статье HOW TO: Use ASP.NET to Protect File Types (http://support.microsoft.com/kb/815152/EN-US/). Нам потребуется создать маппинг только для файлов типа *.inc. После выполнения описанных там шагов, все запросы к файлам с таким расширением будут обрабатываться процессом ASP.NET, и вам останется отредактировать файл web.config следующим образом:

Все, теперь при попытке получить файл /inc/register.inc по прямой ссылке пользователь получит ошибку В.

Чтобы не регистрировать aspnet_isapi.dll, например, ваш провайдер не хочет этого делать можно воспользоваться возможностью SSI указывать файлы любого типа и схитрить, использовав для файла с директивами @Register расширение одного из типов, уже маппированных в IIS по умолчанию. Для этого будут удобны расширения *.cs или *.vb. Эти файлы содержат исходный код и обычно не копируются на сервер. Если вы вдруг ошиблись и скопировали, по запросу из браузера их получить не удастся, - при попытке это сделать пользователь получит ошибку В. Так происходит потому, что для фалов этого типа маппинг в IIS настроен по умолчанию а соответствующее расширение уже прописано в секции файла machine.config. В Visual Studio для того чтобы компилятор не выдавал вам сообщение об ошибке, поставьте расширение которое компилятор не интересует: в проектах на C# это *.vb, в проектах VB - *.cs.
Заключение

Описанный способ позволяет регистрировать элементы управления в одном месте для всего проекта. Последующая модификация этого файла требует меньше усилий по сравнению с тем, как если бы пришлось делать это обычным способом. Попробуйте использовать SSI #include внутри самих вставляемых файлов – это позволяет организовать подобие иерархии и наследования, что может быть удобно для крупных проектов

Directives in AngularJS play an important role. Directives can be used to teach new tricks to HTML, and you can even create your own HTML tags or attributes. Directives also help in keeping the mark-up more fluent and defines a nice way of separating code and mark-up from each other.

View is a HTML template. View is nothing but the information you want to render to the end user’s browser. A view in AngularJS is also called as compiled DOM . View makes use of directives to render the data with HTML template.

This article is Part IV of the Project Tracking Website built in AngularJS and ASP.NET Web API. So far, we have , created a , and have .

Thanks to to review this Angular series and fix the bugs.

We have already seen the $scope object which provides a Model to the View. Model code is not intermixed with the HTML code we write into our views. Rather data is moved from the model to views by using data binding expressions. This way developers can achieve Separation of Concerns (SoC). Since Models are independent of Views, they can be bound to any View. This binding of model is done with the help of AngularJS Directives.

We have already seen some Angular directives in our like ng-app which bootstraps AngularJS, as well as ng-controller that makes the controller available to HTML. From the controller, we can bind the data to the views using Angular {{expression}}.

In this article, we will look at a couple of additional AngularJS directives which come out-of-the-box with Angular. One of them is ng-repeat . Let’s try using ng-repeat directive into our EmployeeDetails.html page that can be found in the accompanying this article. Modify the service URL in our EmployeesController.js file. The service URL is as follows:

http://localhost:2464/api/ptemployees

Now we will modify the EmployeeDetails.html page as shown in following code -

{{emp.employeeID}} {{emp.employeeName}} {{emp.designation}} {{emp.contactNo}} {{emp.eMailID}} {{emp.skillSets}}

Replace the of EmployeeDetails.html page with above code. The output of the above code is shown here:

In this code, we have used the ng-repeat directive of AngularJS. It is similar to the for or foreach loop in .NET. Here we are getting an IEnumerable collection using ASP.NET Web API. We are using this collection as a model in our Angular Controller. Using this model, we are iterating the objects of employees, into our view. This is a very helpful directive which repeats through the objects in the collection to display the data on the view.

Now let’s try adding a filter to search a particular Employee from the collection and display the employee based on given Employee Name or Employee Name character. Till now, we have fetched the model and used it in our Views. It also works the other way. We can make our views talk back to our models which are there in our controllers.

To add a search filter based on Employee Name, we will modify the EmployeeDetails.html page by adding HTML input elements as shown below -

Add the above code just after the

tag. In the above code, we are using ng-model directive which enables us to send the data back to the model. Based on this data, we will make a search for an employee using EmployeeName property. Make sure that EmployeeName property is declared in our model, which we will do in the following steps. Also notice that we are using ng-submit directive which will give a call to SearchEmployee function from our controller.

Now let’s modify the EmployeesController.js file so that we can search the employee based on EmployeeName property as a searching criteria. The code is shown below -

(function () { var EmployeesController = function ($scope,$http) { var employees = function (serviceResp) { $scope.Employees = serviceResp.data; }; $scope.SearchEmployees = function (EmployeeName) { $http.get("http://localhost:2464/api/ptemployees/" + EmployeeName) .then(employees, errorDetails); }; var errorDetails = function (serviceResp) { $scope.Error="Something went wrong ??"; }; $http.get("http://localhost:2464/api/ptemployees") .then(employees,errorDetails); $scope.Title = "Employee Details Page"; $scope.EmployeeName = null; }; app.controller("EmployeesController", EmployeesController); }());

In the above code, we have added the SearchEmployee() method to our $scope object as a model. This method will search for Employees based on employee name or the character of an employee name. We have also declared EmployeeName property in our controller at the end of this code. The SearchEmployees method fetches the Web API method. I have modified the method GET as shown here:

Public HttpResponseMessage Get(string name) { var employees = EmployeesRepository.SearchEmployeesByName(name); HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, employees); return response; }

The Employee Repository code is as shown here:

Public static List SearchEmployeesByName(string employeeName) { ProjectTrackingDBEntities dataContext = new ProjectTrackingDBEntities(); var query = from employee in dataContext.Employees where employee.EmployeeName.Contains(employeeName) select employee; return query.ToList(); }

After all these changes, now run the EmployeeDetails.html page and see the output.

In the above output, we are searching for employees whose name contains the ‘J’ character in it.

AngularJS Filters extend the behavior of binding expressions or directives. Filters are used with binding expressions to format the data being bound. When they are used with directives, they add some additional actions to the directives. Out-of-the-box, AngularJS provides a number of filters which we can use to format the values of an expression and display the values/data into our views. You can make use of filters in Views, Controllers and Services. The syntax of using filters into views is {{ expression | filter1 | filter2 | ...}}.

We will now try a filter which will sort the data using employee name. To sort the data, let’s add a filter in our ng-repeat using a | operator as shown here:

In the above code, we are adding filter in our ng-repeat directive. The orderBy:’employeeName’ will sort the data using Employee name in an ascending order. You can observe the output here:

To display the data in descending order, you can change the filter as shown here:

In the above code, to sort the employee names in descending order, we have used (-) minus sign. Likewise, you can make use of (+) sign to sort it in ascending.

You can also make use limitTo filter to limit the number of records. For example, let us say at a time you want to display 5 employees. To display the restricted number of records in our EmployeeDetails.html page, let’s modify the ng-repeat directive as shown here-

The output is shown here:

Now if you run the ProjectDetails.html page, the date is getting displayed with time. You can apply the date filter as shown in following code -

{{proj.projectID}} {{proj.projectName}} {{proj.startDate|date:"short"}} {{proj.endDate|date:"short"}} {{proj.clientName}}

The output of this page is as follows:

You can make use of different date formats like - fulldate, longdate, mediumdate, shortdate etc. Now let’s open EmployeeDetails.html page and run it. I am using the ‘Z’ character to display employees whose employee name contains Z.

If you observe, the output displays an Employee table heading without data. We can make the heading invisible using the ng-show directive when the filter doesn’t produce any result. Apply ng-show directive in our table tag as shown in the below code and try running the application with Z character. Now you will not see the table columns when Employees model is null. The ng-show attribute will evaluate the Employees model and accordingly it will either display the table or hide the table.

Likewise, there are a number of directives which you can use in AngularJS. You can also design a Custom Directive which we will see later in this series. Apply the search on various views as per your requirement in our views. In our next article, we will take a look at

СХОЖИЕ СТАТЬИ

• Обратная связь
• Карта сайта
• О сайте