\r\n <SelectParameters>\r\n <asp:QueryStringParameter DefaultValue="" Name="deutschername" \r\n QueryStringField="name" Type="String" \/>\r\n <asp:QueryStringParameter DefaultValue="" Name="lateinischername" \r\n QueryStringField="name" Type="String" \/>\r\n <\/SelectParameters>\r\n\r\n<\/pre>\nDer Vorteil davon, dass wir in ASPX immer vollst\u00e4ndige Seiten machen m\u00fcssen, ist, dass man die Detailseite auch direkt testen kann, vorausgesetzt, man h\u00e4ngt dem Aufruf einen Parameter name= mit einem g\u00fcltigen Namen an, z.B.
\nhttps:\/\/www.ecotronics.ch\/mobile\/IndexmSnippet.aspx?name=Anthemis tinctoria<\/p>\n
F\u00fcr den zweiten Schritt l\u00f6sche ich in der Hauptseite alles, was innerhalb des Tags <p id=”blumenDetail”> steht. Das Tag selbst bleibt bestehen, denn in dieses Tag laden wir mit JQuery den von AJAX geholten Inhalt. Damit wir eine eindeutige ID f\u00fcr dieses Tag haben, erg\u00e4nzen wir das Tag folgendermassen:<\/p>\n
\r\n <p id='<%# "blumenDetail" + (Container.ItemIndex) %>'>\r\n <\/p>\r\n<\/pre>\nDies ist nicht zwingend notwendig, macht aber den Source-Code \u00fcbersichtlicher. Denn wenn wir innerhalb eines Repeaters statische IDs vergeben, sind diese nicht mehr eindeutig. Das Framework erg\u00e4nzt sie dann selbst\u00e4ndig mit eindeutigen, aber in ihrer L\u00e4nge ausgesprochen un\u00fcbersichtlichen Benennungen.
\nDie gleiche Erg\u00e4nzung machen wir auch beim <div>-Tag, das das einzelne Listenelement umgibt, und bei den zwei Label-Komponenten, mit denen wir den lateinischen oder deutschen Titel anzeigen. Mit den beschriebenen Modifikationen sieht der Repeater nun so aus:<\/p>\n
\r\n <asp:Repeater ID="repKeimverhalten" runat="server" DataSourceID="dsKeimverhalten">\r\n <ItemTemplate>\r\n <div id='<%# "myCollapsible" + (Container.ItemIndex) %>' \r\n data-role="collapsible" data-collapsed="true">\r\n <h3>\r\n <asp:Label visible='<%#Request.Params.Get("l") == "l"%>' \r\n ID="blumenLateinischerName" \r\n name='<%# "blumenLateinischerName" + (Container.ItemIndex) %>' \r\n runat="server" Text='<%#Eval("lateinischername")%>'><\/asp:Label>\r\n <asp:Label ID="blumenName_d" \r\n name='<%# "blumenName_d" + (Container.ItemIndex) %>' \r\n runat="server" Text='<%#Eval("name_d")%>'\r\n visible='<%#Request.Params.Get("l") != "l"%>'><\/asp:Label>\r\n <\/h3>\r\n <p id='<%# "blumenDetail" + (Container.ItemIndex) %>'>\r\n <\/p>\r\n <\/div>\r\n <\/ItemTemplate>\r\n <\/asp:Repeater>\r\n<\/pre>\nDieser Code ist auch schon vorbereitet darauf, die Titelanzeige anhand der Buttons in der Fussleiste zwischen deutschen und lateinischen Namen zu wechseln.
\nNun fehlt noch der dritte Schritt, das JavaScript:<\/p>\n
\r\n <script type="text\/javascript">\r\n $(document).ready(function () {\r\n $("div[id^='myCollapsible']").bind('expand', function () {\r\n var blumenName = $(this).find("span[name^='blumen']").text();\r\n $(this).find("p[id^='blumenDetail']").load('IndexmSnippet.aspx #blumenDetailSource', \r\n 'name=' + blumenName );\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/pre>\nF\u00fcr alle <div>-Tags, deren Id mit “Collapsible” anf\u00e4ngt (das bedeutet id^=..), fangen wir das Event expand <\/strong>ab. Den Namen der Blume holen wir aus dem Span-Element, dessen Name mit “blumen” beginnt. Diesen Namen \u00fcbergebe ich als zweites Argument im AJAX-Aufruf load<\/strong>. Aufgerufen wird nat\u00fcrlich meine vorbereitete Snippet-Seite. Nun muss ich das HTML, das aus dem load-Aufruf zur\u00fcckkommt, nur noch an das <p>-Tag, dessen Id mit blumenDetail beginnt, innerhalb des aufrufenden Collapsible-Tags h\u00e4ngen und fertig ist die Mobile-Liste.
\nVon hier aus sind weitere Optimierungen denkbar: Zur Zeit wird von Anfang an die volle Liste angezeigt, obwohl der User m\u00f6glicherweise nur die ersten paar Titel \u00fcberhaupt zu Gesicht bekommt. Eigentlich w\u00e4re es sinnvoll, die Liste erst nachzuladen, wenn der User nach unten scrollt. Aber das kommt vielleicht ein andermal.<\/p>\n","protected":false},"excerpt":{"rendered":"Blumenfinder mit JQuery Mobile und AJAX<\/p>\n
Dieses Tutorial zeigt, wie man mit JQuery Mobile, AJAX und ASP.NET datenbasierte Webseiten erstellen kann, die f\u00fcr mobile Ger\u00e4te optimiert sind. Das Ziel ist es, meine Seite mit Kulturanleitungen f\u00fcr Garten- und Wildblumen in ein handytaugliches Format zu bringen. In der ersten Version handelt es sich um eine […]<\/p>\n","protected":false},"author":1,"featured_media":2239,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[63,34,35],"tags":[30,62,28,227,288],"_links":{"self":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2160"}],"collection":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2160"}],"version-history":[{"count":42,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2160\/revisions"}],"predecessor-version":[{"id":2252,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/2160\/revisions\/2252"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=\/wp\/v2\/media\/2239"}],"wp:attachment":[{"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ecotronics.ch\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Blumenfinder](\"https:\/\/blog.ecotronics.ch\/wordpress\/wp-content\/uploads\/2013\/06\/ScreenshotJQueryMobile.jpg\")
<\/a>