Выкарыстанне ASP.NET 3.5 у ListView і кіравання DataPager: Стварэнне SEO-дружалюбных пэйджынгу інтэрфейс

ўвядзенне

GridView, FormView і DetailsView кіравання ўтрымліваюць убудаваныя функцыі падпампоўкі. Усталяваўшы некалькі уласцівасцяў, можна мець які-небудзь з гэтых элементаў кіравання аўтаматычна ўключае ў сябе інтэрфейс падпампоўкі. ListView, аднак, не ўключае ў сябе убудаваныя функцыі падпампоўкі. Замест гэтага Microsoft развязаныя логіку пошукавага выкліку з ListView і перамясціў яго ў асобны вэб-кантроль - DataPager. Гартання дадзеных з ListView і кіравання DataPager , Раней апублікаваная артыкул у гэтай серыі, даследавала, як выкарыстоўваць DataPager рэалізаваць інтэрфейс падпампоўкі для ListView.

Па змаўчанні, DataPager робіць кнопкі, LinkButtons або ImageButtons ў інтэрфейсе падпампоўкі на наступны, папярэдні, першы, апошні і лічбавыя кнопкі нумар старонкі. Пры націску на гэтыя кнопкі выклікаюць постбэк, у якім пункце адпаведны набор запісаў, звязаны з ListView. На жаль, пошукавыя сістэмы не могуць сканаваць сайт з дапамогай постбэк; замест гэтага, яны належаць на спасылкі, якія яны знаходзяць на вашым сайце. Такім чынам, пошукавая сістэма будзе індэксаваць толькі на першай старонцы дадзеных , якія адлюстроўваюцца ў ListView, таму што ён не можа дасягнуць наступных старонак. Акрамя таго, карыстальнікі не могуць дадаць у закладкі канкрэтную старонку дадзеных.

Добрая навіна заключаецца ў тым, што гэта даволі лёгка змяніць паводзіны DataPager па змаўчанні. У гэтым артыкуле паказана, як наладзіць DataPager выкарыстоўваць гіперспасылак і радок запыту на старонкі з дапамогай дадзеных кіравання ListView (а не постбэков) для стварэння SEO-дружалюбны інтэрфейс падпампоўкі. Чытайце далей, каб даведацца больш!

Праблема з постбэков

ASP.NET Web Forms традыцыйна выкарыстоўваюць постбэк для выканання якіх - небудзь дзеянняў. Постбэк адбываецца, калі карыстальнік націскае на кнопку, LinkButton або кантроль ImageButton, ці калі яны выконваюць пэўную на баку кліента дзеянне, якое было наладжана, каб выклікаць зваротную перадачу (напрыклад, выбраўшы іншы элемент з элемента кіравання DropDownList, чыё AutoPostBack ўласцівасць было ўстаноўлена у True). Постбэк адпраўляе вэб-форму, падахвочваючы браўзэр паўторна запытвае тую ж самую старонку і адправіць па пару імя / значэння элементаў <INPUT> у <формы>. На старонцы ASP.NET затым паўторна вынесена, з выніковай HTML адпраўленыя назад у браўзэр для і перамаляваны.

Мадэль постбэка добра працуе для многіх сцэнарыяў. Адным з яго недахопаў, аднак, заключаецца ў тым , што гэта не прывядзе да SEO-дружалюбны вэб - сайт. SEO, або Пошукавая аптымізацыя , З'яўляецца практыка павышэння якасці або колькасці трафіку, які паступае на сайт з пошукавых сістэм. SEO дружалюбны сайт адзін, чый HTML структураваная і раскладвалі такім чынам, што павышае бачнасць сайта ў пошукавай сістэме. Пошукавыя сістэмы выкарыстоўваюць аўтаматызаваныя праграмы для індэксавання сайта. Гэтыя «Шукальнікі», як правіла, пачынаюць, наведаўшы галоўную старонку сайта, а затым закапвання ў іншыя вэб-старонкі на сайце, якія звязаны з хатняй старонкі. Шукальнікі будуць прытрымлівацца спасылках, але яны не будуць прадстаўляць формы. Калі ў вас ёсць старонка, дзе пэўны змест бачная толькі пасля постбэка тое, што дадзеныя не будуць праіндэксаваныя пошукавымі сістэмамі.

Па змаўчанні, DataPager робіць кнопкі, LinkButtons або ImageButtons для інтэрфейсу падпампоўкі. Па канструкцыі гэтыя элементы кіравання, пры націску выклікае зваротную перадачу. На адваротным перадачы, то DataPager атрымлівае патрэбную старонку дадзеных для адлюстравання і звязвае яго з ListView. З пункту гледжання канчатковага карыстальніка, яны націскаюць на нумар старонкі (або адным з першых, папярэдні, наступны, апошні кнопкі) і, вуаля, убачыць адпаведную старонку дадзеных. Праблема заключаецца ў тым, што пошукавыя робаты не могуць «націснуць» кнопку ў інтэрфейсе падпампоўкі і таму толькі першая старонка вынікаў будзе індэксавацца. (Гэта SEO - ун прыязнае паводзіны таксама ўласціва GridView, FormView і DetailView кантралюе убудаваную падтрымку падпампоўкі.)

На шчасце, DataPager можа генераваць інтэрфейс кіравання пэйджынгавай SEO дружалюбны. Як мы ўбачым, на імгненне, усталяваўшы адну ўласцівасць у DataPager мы можам даручыць яму аказваць гіперспасылак ў інтэрфейсе падпампоўкі і выкарыстоўваць параметр радкі запыту, каб паказаць, што старонка дадзеных для адлюстравання.

Перасоўванне нумар старонкі ў QueryString

DataPager ўключае ў сябе QueryStringField нерухомасць што, калі ўсталявана, даручае DataPager генераваць SEO дружалюбны інтэрфейс падпампоўкі. Калі ўласцівасць QueryStringField ўстаноўлена, DataPager прадастаўляе інтэрфейс выкліку як шэраг гіперспасылка (замест рэндэрынгу інтэрфейсу падпампоўкі як шэраг кнопак, LinkButtons або ImageButtons). У прыватнасці, кожная гіперспасылка мае свой HREF атрыбут усталяваны ў бягучым URL з нумарам старонкі прайшоў ўключана ў поле радкі запыту, імя якога значэнне ўласцівасці QueryStringField.

Напрыклад, разгледзіць элемент кіравання DataPager, які настроены, каб паказаць першым, папярэдні, наступны і апошнюю кнопку, і што ёсць пяці усяго старонак дадзеных, пралісталі. Ўстаноўка ўласцівасці QueryStringField ў DataPager да «PageNumber» прывядзе да наступнага інтэрфейс падпампоўкі разметкі пры праглядзе першай старонкі дадзеных:

<a disabled="disabled"> Першы </a>
<a disabled="disabled"> Папярэдні </a>
<a href=" PageName .aspx? PageNumber=2 "> Наступны </a>
<a href=" PageName .aspx? PageNumber=5 "> Апошні </a>

Паколькі мы разглядаем першую старонку дадзеных, першыя і Папярэднія спасылкі неактыўныя. Неактыўныя спасылкі адлюстроўваюцца ў выглядзе спасылак з наборам атрыбутаў інвалідаў. Наступная спасылка адпраўляе карыстачу PageName .aspx? PageNumber = 2. Тут PageNumber QueryString параметр усталяваны ў 2, але ў больш агульным плане ён будзе ўсталяваны на currentPageNumber + 1. Апошняя спасылка адпраўляе карыстачу пятай і апошняй старонкі дадзеных.

Здымак экрана ніжэй паказвае інтэрфейс падпампоўкі пры візуалізацыі ў выглядзе спасылак. Першая і Папярэднія спасылкі адлюстроўваюцца ў выглядзе тэксту (а не спасылку), таму што іх атрыбуты інвалідаў ўсталёўваюцца.

Калі карыстальнік быў націснуць на спасылку Далей яны браўзэр будзе запытваць PageName .aspx? PageNumber = 2. Калі старонка адлюстроўваецца, то DataPager аўтаматычна правярае радок запыту для параметру з такім жа імем, як яго ўласнасць QueryStringField (у дадзеным выпадку, «PageNumber»). Бо гэта поле радкі запыту мае значэнне 2, то DataPager будзе аўтаматычна загружаць другую старонку дадзеных у ListView. На гэты раз, пастаронкавага інтэрфейс зробіць наступную разметку:

<a

href=" PageName .aspx? PageNumber=1 "> Першая </a>
<a href=" PageName .aspx? PageNumber=1 "> Папярэдні </a>
<a href=" PageName .aspx? PageNumber=3 "> Наступны </a>
<a href=" PageName .aspx? PageNumber=5 "> Апошні </a>

І гэта ўсё, што ёсць да гэтага! Стварэнне SEO дружалюбных DataPager гэта проста усталяваўшы яго ўласцівасць QueryStringField некаторага значэння. З гэтым змяненнем, пошукавыя сістэмы могуць індэксаваць не толькі на першай старонцы дадзеных. Акрамя таго, наведвальнікі могуць дадаць у закладкі канкрэтнай старонкі дадзеных, або па электроннай пошце URL для канкрэтнай старонкі дадзеных да аднаго ці калегу.

Павышэнне пэйджынгу карыстацкага інтэрфейсу

Карыстацкі інтэрфейс персанальнага выкліку паказана на здымку экрана вышэй пакідае жадаць лепшага. Усталяваўшы некалькі уласцівасцяў і даданне апырскванне CSS мы можам палепшыць інтэрфейс падпампоўкі драматычна. Для пачатку, давайце дапоўнім інтэрфейс падпампоўкі так, што замест таго, каб проста уключаючы першы, папярэдні, наступны, і апошняй спасылкі, ён таксама ўключае ў сябе лічбавыя нумары старонак. у Гартання дадзеных з ListView і кіравання DataPager мы бачылі, як вызначыць інтэрфейс падпампоўкі ў DataPager з дапамогай DataPagerFields. DataPager ў здымку экрана вышэй утрымліваў адну DataPagerField, а менавіта пэйджар поля NextPreviousPagerField. Мы можам дадаць лічбавыя старонкі, а з дапамогай трох DataPagerFields:

• NextPreviousPagerField для першага і папярэдніх варыянтаў,
• NumericPagerField для лічбавых старонак, і
• NextPreviousPagerField для Наступных і апошніх варыянтаў.

Вось дэкларатыўная разметка ў DataPager аднойчы былі дададзены гэтыя тры DataPagerFields маюць і адпаведную канфігурацыю: <жэрах: DataPager Runat = «сервер» QueryStringField = «Старонка» ...>
<Поля>
<Жэрах: NextPreviousPagerField FirstPageText = "& л; & л;" ShowFirstPageButton = "True" ShowNextPageButton = "False" />
<Жэрах: NumericPagerField />
<Жэрах: NextPreviousPagerField LastPageText = "& GT; & GT;" ShowLastPageButton = "True" ShowPreviousPageButton = "False" />
</ Fields>
</ Жэрах: DataPager>

Звярніце ўвагу, што першы NextPreviousPagerField выкананы з магчымасцю, што ўласцівасць FirstPageText ўстаноўлена значэнне «& л; & Lt;», які будзе адлюстроўваць тэкст << для (а не спачатку). Акрамя таго, яго ўласцівасць ShowNextPageButton усталёўваецца ў значэнне False так, каб схаваць кнопку Далей. (Апошняя кнопка схаваная па змаўчанні.) Сапраўды гэтак жа, другі NextPreviousPagerField сканфігураваны для падаўлення кнопкі Папярэдняй старонкі і адлюстроўваць тэкст >> для апошняй кнопкі.

Здымак экрана ніжэй паказвае новы інтэрфейс падпампоўкі пры праглядзе праз браўзэр.

Мы можам Gussy ўверх знешні выгляд з дробкай CSS. NextPreviousPagerField і NumericPagerField валодаюць ўласцівасцямі, якія дазваляюць прызначыць клас CSS для лікавых спасылак старонкі, да бягучай спасылцы лічбавай старонкі і да першай, папярэдняй, наступнай і апошняй спасылкі. Пасля ўстаноўкі гэтых уласцівасцяў, нароўні з устаноўкай ўласцівасці RenderNonBreakingSpacesBetweenControls Хлусні так, каб апусціць прастору паміж кожнай спасылкай у інтэрфейсе пошукавага выкліку, і дадання неабходных правілаў CSS, атрыманы інтэрфейс персанальнага выкліку быў ператвораны ў наступнае:

Звярніце ўвагу, як будзе выдзелены нумар бягучай старонкі. У прыведзенай вышэй здымку экрана, карыстач праглядае старонку 1, таму «1» спасылка мае чырвоны фон і белы пярэдні план, у той час як іншыя спасылкі ў інтэрфейсе пэйджынгавай перавярнулі колеру (чырвоны пярэдні план на белым фоне). Акрамя таго, пры навядзенні мышы на пэйджынг звязаць сваю мяжу і тэкст становіцца чорным, тонка падкрэсліваючы яго.

Можна спампаваць у канцы дадзенага артыкула мае поўныя правілы CSS і наладу уласцівасцяў, неабходныя для рэалізацыі вышэйпаказанага інтэрфейсу падпампоўкі.

QueryStringField і RenderDisabledButtonsAsLabels - Аповед з Буга ASP.NET

Як мы даследаваліся раней у гэтым артыкуле, пры аказанні Звязвае DataPager дадае адключаны атрыбут гіперспасылка, якія не зьяўляюцца інтэрактыўнымі, напрыклад, першым і папярэднімі спасылкамі пры праглядзе першай старонкі дадзеных. На жаль, такая разметка ня XHTML-сумяшчальны, як строгае выкананне XHTML забараняе адключаны атрыбут на <a> элемента. Клас NextPreviousPagerField мае RenderDisabledButtonsAsLabels нерухомасць , Які гучыць як ідэальнае рашэнне. На жаль, гэта не працуе ў ASP.NET версіі 3.5 - калі ўласцівасць QueryStringField ў DataPager з'яўляецца ўсталяваць RenderDisabledButtonsAsLabels ігнаруецца. Добрая навіна заключаецца ў тым, што гэтая памылка будзе выпраўленая ў .NET 4.0. (Гл Выкарыстанне DataPager як з QueryStringField і RenderDisabledButtonsAsLabels для больш стараннага апісання на праблемы ў ASP.NET 3.5, а таксама абыходны шлях.)

У дадатку да ўзлому адпаведнасці XHTML, гэтая памылка таксама робіць яго больш цяжкім, каб адключаныя кнопкі аформленых па-рознаму. Напрыклад, папярэдні здымак экрана паказвае першую старонку дадзеных, а гэта азначае, што першыя і Папярэднія спасылкі неактыўныя, але гэтыя спасылкі з'яўляюцца клікабельнасць. Вядома, калі вы навядзіце курсор мышы на іх вы хутка зразумееце, што яны не могуць быць націснутая, але ў ідэале гэтых інвалідаў спасылка будзе адлюстроўвацца па-рознаму, выкарыстоўваючы шэры колер тэксту, магчыма.

Мой абыходны шлях у гэтай сітуацыі было выкарыстоўваць дотык JQuery , Які з'яўляецца бібліятэкай JavaScript прызначаны для пералічэння, праверкі і змены элементаў у HTML DOM. У двух словах, старонка ўключае ў сябе адзін радок кода JavaScript, які выконваецца пры загрузцы старонкі. Гэты код JavaScript знаходзіць усё <a> элементы з атрыбутам інвалідаў, якія выкарыстоўваюць пэўны CSS клас (pagerButton), выдаляе гэты клас, а затым дадае альтэрнатыўны CSS клас (pagerButtonDisabled), які выводзіць неактыўныя спасылкі з выкарыстаннем шэрага колеру тэксту і выдаленне мяжа. (Хоць не паказана вышэй, я паставіў ButtonCssClass ўласцівасць элемента кіравання NextPreviousPagerField, каб pagerButton, які звязвае гэты клас CSS з кожным з чатырох першых, папярэдніх, якія ідуць, і апошніх спасылак.)

Вось што адзін радок кода JavaScript:

$ ( 'A.pagerButton [адключана]') removeClass ( 'pagerButton') addClass ( 'pagerButtonDisabled') ..;

Пры гэтым у месцы, інтэрфейс падпампоўкі зараз «зацямняюцца» неактыўныя пэйджынгавай сувязі, як паказана на наступным здымку экрана.

выснову

Па змаўчанні, DataPager робіць яго інтэрфейс падпампоўкі з дапамогай кнопкі, LinkButton або кіравання IMAGEBUTTON. Калі наведвальнік націскае адну з гэтых кнопак інтэрфейсу персанальнага выкліку, зваротная перадача надыходзіць і адлюстроўваюцца запытаная старонка дадзеных. Хоць гэтая мадэль, безумоўна, працуе, гэта не прыводзіць да SEO дружалюбны вэб-сайт. З дапамогай гэтай мадэлі, пошукавыя сістэмы не будуць індэксаваць за межамі першай старонкі дадзеных. Добрая навіна заключаецца ў тым, што DataPager прызначаны для візуалізацыі SEO-дружалюбных інтэрфейсаў пэйджынгу. Усталяваўшы QueryStringField, то DataPager робіць яго пэйджынг інтэрфейс, як шэраг спасылак, прайшоўшы патрабаваны нумар старонкі з дапамогай радкі запыту.

Вясёлае праграмаванне!

ўкладання