{"id":1007,"date":"2014-02-17T07:59:21","date_gmt":"2014-02-17T07:59:21","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=1007"},"modified":"2014-02-21T16:09:41","modified_gmt":"2014-02-21T16:09:41","slug":"asp-net-juiceui-web-control-updatepanel","status":"publish","type":"post","link":"https:\/\/www.rezafaisal.net\/?p=1007","title":{"rendered":"[ASP.NET] JuiceUI Web Control & UpdatePanel"},"content":{"rendered":"

Pada tulisan sebelumnya ditulis pengenalan tentang JUICE UI di sini : http:\/\/www.rezafaisal.net\/?p=1001<\/a>.\u00a0 JUICE UI<\/a> adalah web control untuk mempermudah penggunaan jQuery UI pada halaman web from pada ASP.NET.\u00a0 Pada posting tersebut<\/a> diperlihatkan\u00a0 antarmuka salah satu control JUICE UI secara default lebih bagus jika dibandingkan antarmuka salah control Ajax Control Toolkit.<\/p>\n

Tetapi \u2026.<\/p>\n

Tetapi \u2026.<\/p>\n

Tetapi memang yang lebih tua (baca : Ajax Control Toolkit) lebih matang dalam penggunaannya dan dalam hal integrasi dengan teknologi-teknologi yang sudah ada. Sebagai contoh integrasi dan kerjasama JUICE UI web control dengan control dari AJAX Extension seperti control UpdatePanel.<\/p>\n

Berikut ini adalah contoh kode penggunaan salah satu control Tab pada Ajax Control Toolkit dengan control UpdatePanel pada AJAX Extension.<\/p>\n

\n
<<\/span>asp:UpdatePanel<\/span> ID<\/span>=\"UpdatePanel1\"<\/span> runat<\/span>=\"server\"<\/span>><\/span>    <<\/span>ContentTemplate<\/span>><\/span>        <<\/span>ajaxToolkit:TabContainer<\/span> runat<\/span>=\"server\"<\/span>><\/span>            <<\/span>ajaxToolkit:TabPanel<\/span> runat<\/span>=\"server\"<\/span>><\/span>                <<\/span>HeaderTemplate<\/span>><\/span>Header<\/<\/span>HeaderTemplate<\/span>><\/span>                <<\/span>ContentTemplate<\/span>><\/span>                    Content                    <<\/span>asp:Button<\/span> ID<\/span>=\"Button1\"<\/span> runat<\/span>=\"server\"<\/span> Text<\/span>=\"Button\"<\/span> \/><\/span>                <\/<\/span>ContentTemplate<\/span>><\/span>            <\/<\/span>ajaxToolkit:TabPanel<\/span>><\/span>        <\/<\/span>ajaxToolkit:TabContainer<\/span>><\/span>    <\/<\/span>ContentTemplate<\/span>><\/span><\/<\/span>asp:UpdatePanel<\/span>><\/span><\/pre>\n
 <\/p>\n<\/div>\n
Kode di atas dapat dimuat tanpa error dan saat tombol diklik juga tidak terjadi masalah.<\/p>\n
Bagaimana dengan JUICE UI dan UpdatePanel?<\/p>\n
Dibuat kode yang mirip dengan kode sebelumnya, yaitu sepeti contoh di bawah ini :<\/p>\n
\n
<<\/span>asp:UpdatePanel<\/span> ID<\/span>=\"UpdatePanel2\"<\/span> UpdateMode<\/span>=\"Conditional\"<\/span> runat<\/span>=\"server\"<\/span>><\/span>    <<\/span>ContentTemplate<\/span>><\/span>        <<\/span>juice:Tabs<\/span> ID<\/span>=\"juiceTab1\"<\/span> runat<\/span>=\"server\"<\/span>><\/span>            <<\/span>juice:TabPage<\/span> Title<\/span>=\"Tab 1\"<\/span> runat<\/span>=\"server\"<\/span> ID<\/span>=\"_Tab1\"<\/span>><\/span>                <<\/span>TabContent<\/span>><\/span>                    Tab 1                    <<\/span>asp:Button<\/span> ID<\/span>=\"Button1\"<\/span> runat<\/span>=\"server\"<\/span> Text<\/span>=\"Button\"<\/span> \/><\/span>                <\/<\/span>TabContent<\/span>><\/span>            <\/<\/span>juice:TabPage<\/span>><\/span>        <\/<\/span>juice:Tabs<\/span>><\/span>    <\/<\/span>ContentTemplate<\/span>><\/span><\/<\/span>asp:UpdatePanel<\/span>><\/span><\/pre>\n
 <\/p>\n<\/div>\n
Kode di atas dimuat tanpa error, tetapi saat tombol diklik maka akan terjadi masalah dan error yang menampilkan pesan berikut ini :<\/p>\n
\n
Line: 940Error: Sys.WebForms.PageRequestManagerServerErrorException: A potentially dangerous Request.Form value was detected from the client (_juiceWidgetOptions=\"...spinner\"<\/span>:\"<em>Loading&#8230;<\/...\"<\/span>).<\/pre>\n
 <\/p>\n<\/div>\n
Sudah dicoba beberapa skenario penggunaan control Tab pada JUICE UI dan UpdatePanel tetapi hasilnya selalu mengeluarkan pesan seperti d atas.\u00a0 Selain itu juga dicoba penggunaan control-control JUICE yang lain bersama dengan control UpdatePanel, hasilnya ada beberapa yang memang tidak bisa bekerja sama.<\/p>\n
Jadi untuk membuat aplikasi yang stabil dengan memanfaatkan control-control pembuatan antarmuka pada halaman Web Form, sepertinya Ajax Control Toolkit masih menjadi pilihan yang pertama.<\/p>\n","protected":false},"excerpt":{"rendered":"
Pada tulisan sebelumnya ditulis pengenalan tentang JUICE UI di sini : http:\/\/www.rezafaisal.net\/?p=1001.\u00a0 JUICE UI adalah web control untuk mempermudah penggunaan jQuery UI pada halaman web from pada ASP.NET.\u00a0 Pada posting tersebut diperlihatkan\u00a0 antarmuka salah satu control JUICE UI secara default…<\/p>\n","protected":false},"author":1,"featured_media":1003,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[101,68,102],"class_list":["post-1007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-ajax-control-toolkit","tag-asp-net","tag-juice-ui"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rezafaisal.net\/wp-content\/uploads\/2014\/01\/Capture.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-gf","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1007"}],"version-history":[{"count":1,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1007\/revisions"}],"predecessor-version":[{"id":1023,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/1007\/revisions\/1023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/1003"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}