{"id":49,"date":"2011-10-06T13:45:00","date_gmt":"2011-10-06T13:45:00","guid":{"rendered":"https:\/\/wdev-blog.azurewebsites.net\/index.php\/2011\/10\/06\/jquery-ajax-versus-server-side-event-handler\/"},"modified":"2011-10-06T13:45:00","modified_gmt":"2011-10-06T13:45:00","slug":"jquery-ajax-versus-server-side-event-handler","status":"publish","type":"post","link":"http:\/\/panahy.nl\/index.php\/2011\/10\/06\/jquery-ajax-versus-server-side-event-handler\/","title":{"rendered":"jQuery.Ajax versus Server-side event handler"},"content":{"rendered":"

<\/p>\n

\n

This sample demonstrates two ways of getting address from the server: using server-side event handler versus calling jQuery.Ajax<\/o:p><\/span><\/p>\n

The following is the markup that provides two fields with javascript call on the change event. It also provides a button that is wired to a server side methode: <\/o:p><\/span><\/p>\n

     <\/span><<\/span>div<\/span>><\/span> <\/o:p><\/span><\/p>\n

         <\/span><<\/span>h3<\/span>><\/span> Address Test<\/span><\/<\/span>h3<\/span>><\/span> <\/o:p><\/span><\/p>\n

         tabbing from the textboxes will verify if calling the webservice is required.<\/o:p><\/span><\/p>\n

         <\/span><<\/span>table<\/span>  <\/span>width<\/span>="100%"><<\/span>tr<\/span>><<\/span>td<\/span>><<\/span>table<\/span>><<\/span>tr<\/span>><\/span> <\/o:p><\/span><\/p>\n

                             <\/span><<\/span>td<\/span>><\/span> Huisnummer *<\/span><\/<\/span>td<\/span>><\/span> <\/o:p><\/span><\/p>\n

                             <\/span><<\/span>td<\/span>><\/span><<\/span>div<\/span> <\/span>class<\/span>="FieldContainer"><\/span> <\/o:p><\/span><\/p>\n

                                     <\/span><<\/span>asp<\/span>:<\/span>TextBox<\/span>  <\/span>runat<\/span>="server"<\/span>  <\/span>ID<\/span>="textboxHousenumber"<\/span>  <\/span>ClientIDMode<\/span>="Static"<\/span> <\/o:p><\/span><\/p>\n

                                         <\/span>CssClass<\/span>="TextField TextField02"<\/span> <\/span>onchange<\/span>="VerifyAddress();"<\/span> <\/o:p><\/span><\/p>\n

                                         <\/span>ValidationGroup<\/span>="KlantAddress"<\/span> <\/span>\/><\/span> <\/o:p><\/span><\/p>\n

                                 <\/span><\/<\/span>div<\/span>><\/span> <\/o:p><\/span><\/p>\n

                             <\/span><\/<\/span>td<\/span>><\/<\/span>tr<\/span>><<\/span>tr<\/span>><\/span> <\/o:p><\/span><\/p>\n

                             <\/span><<\/span>td<\/span>><\/span> Postcode *<\/span><\/<\/span>td<\/span>><\/span> <\/o:p><\/span><\/p>\n

                             <\/span><<\/span>td<\/span>><<\/span>div<\/span>  <\/span>class<\/span>="FieldContainer"><\/span> <\/o:p><\/span><\/p>\n

                                     <\/span><<\/span>asp<\/span>:<\/span>TextBox<\/span>  <\/span>runat<\/span>="server"<\/span>  <\/span>ID<\/span>="textboxPostcode"<\/span>      <\/span>ClientIDMode<\/span>="Static"<\/span> <\/o:p><\/span><\/p>\n

                                                 <\/span>CssClass<\/span>="TextField TextField02"<\/span>   <\/o:p><\/span><\/p>\n

                                                 <\/span>MaxLength<\/span>="7"<\/span>  <\/span>onchange<\/span>="VerifyAddress();"<\/span> <\/o:p><\/span><\/p>\n

                                                 <\/span>ValidationGroup<\/span>="KlantAddress"<\/span>  <\/o:p><\/span><\/p>\n

                                                 <\/span>\/><\/span> <\/o:p><\/span><\/p>\n

                                 <\/span><\/<\/span>div<\/span>><\/span> <\/o:p><\/span><\/p>\n

                             <\/span><\/<\/span>td<\/span>><\/<\/span>tr<\/span>><\/span> <\/o:p><\/span><\/p>\n

                     <\/span><\/<\/span>table<\/span>><\/span> <\/o:p><\/span><\/p>\n

                   Server side call:<\/span><<\/span>br<\/span>  <\/span>\/><\/span> <\/o:p><\/span><\/p>\n

                     <\/span><<\/span>asp<\/span>:<\/span>Button<\/span>  <\/span>ID<\/span>="Button1"<\/span>  <\/span>runat<\/span>="server"<\/span>  <\/span>OnClick<\/span>="ShowAddress"<\/span>  <\/span>Text<\/span>="Get Adres"<\/span>  <\/span>ToolTip<\/span>="CustomerDataController"<\/span>  <\/span>\/><\/span> <\/o:p><\/span><\/p>\n

                     <\/span><<\/span>asp<\/span>:<\/span>Label<\/span>  <\/span>runat<\/span>="server"<\/span>  <\/span>ID<\/span>="lblAddress"<\/span>  <\/span>\/><\/span><\/o:p><\/span><\/p>\n

                    <\/o:p><\/span><\/p>\n

 <\/o:p><\/span><\/p>\n

Assume we have a we DBLLayer that provides an address or throws an exception.
The event handler would be something like this: <\/o:p><\/span><\/p>\n

 <\/o:p><\/span><\/p>\n

     <\/span>\/\/\/<\/span> <\/span><summary><\/span>Server side event handler<\/span><\/summary><\/span> <\/o:p><\/span><\/p>\n

     <\/span>public<\/span>  <\/span>void<\/span>  ShowAddress(<\/span>object<\/span>  sender, <\/span>EventArgs<\/span>  e)<\/o:p><\/span><\/p>\n

     {<\/o:p><\/span><\/p>\n

         <\/span>try<\/span> <\/o:p><\/span><\/p>\n

         {<\/o:p><\/span><\/p>\n

             <\/span>var<\/span>  adres = <\/span>DBLayer<\/span>.GetAddress(textboxPostcode.Text, textboxHousenumber.Text);<\/o:p><\/span><\/p>\n

             ShowAdres(adres);<\/o:p><\/span><\/p>\n

         }<\/o:p><\/span><\/p>\n

         <\/span>catch<\/span>  (<\/span>Exception<\/span>  ex)<\/o:p><\/span><\/p>\n

         {<\/o:p><\/span><\/p>\n

             LogError(<\/span>"Error :- "<\/span>  + ex.Message);<\/o:p><\/span><\/p>\n

         }<\/o:p><\/span><\/p>\n

     }<\/o:p><\/span><\/p>\n

 <\/o:p><\/span><\/p>\n

And the Javascript will look like this: <\/o:p><\/span><\/p>\n

 <\/o:p><\/span><\/p>\n

     <\/span>function<\/span>  VerifyAddress() {<\/o:p><\/span><\/p>\n

         <\/span>\/\/ This method is calling the ShowAddress only if both parameters are filled in. <\/span> <\/o:p><\/span><\/p>\n

         $(<\/span>"#<\/span><%<\/span>=<\/span>lblAddress.ClientID <\/span>%>" ).text(<\/span>""<\/span> );<\/o:p><\/span><\/p>\n

         <\/span>var<\/span>  postcode = $(<\/span>"#<\/span><%<\/span>=<\/span>textboxPostcode.ClientID <\/span>%>" ).val();<\/o:p><\/span><\/p>\n

         <\/span>var<\/span>  huisnummer = $(<\/span>"#<\/span><%<\/span>=<\/span>textboxHousenumber.ClientID <\/span>%>" ).val();<\/o:p><\/span><\/p>\n

         <\/span>if<\/span>  (postcode && huisnummer && parseInt(huisnummer) > 0) {<\/o:p><\/span><\/p>\n

<\/o:p><\/span><\/p>\n

             $(<\/span>"#<\/span><%<\/span>=<\/span>lblAddress.ClientID <\/span>%>" ).text(<\/span>"calling the server"<\/span> );<\/o:p><\/span><\/p>\n

             <\/span>var<\/span>  data = <\/span>"<\/span>{<\/span> postcode:’"<\/span>  + postcode + <span’ , huisnummer: "  + huisnummer + <\/span>" <\/span>}<\/span>"<\/span> ;<\/o:p><\/span><\/p>\n

             <\/span>jQuery.ajax({<\/o:p><\/span><\/p>\n

                 type: <span’ ,<\/o:p><\/span><\/p>\n

                 contentType: <span’application\/json;’ ,<\/o:p><\/span><\/p>\n

                 data: data,<\/o:p><\/span><\/p>\n

                 dataType: <span’ ,<\/o:p><\/span><\/p>\n

                 url: <span’ ,<\/o:p><\/span><\/p>\n

                 success: OnGetAddressComplete,<\/o:p><\/span><\/p>\n

                 error: OnErrorReceived<\/o:p><\/span><\/p>\n

             });<\/o:p><\/span><\/p>\n

         }<\/o:p><\/span><\/p>\n

     }<\/o:p><\/span><\/p>\n

<\/o:p><\/span><\/p>\n

     <\/span>function<\/span>  OnErrorReceived(xhr, ajaxOptions, thrownError) {<\/o:p><\/span><\/p>\n

         <\/span>var<\/span>  message = jQuery.parseJSON(xhr.responseText);<\/o:p><\/span><\/p>\n

         $(<\/span>"#<\/span><%<\/span>=<\/span>lblAddress.ClientID <\/span>%>" ).text(<\/o:p><\/span><\/p>\n

             <\/span>"ERROR ("<\/span>  + xhr.status + <\/span>") – "<\/span>  + message.Message);<\/o:p><\/span><\/p>\n

     }<\/o:p><\/span><\/p>\n

<\/o:p><\/span><\/p>\n

     <\/span>function<\/span>  OnGetAddressComplete(result) {<\/o:p><\/span><\/p>\n

         <\/span>\/\/ display the result<\/span> <\/o:p><\/span><\/p>\n

         <\/span>var<\/span>  adres = result.d;<\/o:p><\/span><\/p>\n

         $(<\/span>"#<\/span><%<\/span>=<\/span>lblAddress.ClientID <\/span>%>" ).text(<\/o:p><\/span><\/p>\n

             <\/span>adres.Straat + <span”  +<\/o:p><\/span><\/p>\n

             adres.Huisnummer + <span’,’  +<\/o:p><\/span><\/p>\n

             adres.Postcode + <span”  + adres.Plaats);<\/o:p><\/span><\/p>\n

<\/o:p><\/span><\/p>\n

     <\/span>}<\/o:p><\/span><\/p>\n

<\/o:p><\/span><\/p>\n

And finally the webservice will be like:<\/o:p><\/span><\/p>\n

 <\/o:p><\/span><\/p>\n

     [System.Web.Services.<\/span>WebMethod<\/span> ()]<\/o:p><\/span><\/p>\n

     <\/span>public<\/span>  <\/span>static<\/span>  Adres GetAddress(<\/span>string<\/span>  postcode, <\/span>string<\/span>  huisnummer)<\/o:p><\/span><\/p>\n

     {<\/o:p><\/span><\/p>\n

         <\/span>if<\/span>  (!IsPostcode(postcode))<\/o:p><\/span><\/p>\n

             <\/span>throw<\/span>  <\/span>new<\/span>  <\/span>Exception<\/span> (<\/span>"Invalid Postcode."<\/span> );<\/o:p><\/span><\/p>\n

<\/o:p><\/span><\/p>\n

         <\/span>int<\/span>  hNr = 0;<\/o:p><\/span><\/p>\n

         <\/span>if<\/span>  (!<\/span>Int32<\/span> .TryParse(huisnummer, <\/span>out<\/span>  hNr))<\/o:p><\/span><\/p>\n

             <\/span>throw<\/span>  <\/span>new<\/span>  <\/span>Exception<\/span> (<\/span>"Invalid house number."<\/span> );<\/o:p><\/span><\/p>\n

<\/o:p><\/span><\/p>\n

         <\/span>var<\/span>  result = <\/span>DBLayer<\/span> .GetAddress(postcode, huisnummer);<\/o:p><\/span><\/p>\n

<\/o:p><\/span><\/p>\n

         <\/span>if<\/span>  (result == <\/span>null<\/span> )<\/o:p><\/span><\/p>\n

             <\/span>throw<\/span>  <\/span>new<\/span>  <\/span>Exception<\/span> (<\/span>" Unknown address."<\/span> );<\/o:p><\/span><\/p>\n

<\/o:p><\/span><\/p>\n

         <\/span>return<\/span>  result;<\/o:p><\/span><\/p>\n

     }<\/o:p><\/span><\/p>\n

     <\/o:p><\/span><\/p>\n

     <\/span>public<\/span> <\/span>static<\/span> <\/span>bool<\/span> IsPostcode(<\/span>string<\/span>  zipcode)<\/o:p><\/span><\/p>\n

     <\/span>{<\/o:p><\/span><\/p>\n

         <\/span>var<\/span>  ZipcodeRegex = <\/span>@"^[1-9][0-9]<\/span>{<\/span>3<\/span>}<\/span>[a-zA-Z]<\/span>{<\/span>2<\/span>}<\/span>[\\s]*$"<\/span> ;<\/o:p><\/span><\/p>\n

         <\/span>Regex<\/span>  r = <\/span>new<\/span>  <\/span>Regex<\/span> (ZipcodeRegex, <\/span>RegexOptions<\/span> .IgnoreCase);<\/o:p><\/span><\/p>\n

         <\/span>Match<\/span>  m = r.Match(zipcode);<\/o:p><\/span><\/p>\n

         <\/span>return<\/span>  m.Success;<\/o:p><\/span><\/p>\n

     }<\/o:p><\/span><\/p>\n

     <\/o:p><\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

This sample demonstrates two ways of getting address from the server: using server-side event handler versus calling jQuery.Ajax The following is the markup that provides two fields with javascript call on the change event. It also provides a button that is wired to a server side methode:      <div>          <h3> Address Test<\/h3>          tabbing from the textboxes … Continue reading “jQuery.Ajax versus Server-side event handler”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false},"uagb_author_info":{"display_name":"Pouya Panahy","author_link":"http:\/\/panahy.nl\/index.php\/author\/pouya\/"},"uagb_comment_info":0,"uagb_excerpt":"This sample demonstrates two ways of getting address from the server: using server-side event handler versus calling jQuery.Ajax The following is the markup that provides two fields with javascript call on the change event. It also provides a button that is wired to a server side methode:      <div>          <h3> Address Test<\/h3>          tabbing from the textboxes…","_links":{"self":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/49"}],"collection":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":0,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"wp:attachment":[{"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/panahy.nl\/index.php\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}